diff --git a/.prettierrc.cjs b/.prettierrc.cjs
index 1b9d10d4d..c987613b0 100644
--- a/.prettierrc.cjs
+++ b/.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'
             }
         },
         {
diff --git a/apps/radix-perf-testing/src/harness/benchmark.ts b/apps/radix-perf-testing/src/harness/benchmark.ts
index 5ca041288..af935e622 100644
--- a/apps/radix-perf-testing/src/harness/benchmark.ts
+++ b/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). */
diff --git a/apps/radix-perf-testing/src/harness/reporter.ts b/apps/radix-perf-testing/src/harness/reporter.ts
index 66c578ca2..fa59e6a89 100644
--- a/apps/radix-perf-testing/src/harness/reporter.ts
+++ b/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.
diff --git a/apps/radix-perf-testing/src/tests/checkbox.bench.ts b/apps/radix-perf-testing/src/tests/checkbox.bench.ts
index 6af2aca55..9b86663d7 100644
--- a/apps/radix-perf-testing/src/tests/checkbox.bench.ts
+++ b/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>
         }
     `
 })
diff --git a/apps/radix-perf-testing/src/tests/select.bench.ts b/apps/radix-perf-testing/src/tests/select.bench.ts
index f04cd5eaa..6358f463f 100644
--- a/apps/radix-perf-testing/src/tests/select.bench.ts
+++ b/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>
                             }
diff --git a/apps/radix-playground/src/app/app.config.ts b/apps/radix-playground/src/app/app.config.ts
index 963770446..6394fd7df 100644
--- a/apps/radix-playground/src/app/app.config.ts
+++ b/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: [
diff --git a/apps/radix-playground/src/app/pages/accordion.ts b/apps/radix-playground/src/app/pages/accordion.ts
index d8de10192..d71c5cb50 100644
--- a/apps/radix-playground/src/app/pages/accordion.ts
+++ b/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>
diff --git a/apps/radix-playground/src/app/pages/checkbox.ts b/apps/radix-playground/src/app/pages/checkbox.ts
index 505528e08..1744a41b4 100644
--- a/apps/radix-playground/src/app/pages/checkbox.ts
+++ b/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>
diff --git a/apps/radix-playground/src/app/pages/dialog.ts b/apps/radix-playground/src/app/pages/dialog.ts
index 6af3c4ce5..09765a607 100644
--- a/apps/radix-playground/src/app/pages/dialog.ts
+++ b/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>
diff --git a/apps/radix-playground/src/app/pages/home.ts b/apps/radix-playground/src/app/pages/home.ts
index 3cac28773..38c77f279 100644
--- a/apps/radix-playground/src/app/pages/home.ts
+++ b/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',
diff --git a/apps/radix-playground/src/app/pages/landing.ts b/apps/radix-playground/src/app/pages/landing.ts
index a9239ab2f..744406757 100644
--- a/apps/radix-playground/src/app/pages/landing.ts
+++ b/apps/radix-playground/src/app/pages/landing.ts
@@ -1,3 +1,5 @@
+import primitivesPackage from '../../../../../packages/primitives/package.json';
+import { ThemeStore } from '../shared/theme';
 import { NgTemplateOutlet } from '@angular/common';
 import { ChangeDetectionStrategy, Component, inject, signal } from '@angular/core';
 import { RouterLink } from '@angular/router';
@@ -31,8 +33,6 @@ import {
     RdxCheckboxRootDirective
 } from '@radix-ng/primitives/checkbox';
 import { RdxSwitchRoot, RdxSwitchThumb } from '@radix-ng/primitives/switch';
-import primitivesPackage from '../../../../../packages/primitives/package.json';
-import { ThemeStore } from '../shared/theme';
 
 const installCommand = 'ng add @radix-ng/primitives';
 const skillCommand = 'npx skills add radix-ng/primitives/skills';
@@ -76,9 +76,9 @@ type CopyTarget = 'install' | 'skill';
         <main class="bg-background text-foreground min-h-screen">
             <button
                 class="border-border bg-card hover:bg-muted fixed top-4 right-4 z-50 inline-flex size-10 items-center justify-center rounded-full border text-[var(--landing-accent-text)] shadow-sm transition-colors outline-none focus-visible:ring-2 focus-visible:ring-[var(--landing-accent-text)]"
+                type="button"
                 [attr.aria-label]="'Switch to ' + (theme.theme() === 'light' ? 'dark' : 'light') + ' theme'"
                 (click)="theme.toggle()"
-                type="button"
             >
                 @if (theme.theme() === 'dark') {
                     <svg class="size-4" lucideSun></svg>
@@ -156,10 +156,10 @@ type CopyTarget = 'install' | 'skill';
                             </a>
                             <a
                                 class="inline-flex h-11 items-center gap-2 rounded-md border border-[color:var(--landing-accent-border)] px-3 text-sm font-medium no-underline transition-colors hover:bg-[color:var(--landing-accent-tint)]"
-                                [href]="npmPackageUrl"
                                 target="_blank"
                                 rel="noreferrer"
                                 aria-label="View @radix-ng/primitives on npm"
+                                [href]="npmPackageUrl"
                             >
                                 <svg class="size-5" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
                                     <path d="M3 3h18v18H3V3Zm3.5 14h3V8.5H12V17h3V8.5h2.5V17h3V6H6.5v11Z" />
@@ -169,10 +169,10 @@ type CopyTarget = 'install' | 'skill';
                             </a>
                             <a
                                 class="inline-flex size-11 items-center justify-center rounded-md border border-[color:var(--landing-accent-border)] text-[var(--landing-accent-text)] no-underline transition-colors hover:bg-[color:var(--landing-accent-tint)]"
-                                [href]="telegramUrl"
                                 target="_blank"
                                 rel="noreferrer"
                                 aria-label="Open Radix NG Telegram channel"
+                                [href]="telegramUrl"
                             >
                                 <svg class="size-5" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
                                     <path
@@ -189,9 +189,9 @@ type CopyTarget = 'install' | 'skill';
                             <span class="truncate">{{ installCommand }}</span>
                             <button
                                 class="hover:bg-background ml-auto inline-flex size-7 shrink-0 items-center justify-center rounded text-[var(--landing-accent-text)] transition-colors"
+                                type="button"
                                 [attr.aria-label]="copied() === 'install' ? 'Copied' : 'Copy install command'"
                                 (click)="copy('install', installCommand)"
-                                type="button"
                             >
                                 @if (copied() === 'install') {
                                     <svg class="size-3.5" lucideCheck></svg>
@@ -286,10 +286,10 @@ type CopyTarget = 'install' | 'skill';
                                     </span>
                                     <button
                                         class="bg-muted relative inline-flex h-6 w-11 shrink-0 cursor-pointer items-center rounded-full border-0 p-0 transition-colors outline-none focus-visible:ring-2 focus-visible:ring-[var(--landing-accent-text)] data-[checked]:bg-[color:var(--landing-accent-fill)]"
-                                        [checked]="emailEnabled()"
-                                        (onCheckedChange)="emailEnabled.set($event.checked)"
                                         aria-label="Email notifications"
                                         rdxSwitchRoot
+                                        [checked]="emailEnabled()"
+                                        (onCheckedChange)="emailEnabled.set($event.checked)"
                                     >
                                         <span
                                             class="bg-background pointer-events-none block size-5 translate-x-0.5 rounded-full shadow-sm transition-transform data-[checked]:translate-x-[22px]"
@@ -308,9 +308,9 @@ type CopyTarget = 'install' | 'skill';
                                         &quot;
                                     </span>
                                     <div
+                                        rdxCheckboxRoot
                                         [checked]="licenseAccepted()"
                                         (onCheckedChange)="licenseAccepted.set($event.checked)"
-                                        rdxCheckboxRoot
                                     >
                                         <button
                                             class="border-input inline-flex size-5 items-center justify-center rounded border bg-transparent text-white transition-colors outline-none focus-visible:ring-2 focus-visible:ring-[var(--landing-accent-text)] data-[state=checked]:border-[color:var(--landing-accent-fill)] data-[state=checked]:bg-[color:var(--landing-accent-fill)]"
@@ -338,10 +338,10 @@ type CopyTarget = 'install' | 'skill';
                                     </span>
                                     <button
                                         class="bg-muted relative inline-flex h-6 w-11 shrink-0 cursor-pointer items-center rounded-full border-0 p-0 transition-colors outline-none focus-visible:ring-2 focus-visible:ring-[var(--landing-accent-text)] data-[checked]:bg-[color:var(--landing-accent-fill)]"
-                                        [checked]="marketingEnabled()"
-                                        (onCheckedChange)="marketingEnabled.set($event.checked)"
                                         aria-label="Marketing emails"
                                         rdxSwitchRoot
+                                        [checked]="marketingEnabled()"
+                                        (onCheckedChange)="marketingEnabled.set($event.checked)"
                                     >
                                         <span
                                             class="bg-background pointer-events-none block size-5 translate-x-0.5 rounded-full shadow-sm transition-transform data-[checked]:translate-x-[22px]"
@@ -366,15 +366,15 @@ type CopyTarget = 'install' | 'skill';
 
                             <div
                                 class="border-border bg-background overflow-hidden rounded-md border"
-                                [defaultValue]="'accessibility'"
                                 keepMounted
                                 rdxAccordionRoot
+                                [defaultValue]="'accessibility'"
                             >
                                 @for (item of accordionItems; track item.value) {
                                     <div
                                         class="border-border border-t first:border-t-0 data-[open]:bg-[color:var(--landing-accent-tint)]"
-                                        [value]="item.value"
                                         rdxAccordionItem
+                                        [value]="item.value"
                                     >
                                         <h3 rdxAccordionHeader>
                                             <button
@@ -559,9 +559,9 @@ type CopyTarget = 'install' | 'skill';
                             <span class="truncate">{{ skillCommand }}</span>
                             <button
                                 class="hover:bg-background ml-auto inline-flex size-7 shrink-0 items-center justify-center rounded text-[var(--landing-accent-text)] transition-colors"
+                                type="button"
                                 [attr.aria-label]="copied() === 'skill' ? 'Copied' : 'Copy skill command'"
                                 (click)="copy('skill', skillCommand)"
-                                type="button"
                             >
                                 @if (copied() === 'skill') {
                                     <svg class="size-3.5" lucideCheck></svg>
@@ -643,17 +643,17 @@ type CopyTarget = 'install' | 'skill';
                         @for (person of coreTeam; track person.login) {
                             <a
                                 class="border-border bg-card hover:bg-background flex items-center gap-4 rounded-lg border px-5 py-4 no-underline shadow-sm transition-colors"
-                                [href]="person.url"
                                 target="_blank"
                                 rel="noreferrer"
+                                [href]="person.url"
                             >
                                 <img
                                     class="size-[52px] shrink-0 rounded-full"
-                                    [src]="person.avatarUrl"
-                                    [alt]="person.login + ' avatar'"
                                     width="52"
                                     height="52"
                                     loading="lazy"
+                                    [src]="person.avatarUrl"
+                                    [alt]="person.login + ' avatar'"
                                 />
                                 <div class="min-w-0">
                                     <div class="flex flex-wrap items-center gap-1.5 text-base font-semibold">
@@ -682,17 +682,17 @@ type CopyTarget = 'install' | 'skill';
                             @for (person of community; track person.login) {
                                 <a
                                     class="hover:bg-muted flex min-w-0 items-center gap-2.5 rounded-md p-2 no-underline transition-colors"
-                                    [href]="person.url"
                                     target="_blank"
                                     rel="noreferrer"
+                                    [href]="person.url"
                                 >
                                     <img
                                         class="size-[34px] shrink-0 rounded-full"
-                                        [src]="person.avatarUrl"
-                                        [alt]="person.login + ' avatar'"
                                         width="34"
                                         height="34"
                                         loading="lazy"
+                                        [src]="person.avatarUrl"
+                                        [alt]="person.login + ' avatar'"
                                     />
                                     <span class="min-w-0 leading-tight">
                                         <span class="block truncate text-sm font-medium">{{ person.login }}</span>
@@ -766,9 +766,9 @@ type CopyTarget = 'install' | 'skill';
                         </a>
                         <a
                             class="inline-flex items-center gap-3 no-underline transition-colors hover:text-[var(--landing-accent-text)]"
-                            [href]="npmPackageUrl"
                             target="_blank"
                             rel="noreferrer"
+                            [href]="npmPackageUrl"
                         >
                             <svg class="size-5" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
                                 <path d="M3 3h18v18H3V3Zm3.5 14h3V8.5H12V17h3V8.5h2.5V17h3V6H6.5v11Z" />
@@ -796,9 +796,9 @@ type CopyTarget = 'install' | 'skill';
                         </a>
                         <a
                             class="no-underline hover:text-[var(--landing-accent-text)]"
-                            [href]="telegramUrl"
                             target="_blank"
                             rel="noreferrer"
+                            [href]="telegramUrl"
                         >
                             Telegram
                         </a>
diff --git a/apps/radix-playground/src/app/pages/popover.ts b/apps/radix-playground/src/app/pages/popover.ts
index fa7ddd9ef..de2f6a496 100644
--- a/apps/radix-playground/src/app/pages/popover.ts
+++ b/apps/radix-playground/src/app/pages/popover.ts
@@ -1,8 +1,8 @@
+import { DemoPage } from '../shared/demo-page';
+import { cn, demoButton, demoInput, demoPopover } from '../shared/styles';
 import { ChangeDetectionStrategy, Component } from '@angular/core';
 import { LucidePlus, LucideX } from '@lucide/angular';
 import { popoverImports } from '@radix-ng/primitives/popover';
-import { DemoPage } from '../shared/demo-page';
-import { cn, demoButton, demoInput, demoPopover } from '../shared/styles';
 
 @Component({
     selector: 'app-popover',
@@ -14,29 +14,29 @@ import { cn, demoButton, demoInput, demoPopover } from '../shared/styles';
             description="Displays rich content in a portal, anchored to and triggered by a button."
         >
             <ng-container rdxPopoverRoot>
-                <button [class]="cn(b.base, b.outline, b.size.md)" rdxPopoverTrigger>
+                <button rdxPopoverTrigger [class]="cn(b.base, b.outline, b.size.md)">
                     <svg aria-hidden="true" lucidePlus size="16"></svg>
                     Add details
                 </button>
 
-                <div *rdxPopoverPortal [class]="p.positioner" sideOffset="8" rdxPopoverPositioner>
-                    <div [class]="p.popup" rdxPopoverPopup>
-                        <span [class]="p.arrow" rdxPopoverArrow></span>
-                        <h2 [class]="p.title" rdxPopoverTitle>Dimensions</h2>
-                        <p [class]="p.description" rdxPopoverDescription>Set the width and height for the element.</p>
+                <div *rdxPopoverPortal sideOffset="8" rdxPopoverPositioner [class]="p.positioner">
+                    <div rdxPopoverPopup [class]="p.popup">
+                        <span rdxPopoverArrow [class]="p.arrow"></span>
+                        <h2 rdxPopoverTitle [class]="p.title">Dimensions</h2>
+                        <p rdxPopoverDescription [class]="p.description">Set the width and height for the element.</p>
 
                         <div class="mt-4 grid gap-3">
                             <label class="text-foreground grid gap-1 text-xs font-medium">
                                 Width
-                                <input [class]="input" value="100%" />
+                                <input value="100%" [class]="input" />
                             </label>
                             <label class="text-foreground grid gap-1 text-xs font-medium">
                                 Max width
-                                <input [class]="input" value="300px" />
+                                <input value="300px" [class]="input" />
                             </label>
                         </div>
 
-                        <button [class]="p.close" aria-label="Close" rdxPopoverClose>
+                        <button aria-label="Close" rdxPopoverClose [class]="p.close">
                             <svg aria-hidden="true" lucideX size="14"></svg>
                         </button>
                     </div>
diff --git a/apps/radix-playground/src/app/pages/select.ts b/apps/radix-playground/src/app/pages/select.ts
index bde9d61ef..8c0de5822 100644
--- a/apps/radix-playground/src/app/pages/select.ts
+++ b/apps/radix-playground/src/app/pages/select.ts
@@ -1,7 +1,7 @@
+import { DemoPage } from '../shared/demo-page';
 import { ChangeDetectionStrategy, Component } from '@angular/core';
 import { LucideCheck, LucideChevronDown } from '@lucide/angular';
 import { _importsSelect } from '@radix-ng/primitives/select';
-import { DemoPage } from '../shared/demo-page';
 
 @Component({
     selector: 'app-select',
@@ -24,7 +24,7 @@ import { DemoPage } from '../shared/demo-page';
                     <svg lucideChevronDown size="16"></svg>
                 </button>
 
-                <div class="z-[100]" *rdxSelectPortal sideOffset="8" rdxSelectPositioner>
+                <div *rdxSelectPortal class="z-[100]" sideOffset="8" rdxSelectPositioner>
                     <div
                         class="border-border bg-popover text-popover-foreground min-w-40 rounded-lg border shadow-md will-change-[opacity,transform]"
                         rdxSelectPopup
@@ -34,8 +34,8 @@ import { DemoPage } from '../shared/demo-page';
                                 @for (option of options; track option) {
                                     <div
                                         class="text-popover-foreground data-[disabled]:text-muted-foreground data-[highlighted]:bg-primary data-[highlighted]:text-primary-foreground relative flex h-8 cursor-default items-center rounded-sm pr-8 pl-6 text-sm leading-none outline-none select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50"
-                                        [value]="option"
                                         rdxSelectItem
+                                        [value]="option"
                                     >
                                         <span
                                             class="absolute left-0 inline-flex w-6 items-center justify-center"
diff --git a/apps/radix-playground/src/app/pages/slider.ts b/apps/radix-playground/src/app/pages/slider.ts
index cbe21b2ad..d589db634 100644
--- a/apps/radix-playground/src/app/pages/slider.ts
+++ b/apps/radix-playground/src/app/pages/slider.ts
@@ -1,3 +1,4 @@
+import { DemoPage } from '../shared/demo-page';
 import { ChangeDetectionStrategy, Component } from '@angular/core';
 import {
     RdxSliderControl,
@@ -7,7 +8,6 @@ import {
     RdxSliderThumbInput,
     RdxSliderTrack
 } from '@radix-ng/primitives/slider';
-import { DemoPage } from '../shared/demo-page';
 
 @Component({
     selector: 'app-slider',
@@ -23,7 +23,7 @@ import { DemoPage } from '../shared/demo-page';
     ],
     template: `
         <demo-page title="Slider" description="An input where the user selects a value from within a given range.">
-            <div class="relative w-64 select-none" [value]="45" [step]="5" rdxSliderRoot>
+            <div class="relative w-64 select-none" rdxSliderRoot [value]="45" [step]="5">
                 <div class="flex h-5 w-full touch-none items-center" rdxSliderControl>
                     <div class="bg-muted relative h-1 w-full rounded-full" rdxSliderTrack>
                         <div class="bg-primary h-full rounded-full" rdxSliderIndicator></div>
diff --git a/apps/radix-playground/src/app/pages/switch.ts b/apps/radix-playground/src/app/pages/switch.ts
index 10cfd4464..ec19d260f 100644
--- a/apps/radix-playground/src/app/pages/switch.ts
+++ b/apps/radix-playground/src/app/pages/switch.ts
@@ -1,7 +1,7 @@
+import { DemoPage } from '../shared/demo-page';
 import { ChangeDetectionStrategy, Component } from '@angular/core';
 import { RdxLabelDirective } from '@radix-ng/primitives/label';
 import { RdxSwitchRoot, RdxSwitchThumb } from '@radix-ng/primitives/switch';
-import { DemoPage } from '../shared/demo-page';
 
 @Component({
     selector: 'app-switch',
diff --git a/apps/radix-playground/src/app/pages/tabs.ts b/apps/radix-playground/src/app/pages/tabs.ts
index 2e5957c7c..9a7200c46 100644
--- a/apps/radix-playground/src/app/pages/tabs.ts
+++ b/apps/radix-playground/src/app/pages/tabs.ts
@@ -1,6 +1,6 @@
+import { DemoPage } from '../shared/demo-page';
 import { ChangeDetectionStrategy, Component } from '@angular/core';
 import { RdxTabsList, RdxTabsPanel, RdxTabsRoot, RdxTabsTab } from '@radix-ng/primitives/tabs';
-import { DemoPage } from '../shared/demo-page';
 
 const tab =
     'relative inline-flex h-10 items-center justify-center px-4 text-sm font-medium text-muted-foreground outline-none transition-colors hover:text-foreground focus-visible:ring-2 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 data-[active]:bg-background data-[active]:text-foreground data-[active]:shadow-[inset_0_-2px_0_0_var(--primary)]';
@@ -20,8 +20,8 @@ const tab =
                 defaultValue="account"
             >
                 <div class="border-border bg-muted/30 flex border-b" rdxTabsList>
-                    <button [class]="tab" rdxTabsTab value="account">Account</button>
-                    <button [class]="tab" rdxTabsTab value="password">Password</button>
+                    <button rdxTabsTab value="account" [class]="tab">Account</button>
+                    <button rdxTabsTab value="password" [class]="tab">Password</button>
                 </div>
                 <div
                     class="bg-background text-foreground p-6 text-sm leading-6 outline-none"
diff --git a/apps/radix-playground/src/app/playground-mascot/index.ts b/apps/radix-playground/src/app/playground-mascot/index.ts
index 3ac003af5..28363840c 100644
--- a/apps/radix-playground/src/app/playground-mascot/index.ts
+++ b/apps/radix-playground/src/app/playground-mascot/index.ts
@@ -1,12 +1,23 @@
+import { PRIMITIVES } from '../shared/primitives';
+import { PlaygroundMascotAvatar } from './playground-mascot-avatar';
+import type { InspectedElement, LiveStateChange, PinGeometry } from './playground-mascot-data';
+import {
+    DEFAULT_MASCOT_HINTS,
+    isStateAttribute,
+    MASCOT_HINTS,
+    RDX_ATTRIBUTE_LABELS,
+    searchMascotDocs
+} from './playground-mascot-data';
+import { PlaygroundMascotPin } from './playground-mascot-pin';
 import { DOCUMENT, isPlatformBrowser } from '@angular/common';
 import {
     ChangeDetectionStrategy,
     Component,
+    computed,
     DestroyRef,
     ElementRef,
-    PLATFORM_ID,
-    computed,
     inject,
+    PLATFORM_ID,
     signal
 } from '@angular/core';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
@@ -21,17 +32,6 @@ import {
     LucideX
 } from '@lucide/angular';
 import { filter } from 'rxjs';
-import { PRIMITIVES } from '../shared/primitives';
-import { PlaygroundMascotAvatar } from './playground-mascot-avatar';
-import type { InspectedElement, LiveStateChange, PinGeometry } from './playground-mascot-data';
-import {
-    DEFAULT_MASCOT_HINTS,
-    MASCOT_HINTS,
-    RDX_ATTRIBUTE_LABELS,
-    isStateAttribute,
-    searchMascotDocs
-} from './playground-mascot-data';
-import { PlaygroundMascotPin } from './playground-mascot-pin';
 
 @Component({
     selector: 'app-playground-mascot',
@@ -75,9 +75,9 @@ import { PlaygroundMascotPin } from './playground-mascot-pin';
                         </div>
                         <button
                             class="text-muted-foreground hover:bg-muted hover:text-foreground inline-flex size-7 shrink-0 items-center justify-center rounded-md"
-                            (click)="hide()"
                             type="button"
                             aria-label="Hide mascot"
+                            (click)="hide()"
                         >
                             <svg class="size-3.5" lucideX aria-hidden="true"></svg>
                         </button>
@@ -125,10 +125,10 @@ import { PlaygroundMascotPin } from './playground-mascot-pin';
                                 <input
                                     class="placeholder:text-muted-foreground text-foreground min-w-0 flex-1 bg-transparent text-xs outline-none"
                                     id="mascot-docs-search"
-                                    [value]="docsQuery()"
-                                    (input)="updateDocsQuery($event)"
                                     placeholder="Ask about state, forms, keyboard..."
                                     type="search"
+                                    [value]="docsQuery()"
+                                    (input)="updateDocsQuery($event)"
                                 />
                             </div>
                             <p class="text-muted-foreground mt-1.5 text-[11px] leading-4">
@@ -153,8 +153,8 @@ import { PlaygroundMascotPin } from './playground-mascot-pin';
                                                     </div>
                                                     <a
                                                         class="text-muted-foreground hover:text-foreground inline-flex size-6 shrink-0 items-center justify-center rounded-md"
-                                                        [href]="result.href"
                                                         aria-label="Open docs"
+                                                        [href]="result.href"
                                                     >
                                                         <svg
                                                             class="size-3.5"
@@ -230,14 +230,15 @@ import { PlaygroundMascotPin } from './playground-mascot-pin';
                     <div class="mt-3 flex gap-2">
                         <button
                             class="border-border bg-background text-foreground hover:bg-muted inline-flex h-8 items-center gap-1.5 rounded-md border px-2.5 text-xs font-medium shadow-xs"
-                            (click)="nextHint()"
                             type="button"
+                            (click)="nextHint()"
                         >
                             <svg class="size-3.5" lucideLightbulb aria-hidden="true"></svg>
                             Hint
                         </button>
                         <button
                             class="border-border inline-flex h-8 items-center gap-1.5 rounded-md border px-2.5 text-xs font-medium shadow-xs"
+                            type="button"
                             [class.bg-[var(--mascot-accent)]]="docsMode()"
                             [class.text-[var(--mascot-accent-foreground)]]="docsMode()"
                             [class.bg-background]="!docsMode()"
@@ -245,13 +246,13 @@ import { PlaygroundMascotPin } from './playground-mascot-pin';
                             [class.hover:bg-muted]="!docsMode()"
                             [attr.aria-pressed]="docsMode()"
                             (click)="toggleDocs()"
-                            type="button"
                         >
                             <svg class="size-3.5" lucideBookOpen aria-hidden="true"></svg>
                             Docs
                         </button>
                         <button
                             class="border-border inline-flex h-8 items-center gap-1.5 rounded-md border px-2.5 text-xs font-medium shadow-xs"
+                            type="button"
                             [class.bg-[var(--mascot-accent)]]="inspectMode()"
                             [class.text-[var(--mascot-accent-foreground)]]="inspectMode()"
                             [class.bg-background]="!inspectMode()"
@@ -259,7 +260,6 @@ import { PlaygroundMascotPin } from './playground-mascot-pin';
                             [class.hover:bg-muted]="!inspectMode()"
                             [attr.aria-pressed]="inspectMode()"
                             (click)="toggleInspect()"
-                            type="button"
                         >
                             <svg class="size-3.5" lucideEye aria-hidden="true"></svg>
                             Inspect
@@ -269,9 +269,9 @@ import { PlaygroundMascotPin } from './playground-mascot-pin';
 
                 <button
                     class="group focus-visible:ring-ring focus-visible:ring-offset-background relative mb-1 inline-flex size-16 shrink-0 items-center justify-center rounded-full outline-none focus-visible:ring-2 focus-visible:ring-offset-2"
-                    (click)="nextHint()"
                     type="button"
                     aria-label="Show next mascot hint"
+                    (click)="nextHint()"
                 >
                     <app-playground-mascot-avatar />
                     @if (inspectMode()) {
@@ -286,9 +286,9 @@ import { PlaygroundMascotPin } from './playground-mascot-pin';
         } @else {
             <button
                 class="pointer-events-auto fixed right-5 bottom-5 inline-flex size-12 items-center justify-center rounded-full bg-[var(--mascot-accent)] text-[var(--mascot-accent-foreground)] shadow-lg transition-transform hover:scale-105"
-                (click)="show()"
                 type="button"
                 aria-label="Show mascot"
+                (click)="show()"
             >
                 <svg class="size-5" lucideSparkles aria-hidden="true"></svg>
             </button>
diff --git a/apps/radix-playground/src/app/playground-mascot/playground-mascot-pin.ts b/apps/radix-playground/src/app/playground-mascot/playground-mascot-pin.ts
index 37d4a7236..26a9ca43e 100644
--- a/apps/radix-playground/src/app/playground-mascot/playground-mascot-pin.ts
+++ b/apps/radix-playground/src/app/playground-mascot/playground-mascot-pin.ts
@@ -1,5 +1,5 @@
-import { ChangeDetectionStrategy, Component, input } from '@angular/core';
 import type { PinGeometry } from './playground-mascot-data';
+import { ChangeDetectionStrategy, Component, input } from '@angular/core';
 
 @Component({
     selector: 'app-playground-mascot-pin',
diff --git a/apps/radix-playground/src/app/playground-shell.ts b/apps/radix-playground/src/app/playground-shell.ts
index a95269f86..6f5029fa1 100644
--- a/apps/radix-playground/src/app/playground-shell.ts
+++ b/apps/radix-playground/src/app/playground-shell.ts
@@ -1,9 +1,9 @@
-import { ChangeDetectionStrategy, Component, inject } from '@angular/core';
-import { RouterLink, RouterLinkActive, RouterOutlet } from '@angular/router';
-import { LucideMoon, LucideSun } from '@lucide/angular';
 import { PlaygroundMascot } from './playground-mascot';
 import { PRIMITIVES } from './shared/primitives';
 import { ThemeStore } from './shared/theme';
+import { ChangeDetectionStrategy, Component, inject } from '@angular/core';
+import { RouterLink, RouterLinkActive, RouterOutlet } from '@angular/router';
+import { LucideMoon, LucideSun } from '@lucide/angular';
 
 @Component({
     selector: 'app-playground-shell',
@@ -22,9 +22,9 @@ import { ThemeStore } from './shared/theme';
                     </a>
                     <button
                         class="border-border text-muted-foreground hover:bg-muted inline-flex size-8 items-center justify-center rounded-md border text-xs"
+                        type="button"
                         [attr.aria-label]="'Switch to ' + (theme.theme() === 'light' ? 'dark' : 'light') + ' theme'"
                         (click)="theme.toggle()"
-                        type="button"
                     >
                         @if (theme.theme() === 'light') {
                             <svg class="size-4" lucideMoon></svg>
@@ -41,8 +41,8 @@ import { ThemeStore } from './shared/theme';
                     @for (item of primitives; track item.path) {
                         <a
                             class="text-muted-foreground hover:bg-muted hover:text-foreground rounded-md px-2 py-1.5 text-sm no-underline transition-colors"
-                            [routerLink]="['/playground', item.path]"
                             routerLinkActive="bg-muted !text-foreground font-medium"
+                            [routerLink]="['/playground', item.path]"
                         >
                             {{ item.label }}
                         </a>
diff --git a/apps/radix-playground/src/main.ts b/apps/radix-playground/src/main.ts
index 2108cd95d..f3a375457 100644
--- a/apps/radix-playground/src/main.ts
+++ b/apps/radix-playground/src/main.ts
@@ -1,5 +1,5 @@
-import { bootstrapApplication } from '@angular/platform-browser';
 import { App } from './app/app';
 import { appConfig } from './app/app.config';
+import { bootstrapApplication } from '@angular/platform-browser';
 
 bootstrapApplication(App, appConfig).catch((err) => console.error(err));
diff --git a/apps/radix-ssr-testing/src/app/app.config.server.ts b/apps/radix-ssr-testing/src/app/app.config.server.ts
index 4d9ac64f3..ccefd5d17 100644
--- a/apps/radix-ssr-testing/src/app/app.config.server.ts
+++ b/apps/radix-ssr-testing/src/app/app.config.server.ts
@@ -1,7 +1,7 @@
-import { ApplicationConfig, mergeApplicationConfig } from '@angular/core';
-import { provideServerRendering, withRoutes } from '@angular/ssr';
 import { appConfig } from './app.config';
 import { serverRoutes } from './app.routes.server';
+import { ApplicationConfig, mergeApplicationConfig } from '@angular/core';
+import { provideServerRendering, withRoutes } from '@angular/ssr';
 
 const serverConfig: ApplicationConfig = {
     providers: [provideServerRendering(withRoutes(serverRoutes))]
diff --git a/apps/radix-ssr-testing/src/app/app.config.ts b/apps/radix-ssr-testing/src/app/app.config.ts
index 69295f1c9..cfdf74fe8 100644
--- a/apps/radix-ssr-testing/src/app/app.config.ts
+++ b/apps/radix-ssr-testing/src/app/app.config.ts
@@ -1,7 +1,7 @@
+import { appRoutes } from './app.routes';
 import { ApplicationConfig, provideBrowserGlobalErrorListeners, provideZonelessChangeDetection } from '@angular/core';
 import { provideClientHydration, withEventReplay } from '@angular/platform-browser';
 import { provideRouter } from '@angular/router';
-import { appRoutes } from './app.routes';
 
 export const appConfig: ApplicationConfig = {
     providers: [
diff --git a/apps/radix-ssr-testing/src/app/app.routes.ts b/apps/radix-ssr-testing/src/app/app.routes.ts
index fb841c2ec..255f898f5 100644
--- a/apps/radix-ssr-testing/src/app/app.routes.ts
+++ b/apps/radix-ssr-testing/src/app/app.routes.ts
@@ -1,5 +1,5 @@
-import { Route } from '@angular/router';
 import { List } from './pages/list';
+import { Route } from '@angular/router';
 
 export const appRoutes: Route[] = [
     { path: '', redirectTo: 'list', pathMatch: 'full' },
diff --git a/apps/radix-ssr-testing/src/app/components/accordion/page.ts b/apps/radix-ssr-testing/src/app/components/accordion/page.ts
index c308f01eb..a5abc911c 100644
--- a/apps/radix-ssr-testing/src/app/components/accordion/page.ts
+++ b/apps/radix-ssr-testing/src/app/components/accordion/page.ts
@@ -19,7 +19,7 @@ import {
     ],
     template: `
         <div rdxAccordionRoot multiple>
-            <div [value]="'one'" rdxAccordionItem>
+            <div rdxAccordionItem [value]="'one'">
                 <h3 rdxAccordionHeader>
                     <button type="button" rdxAccordionTrigger>One</button>
                 </h3>
@@ -29,7 +29,7 @@ import {
                 </div>
             </div>
 
-            <div [value]="'two'" rdxAccordionItem>
+            <div rdxAccordionItem [value]="'two'">
                 <h3 rdxAccordionHeader>
                     <button type="button" rdxAccordionTrigger>Two</button>
                 </h3>
@@ -39,7 +39,7 @@ import {
                 </div>
             </div>
 
-            <div [value]="'three'" [disabled]="true" rdxAccordionItem>
+            <div rdxAccordionItem [value]="'three'" [disabled]="true">
                 <h3 rdxAccordionHeader>
                     <button type="button" rdxAccordionTrigger>Three</button>
                 </h3>
@@ -49,7 +49,7 @@ import {
                 </div>
             </div>
 
-            <div [value]="'four'" rdxAccordionItem>
+            <div rdxAccordionItem [value]="'four'">
                 <h3 rdxAccordionHeader>
                     <button type="button" rdxAccordionTrigger>Four</button>
                 </h3>
diff --git a/apps/radix-ssr-testing/src/app/components/checkbox/page.ts b/apps/radix-ssr-testing/src/app/components/checkbox/page.ts
index 5a9801432..7428fde3b 100644
--- a/apps/radix-ssr-testing/src/app/components/checkbox/page.ts
+++ b/apps/radix-ssr-testing/src/app/components/checkbox/page.ts
@@ -10,7 +10,7 @@ import {
     changeDetection: ChangeDetectionStrategy.OnPush,
     imports: [RdxCheckboxRootDirective, RdxCheckboxButtonDirective, RdxCheckboxIndicatorDirective],
     template: `
-        <div [checked]="true" rdxCheckboxRoot>
+        <div rdxCheckboxRoot [checked]="true">
             <button rdxCheckboxButton>
                 [
                 <span keepMounted rdxCheckboxIndicator>✔</span>
diff --git a/apps/radix-ssr-testing/src/app/components/collapsible/page.ts b/apps/radix-ssr-testing/src/app/components/collapsible/page.ts
index 546d26c6d..06c6a18cd 100644
--- a/apps/radix-ssr-testing/src/app/components/collapsible/page.ts
+++ b/apps/radix-ssr-testing/src/app/components/collapsible/page.ts
@@ -10,7 +10,7 @@ import {
     changeDetection: ChangeDetectionStrategy.OnPush,
     imports: [RdxCollapsibleRootDirective, RdxCollapsibleTriggerDirective, RdxCollapsiblePanelDirective],
     template: `
-        <div [open]="true" rdxCollapsibleRoot>
+        <div rdxCollapsibleRoot [open]="true">
             <button rdxCollapsibleTrigger>Trigger</button>
             <div rdxCollapsiblePanel>Content</div>
         </div>
diff --git a/apps/radix-ssr-testing/src/app/components/combobox/page.ts b/apps/radix-ssr-testing/src/app/components/combobox/page.ts
index d2a3f2062..858b0203d 100644
--- a/apps/radix-ssr-testing/src/app/components/combobox/page.ts
+++ b/apps/radix-ssr-testing/src/app/components/combobox/page.ts
@@ -40,7 +40,7 @@ import {
                 <div rdxComboboxPopup>
                     <div rdxComboboxList aria-label="Fruits">
                         @for (option of options; track option) {
-                            <div [value]="option" rdxComboboxItem>
+                            <div rdxComboboxItem [value]="option">
                                 <span rdxComboboxItemIndicator>✔</span>
                                 {{ option }}
                             </div>
diff --git a/apps/radix-ssr-testing/src/app/components/form/page.ts b/apps/radix-ssr-testing/src/app/components/form/page.ts
index 5fcdbcc26..117eb0445 100644
--- a/apps/radix-ssr-testing/src/app/components/form/page.ts
+++ b/apps/radix-ssr-testing/src/app/components/form/page.ts
@@ -7,7 +7,7 @@ import { RdxFormRoot } from '@radix-ng/primitives/form';
     selector: 'app-form',
     imports: [RdxFormRoot, RdxFieldRoot, RdxFieldLabel, RdxFieldControl, RdxFieldError],
     template: `
-        <form [errors]="{ email: 'Email is already taken' }" rdxFormRoot>
+        <form rdxFormRoot [errors]="{ email: 'Email is already taken' }">
             <div name="email" rdxFieldRoot>
                 <label rdxFieldLabel>Email</label>
                 <input name="email" type="email" rdxFieldControl />
diff --git a/apps/radix-ssr-testing/src/app/components/select/page.ts b/apps/radix-ssr-testing/src/app/components/select/page.ts
index 5be6cc838..07e2da171 100644
--- a/apps/radix-ssr-testing/src/app/components/select/page.ts
+++ b/apps/radix-ssr-testing/src/app/components/select/page.ts
@@ -40,13 +40,13 @@ import {
                 <span aria-hidden="true">▼</span>
             </button>
 
-            <div *rdxSelectPortal [sideOffset]="4" align="start" rdxSelectPositioner>
+            <div *rdxSelectPortal align="start" rdxSelectPositioner [sideOffset]="4">
                 <div rdxSelectPopup>
                     <div rdxSelectList>
                         <div rdxSelectGroupLabel>Fruits</div>
                         <div rdxSelectGroup>
                             @for (option of options; track option) {
-                                <div [value]="option" rdxSelectItem>
+                                <div rdxSelectItem [value]="option">
                                     <span rdxSelectItemIndicator>✔</span>
                                     <span rdxSelectItemText>{{ option }}</span>
                                 </div>
diff --git a/apps/radix-ssr-testing/src/app/components/slider/page.ts b/apps/radix-ssr-testing/src/app/components/slider/page.ts
index f4fd825ef..263969c0b 100644
--- a/apps/radix-ssr-testing/src/app/components/slider/page.ts
+++ b/apps/radix-ssr-testing/src/app/components/slider/page.ts
@@ -49,14 +49,14 @@ import { RdxSliderModule } from '@radix-ng/primitives/slider';
     `,
     encapsulation: ViewEncapsulation.None,
     template: `
-        <div class="SliderRoot" [value]="[10, 50]" [step]="1" rdxSliderRoot>
+        <div class="SliderRoot" rdxSliderRoot [value]="[10, 50]" [step]="1">
             <div class="SliderControl" rdxSliderControl>
                 <div class="SliderTrack" rdxSliderTrack>
                     <div class="SliderIndicator" rdxSliderIndicator></div>
-                    <div class="SliderThumb" [index]="0" rdxSliderThumb>
+                    <div class="SliderThumb" rdxSliderThumb [index]="0">
                         <input rdxSliderThumbInput aria-label="Minimum" />
                     </div>
-                    <div class="SliderThumb" [index]="1" rdxSliderThumb>
+                    <div class="SliderThumb" rdxSliderThumb [index]="1">
                         <input rdxSliderThumbInput aria-label="Maximum" />
                     </div>
                 </div>
diff --git a/apps/radix-ssr-testing/src/app/components/toggle-group/page.ts b/apps/radix-ssr-testing/src/app/components/toggle-group/page.ts
index 0ddac482b..b63fc7b0f 100644
--- a/apps/radix-ssr-testing/src/app/components/toggle-group/page.ts
+++ b/apps/radix-ssr-testing/src/app/components/toggle-group/page.ts
@@ -7,7 +7,7 @@ import { RdxToggleGroup } from '@radix-ng/primitives/toggle-group';
     selector: 'app-toggle-group',
     imports: [RdxToggleGroup, RdxToggle],
     template: `
-        <div [value]="['1']" rdxToggleGroup>
+        <div rdxToggleGroup [value]="['1']">
             <button rdxToggle value="1">Item 1</button>
             <button rdxToggle value="2">Item 2</button>
         </div>
diff --git a/apps/radix-ssr-testing/src/main.server.ts b/apps/radix-ssr-testing/src/main.server.ts
index c4639a189..138b5e64b 100644
--- a/apps/radix-ssr-testing/src/main.server.ts
+++ b/apps/radix-ssr-testing/src/main.server.ts
@@ -1,6 +1,6 @@
-import { bootstrapApplication, BootstrapContext } from '@angular/platform-browser';
 import { App } from './app/app';
 import { config } from './app/app.config.server';
+import { bootstrapApplication, BootstrapContext } from '@angular/platform-browser';
 
 const bootstrap = (context: BootstrapContext) => bootstrapApplication(App, config, context);
 
diff --git a/apps/radix-ssr-testing/src/main.ts b/apps/radix-ssr-testing/src/main.ts
index 2108cd95d..f3a375457 100644
--- a/apps/radix-ssr-testing/src/main.ts
+++ b/apps/radix-ssr-testing/src/main.ts
@@ -1,5 +1,5 @@
-import { bootstrapApplication } from '@angular/platform-browser';
 import { App } from './app/app';
 import { appConfig } from './app/app.config';
+import { bootstrapApplication } from '@angular/platform-browser';
 
 bootstrapApplication(App, appConfig).catch((err) => console.error(err));
diff --git a/apps/radix-ssr-testing/src/ssr-rendering.spec.ts b/apps/radix-ssr-testing/src/ssr-rendering.spec.ts
index 0ba4bd1a1..c6292eccd 100644
--- a/apps/radix-ssr-testing/src/ssr-rendering.spec.ts
+++ b/apps/radix-ssr-testing/src/ssr-rendering.spec.ts
@@ -1,10 +1,6 @@
 // `@angular/platform-server` ships partially-compiled code; load the compiler so JIT is available
 // as a fallback in the test environment (otherwise PlatformLocation fails to compile).
 import '@angular/compiler';
-import { provideZonelessChangeDetection, Type } from '@angular/core';
-import { bootstrapApplication, BootstrapContext, provideClientHydration } from '@angular/platform-browser';
-import { provideServerRendering, renderApplication } from '@angular/platform-server';
-import { describe, expect, it } from 'vitest';
 import AccordionPage from './app/components/accordion/page';
 import AvatarPage from './app/components/avatar/page';
 import CheckboxPage from './app/components/checkbox/page';
@@ -18,6 +14,10 @@ import SliderPage from './app/components/slider/page';
 import SwitchPage from './app/components/switch/page';
 import TabsPage from './app/components/tabs/page';
 import ToggleGroupPage from './app/components/toggle-group/page';
+import { provideZonelessChangeDetection, Type } from '@angular/core';
+import { bootstrapApplication, BootstrapContext, provideClientHydration } from '@angular/platform-browser';
+import { provideServerRendering, renderApplication } from '@angular/platform-server';
+import { describe, expect, it } from 'vitest';
 
 /**
  * Server-side rendering smoke tests for the primitives.
diff --git a/apps/radix-storybook/.storybook/plugins/compodoc.ts b/apps/radix-storybook/.storybook/plugins/compodoc.ts
index cacc145c6..5c51de5f6 100644
--- a/apps/radix-storybook/.storybook/plugins/compodoc.ts
+++ b/apps/radix-storybook/.storybook/plugins/compodoc.ts
@@ -1,5 +1,5 @@
-import { setCompodocJson } from '@storybook/addon-docs/angular';
 import docJson from '../documentation.json';
+import { setCompodocJson } from '@storybook/addon-docs/angular';
 
 // Inputs inherited from `RdxPopperContentWrapper` (ADR 0012 thin positioners) carry the base-class
 // default expression `this.config.<key> ?? <fallback>`, where `config` is the positioner's own
diff --git a/apps/radix-storybook/.storybook/preview.ts b/apps/radix-storybook/.storybook/preview.ts
index 3d024a254..daf1f05c2 100644
--- a/apps/radix-storybook/.storybook/preview.ts
+++ b/apps/radix-storybook/.storybook/preview.ts
@@ -1,3 +1,7 @@
+import './rdx-directive-highlight.css';
+import { installRdxDirectiveHighlight } from './highlight-rdx-directives';
+import CompodocPlugin from './plugins/compodoc';
+import { light } from './themes';
 import { provideZonelessChangeDetection } from '@angular/core';
 import {
     LucideAlignCenter,
@@ -25,11 +29,6 @@ import {
     provideLucideIcons
 } from '@lucide/angular';
 import { applicationConfig, Preview } from '@storybook/angular';
-import CompodocPlugin from './plugins/compodoc';
-
-import { installRdxDirectiveHighlight } from './highlight-rdx-directives';
-import './rdx-directive-highlight.css';
-import { light } from './themes';
 
 installRdxDirectiveHighlight();
 
diff --git a/docs/spikes/signal-forms-spike.spec.ts b/docs/spikes/signal-forms-spike.spec.ts
index f60563e21..5f0cf6a16 100644
--- a/docs/spikes/signal-forms-spike.spec.ts
+++ b/docs/spikes/signal-forms-spike.spec.ts
@@ -21,17 +21,17 @@
  *      (core scans `directiveStart..directiveEnd`, not just the host component)
  *   3. native form element fallback
  */
+import { RdxInputDirective } from '../src/input.directive';
 import { Component, signal, viewChild } from '@angular/core';
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { form, FormField, required } from '@angular/forms/signals';
 import { RdxSwitchModule } from '@radix-ng/primitives/switch';
-import { RdxInputDirective } from '../src/input.directive';
 
 describe('Signal Forms spike (experimental API, Angular 21)', () => {
     describe('archetype A: native input + rdxInput (custom-control path expected)', () => {
         @Component({
             template: `
-                <input [formField]="loginForm.email" rdxInput />
+                <input rdxInput [formField]="loginForm.email" />
             `,
             imports: [FormField, RdxInputDirective]
         })
@@ -133,7 +133,7 @@ describe('Signal Forms spike (experimental API, Angular 21)', () => {
     describe('archetype B: composite CVA directive — switch (CVA path expected)', () => {
         @Component({
             template: `
-                <button [formField]="settingsForm.enabled" rdxSwitchRoot>
+                <button rdxSwitchRoot [formField]="settingsForm.enabled">
                     <span rdxSwitchThumb></span>
                 </button>
             `,
diff --git a/eslint.config.ts b/eslint.config.ts
index 86eb2c781..5cc5f9ab1 100644
--- a/eslint.config.ts
+++ b/eslint.config.ts
@@ -1,10 +1,13 @@
-import eslintComments from '@eslint-community/eslint-plugin-eslint-comments';
 import { includeIgnoreFile } from '@eslint/compat';
 import js from '@eslint/js';
+import eslintComments from '@eslint-community/eslint-plugin-eslint-comments';
 import angularEslint from 'angular-eslint';
+import { defineConfig } from 'eslint/config';
+import importPlugin from 'eslint-plugin-import';
 import prettierRecommended from 'eslint-plugin-prettier/recommended';
+import simpleImportSortPlugin from 'eslint-plugin-simple-import-sort';
 import storybook from 'eslint-plugin-storybook';
-import { defineConfig } from 'eslint/config';
+import unusedImportsPlugin from 'eslint-plugin-unused-imports';
 import globals from 'globals';
 import { fileURLToPath } from 'node:url';
 import tseslint from 'typescript-eslint';
@@ -23,12 +26,32 @@ export default defineConfig([
             }
         },
         plugins: {
-            '@eslint-community/eslint-comments': eslintComments
+            '@eslint-community/eslint-comments': eslintComments,
+            'simple-import-sort': simpleImportSortPlugin,
+            import: importPlugin,
+            'unused-imports': unusedImportsPlugin
         },
         rules: {
             ...js.configs.recommended.rules,
             ...eslintComments.configs.recommended.rules,
-            '@eslint-community/eslint-comments/no-unused-disable': 'warn'
+
+            // plugin:js
+            'sort-imports': 'off',
+
+            // plugin:eslint-comments
+            '@eslint-community/eslint-comments/no-unused-disable': 'warn',
+
+            // plugin:simple-import-sort
+            'simple-import-sort/imports': ['warn', { groups: [] }],
+            'simple-import-sort/exports': 'warn',
+
+            // plugin:import
+            'import/first': 'warn',
+            'import/newline-after-import': 'warn',
+            'import/no-duplicates': 'warn',
+
+            // plugin:unused-imports
+            'unused-imports/no-unused-imports': 'warn'
         }
     },
     {
@@ -99,7 +122,8 @@ export default defineConfig([
             // plugin:@angular-eslint/template
             '@angular-eslint/template/label-has-associated-control': 'off',
             '@angular-eslint/template/prefer-self-closing-tags': 'warn',
-            '@angular-eslint/template/prefer-control-flow': 'off'
+            '@angular-eslint/template/prefer-control-flow': 'off',
+            '@angular-eslint/template/attributes-order': 'warn'
         }
     },
     ...storybook.configs['flat/recommended'],
diff --git a/package.json b/package.json
index dc7820b7d..882f73ad0 100644
--- a/package.json
+++ b/package.json
@@ -135,8 +135,11 @@
         "esbuild": "^0.19.12",
         "eslint": "^10.4.1",
         "eslint-config-prettier": "^10.1.8",
+        "eslint-plugin-import": "^2.32.0",
         "eslint-plugin-prettier": "^5.5.6",
+        "eslint-plugin-simple-import-sort": "^13.0.0",
         "eslint-plugin-storybook": "10.4.6",
+        "eslint-plugin-unused-imports": "^4.4.1",
         "globals": "^17.4.0",
         "http-server": "^14.1.1",
         "husky": "^9.1.6",
@@ -155,8 +158,6 @@
         "postcss-url": "~10.1.3",
         "prettier": "^3.8.3",
         "prettier-plugin-astro": "^0.14.1",
-        "prettier-plugin-organize-attributes": "^1.0.0",
-        "prettier-plugin-organize-imports": "^4.1.0",
         "prettier-plugin-tailwindcss": "^0.8.0",
         "remark-gfm": "^4.0.1",
         "rimraf": "^6.0.1",
diff --git a/packages/primitives/accordion/__tests__/accordion-animation.spec.ts b/packages/primitives/accordion/__tests__/accordion-animation.spec.ts
index 605bf6000..033a77b08 100644
--- a/packages/primitives/accordion/__tests__/accordion-animation.spec.ts
+++ b/packages/primitives/accordion/__tests__/accordion-animation.spec.ts
@@ -1,15 +1,15 @@
-import { ChangeDetectionStrategy, Component } from '@angular/core';
-import { ComponentFixture, TestBed } from '@angular/core/testing';
-import { By } from '@angular/platform-browser';
 import { RdxAccordionItemDirective } from '../src/accordion-item.directive';
 import { RdxAccordionPanelDirective } from '../src/accordion-panel.directive';
 import { RdxAccordionRootDirective } from '../src/accordion-root.directive';
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { By } from '@angular/platform-browser';
 
 @Component({
     changeDetection: ChangeDetectionStrategy.Eager,
     imports: [RdxAccordionRootDirective, RdxAccordionItemDirective, RdxAccordionPanelDirective],
     template: `
-        <div [defaultValue]="'one'" rdxAccordionRoot>
+        <div rdxAccordionRoot [defaultValue]="'one'">
             <div value="one" rdxAccordionItem>
                 <div rdxAccordionPanel>Content one</div>
             </div>
diff --git a/packages/primitives/accordion/__tests__/accordion-interaction.spec.ts b/packages/primitives/accordion/__tests__/accordion-interaction.spec.ts
index 767d46670..59307d64c 100644
--- a/packages/primitives/accordion/__tests__/accordion-interaction.spec.ts
+++ b/packages/primitives/accordion/__tests__/accordion-interaction.spec.ts
@@ -1,12 +1,12 @@
-import { ChangeDetectionStrategy, Component, signal } from '@angular/core';
-import { ComponentFixture, TestBed } from '@angular/core/testing';
-import { By } from '@angular/platform-browser';
-import { expect, vi } from 'vitest';
 import { RdxAccordionHeaderDirective } from '../src/accordion-header.directive';
 import { RdxAccordionItemDirective } from '../src/accordion-item.directive';
 import { RdxAccordionPanelDirective } from '../src/accordion-panel.directive';
 import { RdxAccordionRootDirective } from '../src/accordion-root.directive';
 import { RdxAccordionTriggerDirective } from '../src/accordion-trigger.directive';
+import { ChangeDetectionStrategy, Component, signal } from '@angular/core';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { By } from '@angular/platform-browser';
+import { expect, vi } from 'vitest';
 
 @Component({
     changeDetection: ChangeDetectionStrategy.Eager,
@@ -18,7 +18,7 @@ import { RdxAccordionTriggerDirective } from '../src/accordion-trigger.directive
         RdxAccordionPanelDirective
     ],
     template: `
-        <div [disabled]="rootDisabled()" (onValueChange)="onValueChange($event)" keepMounted rdxAccordionRoot>
+        <div keepMounted rdxAccordionRoot [disabled]="rootDisabled()" (onValueChange)="onValueChange($event)">
             <div value="one" rdxAccordionItem>
                 <div rdxAccordionHeader>
                     <button id="trigger-one" rdxAccordionTrigger>Trigger one</button>
@@ -106,7 +106,7 @@ describe('RdxAccordion — interaction', () => {
         RdxAccordionPanelDirective
     ],
     template: `
-        <div (onValueChange)="onValueChange($event)" keepMounted rdxAccordionRoot>
+        <div keepMounted rdxAccordionRoot (onValueChange)="onValueChange($event)">
             <div value="one" rdxAccordionItem>
                 <div rdxAccordionHeader><button rdxAccordionTrigger>One</button></div>
                 <div rdxAccordionPanel>One</div>
@@ -156,7 +156,7 @@ describe('RdxAccordion — cancelable onValueChange', () => {
         RdxAccordionPanelDirective
     ],
     template: `
-        <div [disabled]="rootDisabled()" keepMounted rdxAccordionRoot>
+        <div keepMounted rdxAccordionRoot [disabled]="rootDisabled()">
             <div value="one" rdxAccordionItem>
                 <div rdxAccordionHeader><button rdxAccordionTrigger>One</button></div>
                 <div rdxAccordionPanel>Content</div>
@@ -235,7 +235,7 @@ describe('RdxAccordion — disabled propagation', () => {
         RdxAccordionPanelDirective
     ],
     template: `
-        <div [multiple]="multipleEnabled()" keepMounted rdxAccordionRoot>
+        <div keepMounted rdxAccordionRoot [multiple]="multipleEnabled()">
             <div value="one" rdxAccordionItem>
                 <div rdxAccordionHeader><button id="t1" rdxAccordionTrigger>One</button></div>
                 <div rdxAccordionPanel>One</div>
@@ -307,7 +307,7 @@ describe('RdxAccordion — multiple input', () => {
     ],
     template: `
         <div rdxAccordionRoot>
-            <div (onOpenChange)="onChange($event)" value="one" rdxAccordionItem>
+            <div value="one" rdxAccordionItem (onOpenChange)="onChange($event)">
                 <div rdxAccordionHeader><button rdxAccordionTrigger>One</button></div>
                 <div rdxAccordionPanel>One</div>
             </div>
@@ -432,7 +432,7 @@ describe('RdxAccordion — data-index', () => {
         RdxAccordionPanelDirective
     ],
     template: `
-        <div [loopFocus]="loop()" rdxAccordionRoot>
+        <div rdxAccordionRoot [loopFocus]="loop()">
             <div value="one" rdxAccordionItem>
                 <div rdxAccordionHeader><button rdxAccordionTrigger>One</button></div>
                 <div rdxAccordionPanel>One</div>
@@ -502,7 +502,7 @@ describe('RdxAccordion — keyboard focus', () => {
         RdxAccordionPanelDirective
     ],
     template: `
-        <div [keepMounted]="keep()" [hiddenUntilFound]="findable()" rdxAccordionRoot>
+        <div rdxAccordionRoot [keepMounted]="keep()" [hiddenUntilFound]="findable()">
             <div value="one" rdxAccordionItem>
                 <div rdxAccordionHeader><button rdxAccordionTrigger>One</button></div>
                 <div rdxAccordionPanel>Content one</div>
@@ -572,7 +572,7 @@ describe('RdxAccordion — mount behavior', () => {
         RdxAccordionPanelDirective
     ],
     template: `
-        <div [defaultValue]="'one'" (onValueChange)="onValueChange($event)" keepMounted rdxAccordionRoot>
+        <div keepMounted rdxAccordionRoot [defaultValue]="'one'" (onValueChange)="onValueChange($event)">
             <div value="one" rdxAccordionItem>
                 <div rdxAccordionHeader><button id="t1" rdxAccordionTrigger>One</button></div>
                 <div rdxAccordionPanel>One</div>
diff --git a/packages/primitives/accordion/index.ts b/packages/primitives/accordion/index.ts
index 9cd07ac1c..c9ffc12d0 100644
--- a/packages/primitives/accordion/index.ts
+++ b/packages/primitives/accordion/index.ts
@@ -1,9 +1,9 @@
-import { NgModule } from '@angular/core';
 import { RdxAccordionHeaderDirective } from './src/accordion-header.directive';
 import { RdxAccordionItemDirective } from './src/accordion-item.directive';
 import { RdxAccordionPanelDirective } from './src/accordion-panel.directive';
 import { RdxAccordionRootDirective } from './src/accordion-root.directive';
 import { RdxAccordionTriggerDirective } from './src/accordion-trigger.directive';
+import { NgModule } from '@angular/core';
 
 export * from './src/accordion-header.directive';
 export * from './src/accordion-item.directive';
diff --git a/packages/primitives/accordion/src/accordion-header.directive.ts b/packages/primitives/accordion/src/accordion-header.directive.ts
index fc18cdf37..e25d433a9 100644
--- a/packages/primitives/accordion/src/accordion-header.directive.ts
+++ b/packages/primitives/accordion/src/accordion-header.directive.ts
@@ -1,5 +1,5 @@
-import { Directive } from '@angular/core';
 import { injectAccordionItemContext } from './accordion-item.directive';
+import { Directive } from '@angular/core';
 
 @Directive({
     selector: '[rdxAccordionHeader]',
diff --git a/packages/primitives/accordion/src/accordion-item.directive.ts b/packages/primitives/accordion/src/accordion-item.directive.ts
index bc32e874a..cb5c09810 100644
--- a/packages/primitives/accordion/src/accordion-item.directive.ts
+++ b/packages/primitives/accordion/src/accordion-item.directive.ts
@@ -1,3 +1,4 @@
+import { injectAccordionRootContext, RdxAccordionValueChangeEventDetails } from './accordion-root.directive';
 import {
     booleanAttribute,
     computed,
@@ -7,14 +8,13 @@ import {
     inject,
     input,
     output,
-    signal,
     Signal,
+    signal,
     WritableSignal
 } from '@angular/core';
 import { injectCollapsibleRootContext, RdxCollapsibleRootDirective } from '@radix-ng/primitives/collapsible';
 import { RdxCompositeListItem } from '@radix-ng/primitives/composite';
 import { BooleanInput, createCancelableChangeEventDetails, createContext } from '@radix-ng/primitives/core';
-import { injectAccordionRootContext, RdxAccordionValueChangeEventDetails } from './accordion-root.directive';
 
 /** Payload of {@link RdxAccordionItemDirective.onOpenChange}, mirroring Base UI's `(open, eventDetails)`. */
 export interface RdxAccordionItemOpenChangeEvent {
diff --git a/packages/primitives/accordion/src/accordion-panel.directive.ts b/packages/primitives/accordion/src/accordion-panel.directive.ts
index 19fdee0f0..2830bc47c 100644
--- a/packages/primitives/accordion/src/accordion-panel.directive.ts
+++ b/packages/primitives/accordion/src/accordion-panel.directive.ts
@@ -1,7 +1,7 @@
-import { Directive } from '@angular/core';
-import { RdxCollapsiblePanelDirective } from '@radix-ng/primitives/collapsible';
 import { injectAccordionItemContext } from './accordion-item.directive';
 import { injectAccordionRootContext } from './accordion-root.directive';
+import { Directive } from '@angular/core';
+import { RdxCollapsiblePanelDirective } from '@radix-ng/primitives/collapsible';
 
 @Directive({
     selector: '[rdxAccordionPanel]',
diff --git a/packages/primitives/accordion/src/accordion-trigger.directive.ts b/packages/primitives/accordion/src/accordion-trigger.directive.ts
index 5a00ea16a..5ef414093 100644
--- a/packages/primitives/accordion/src/accordion-trigger.directive.ts
+++ b/packages/primitives/accordion/src/accordion-trigger.directive.ts
@@ -1,8 +1,8 @@
+import { injectAccordionItemContext } from './accordion-item.directive';
+import { injectAccordionRootContext } from './accordion-root.directive';
 import { Directive } from '@angular/core';
 import { injectCollapsibleRootContext } from '@radix-ng/primitives/collapsible';
 import { injectId } from '@radix-ng/primitives/core';
-import { injectAccordionItemContext } from './accordion-item.directive';
-import { injectAccordionRootContext } from './accordion-root.directive';
 
 @Directive({
     selector: '[rdxAccordionTrigger]',
diff --git a/packages/primitives/accordion/stories/accordion-collapsible-array.ts b/packages/primitives/accordion/stories/accordion-collapsible-array.ts
index 5d7b0a634..3a8b25c2c 100644
--- a/packages/primitives/accordion/stories/accordion-collapsible-array.ts
+++ b/packages/primitives/accordion/stories/accordion-collapsible-array.ts
@@ -1,3 +1,4 @@
+import { cn, demoAccordion } from '../../storybook/styles';
 import { ChangeDetectionStrategy, Component } from '@angular/core';
 import {
     RdxAccordionHeaderDirective,
@@ -6,7 +7,6 @@ import {
     RdxAccordionRootDirective,
     RdxAccordionTriggerDirective
 } from '@radix-ng/primitives/accordion';
-import { cn, demoAccordion } from '../../storybook/styles';
 
 @Component({
     selector: 'accordion-collapsible-array-example',
@@ -19,13 +19,13 @@ import { cn, demoAccordion } from '../../storybook/styles';
     ],
     changeDetection: ChangeDetectionStrategy.OnPush,
     template: `
-        <div [class]="cn(a.root, 'w-[300px]')" [defaultValue]="'item-1'" rdxAccordionRoot>
+        <div rdxAccordionRoot [class]="cn(a.root, 'w-[300px]')" [defaultValue]="'item-1'">
             @for (item of items; track item.id) {
-                <div [class]="a.item" [value]="item.id" rdxAccordionItem>
-                    <h3 [class]="a.header" rdxAccordionHeader>
-                        <button [class]="a.trigger" type="button" rdxAccordionTrigger>{{ item.title }}</button>
+                <div rdxAccordionItem [class]="a.item" [value]="item.id">
+                    <h3 rdxAccordionHeader [class]="a.header">
+                        <button type="button" rdxAccordionTrigger [class]="a.trigger">{{ item.title }}</button>
                     </h3>
-                    <div [class]="a.content" rdxAccordionPanel>
+                    <div rdxAccordionPanel [class]="a.content">
                         <div [class]="a.contentText">{{ item.content }}</div>
                     </div>
                 </div>
diff --git a/packages/primitives/accordion/stories/accordion-collapsible.ts b/packages/primitives/accordion/stories/accordion-collapsible.ts
index 5f985d548..516da8e78 100644
--- a/packages/primitives/accordion/stories/accordion-collapsible.ts
+++ b/packages/primitives/accordion/stories/accordion-collapsible.ts
@@ -1,3 +1,4 @@
+import { cn, demoAccordion } from '../../storybook/styles';
 import { ChangeDetectionStrategy, Component } from '@angular/core';
 import {
     RdxAccordionHeaderDirective,
@@ -6,7 +7,6 @@ import {
     RdxAccordionRootDirective,
     RdxAccordionTriggerDirective
 } from '@radix-ng/primitives/accordion';
-import { cn, demoAccordion } from '../../storybook/styles';
 
 @Component({
     changeDetection: ChangeDetectionStrategy.Eager,
@@ -19,32 +19,32 @@ import { cn, demoAccordion } from '../../storybook/styles';
         RdxAccordionPanelDirective
     ],
     template: `
-        <div [class]="cn(a.root, 'w-[300px]')" [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-[300px]')" [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>
diff --git a/packages/primitives/accordion/stories/accordion-disabled.ts b/packages/primitives/accordion/stories/accordion-disabled.ts
index bd3102f67..e6ff1fdf9 100644
--- a/packages/primitives/accordion/stories/accordion-disabled.ts
+++ b/packages/primitives/accordion/stories/accordion-disabled.ts
@@ -1,3 +1,4 @@
+import { cn, demoAccordion } from '../../storybook/styles';
 import { ChangeDetectionStrategy, Component } from '@angular/core';
 import {
     RdxAccordionHeaderDirective,
@@ -6,7 +7,6 @@ import {
     RdxAccordionRootDirective,
     RdxAccordionTriggerDirective
 } from '@radix-ng/primitives/accordion';
-import { cn, demoAccordion } from '../../storybook/styles';
 
 @Component({
     changeDetection: ChangeDetectionStrategy.Eager,
@@ -19,32 +19,32 @@ import { cn, demoAccordion } from '../../storybook/styles';
         RdxAccordionPanelDirective
     ],
     template: `
-        <div [class]="cn(a.root, 'w-[300px]')" [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-[300px]')" [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'" disabled rdxAccordionItem>
-                <h3 [class]="a.header" rdxAccordionHeader>
-                    <button [class]="a.trigger" type="button" rdxAccordionTrigger>Is it unstyled?</button>
+            <div disabled 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>
diff --git a/packages/primitives/accordion/stories/accordion-events.ts b/packages/primitives/accordion/stories/accordion-events.ts
index 7725d7ba9..ffe729ee1 100644
--- a/packages/primitives/accordion/stories/accordion-events.ts
+++ b/packages/primitives/accordion/stories/accordion-events.ts
@@ -1,3 +1,4 @@
+import { cn, demoAccordion } from '../../storybook/styles';
 import { ChangeDetectionStrategy, Component, signal } from '@angular/core';
 import {
     RdxAccordionHeaderDirective,
@@ -6,7 +7,6 @@ import {
     RdxAccordionRootDirective,
     RdxAccordionTriggerDirective
 } from '@radix-ng/primitives/accordion';
-import { cn, demoAccordion } from '../../storybook/styles';
 
 @Component({
     changeDetection: ChangeDetectionStrategy.Eager,
@@ -20,21 +20,21 @@ import { cn, demoAccordion } from '../../storybook/styles';
     ],
     template: `
         <div class="flex w-[300px] flex-col gap-3">
-            <div [class]="a.root" [defaultValue]="'item-1'" rdxAccordionRoot>
-                <div [class]="a.item" [value]="'item-1'" (onOpenChange)="log('Accessibility', $event)" rdxAccordionItem>
-                    <h3 [class]="a.header" rdxAccordionHeader>
-                        <button [class]="a.trigger" type="button" rdxAccordionTrigger>Is it accessible?</button>
+            <div rdxAccordionRoot [class]="a.root" [defaultValue]="'item-1'">
+                <div rdxAccordionItem [class]="a.item" [value]="'item-1'" (onOpenChange)="log('Accessibility', $event)">
+                    <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'" (onOpenChange)="log('Styling', $event)" 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'" (onOpenChange)="log('Styling', $event)">
+                    <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.</div>
                     </div>
                 </div>
diff --git a/packages/primitives/accordion/stories/accordion-horizontal.ts b/packages/primitives/accordion/stories/accordion-horizontal.ts
index 29d7d2233..f5013b3a5 100644
--- a/packages/primitives/accordion/stories/accordion-horizontal.ts
+++ b/packages/primitives/accordion/stories/accordion-horizontal.ts
@@ -1,3 +1,4 @@
+import { cn, demoAccordion } from '../../storybook/styles';
 import { ChangeDetectionStrategy, Component } from '@angular/core';
 import {
     RdxAccordionHeaderDirective,
@@ -6,7 +7,6 @@ import {
     RdxAccordionRootDirective,
     RdxAccordionTriggerDirective
 } from '@radix-ng/primitives/accordion';
-import { cn, demoAccordion } from '../../storybook/styles';
 
 @Component({
     changeDetection: ChangeDetectionStrategy.Eager,
@@ -20,42 +20,42 @@ import { cn, demoAccordion } from '../../storybook/styles';
     ],
     template: `
         <div
+            rdxAccordionRoot
             [class]="cn(a.root, 'flex h-[300px] flex-row')"
             [defaultValue]="'item-1'"
             [orientation]="'horizontal'"
-            rdxAccordionRoot
         >
-            <div [class]="cn(a.item, a.itemH)" [value]="'item-1'" rdxAccordionItem>
-                <div [class]="a.header" rdxAccordionHeader>
-                    <button [class]="cn(a.trigger, a.triggerH)" type="button" rdxAccordionTrigger>
+            <div rdxAccordionItem [class]="cn(a.item, a.itemH)" [value]="'item-1'">
+                <div rdxAccordionHeader [class]="a.header">
+                    <button type="button" rdxAccordionTrigger [class]="cn(a.trigger, a.triggerH)">
                         Is it accessible?
                     </button>
                 </div>
-                <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]="cn(a.item, a.itemH)" [value]="'item-2'" [disabled]="true" rdxAccordionItem>
-                <div [class]="a.header" rdxAccordionHeader>
-                    <button [class]="cn(a.trigger, a.triggerH)" type="button" rdxAccordionTrigger>
+            <div rdxAccordionItem [class]="cn(a.item, a.itemH)" [value]="'item-2'" [disabled]="true">
+                <div rdxAccordionHeader [class]="a.header">
+                    <button type="button" rdxAccordionTrigger [class]="cn(a.trigger, a.triggerH)">
                         Is it unstyled?
                     </button>
                 </div>
-                <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]="cn(a.item, a.itemH)" [value]="'item-3'" rdxAccordionItem>
-                <div [class]="a.header" rdxAccordionHeader>
-                    <button [class]="cn(a.trigger, a.triggerH)" type="button" rdxAccordionTrigger>
+            <div rdxAccordionItem [class]="cn(a.item, a.itemH)" [value]="'item-3'">
+                <div rdxAccordionHeader [class]="a.header">
+                    <button type="button" rdxAccordionTrigger [class]="cn(a.trigger, a.triggerH)">
                         Can it be animated?
                     </button>
                 </div>
-                <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>
diff --git a/packages/primitives/accordion/stories/accordion-keep-mounted.ts b/packages/primitives/accordion/stories/accordion-keep-mounted.ts
index c3f2d7d41..444db39f4 100644
--- a/packages/primitives/accordion/stories/accordion-keep-mounted.ts
+++ b/packages/primitives/accordion/stories/accordion-keep-mounted.ts
@@ -1,3 +1,4 @@
+import { cn, demoAccordion, demoInput } from '../../storybook/styles';
 import { ChangeDetectionStrategy, Component } from '@angular/core';
 import { FormsModule } from '@angular/forms';
 import {
@@ -7,7 +8,6 @@ import {
     RdxAccordionRootDirective,
     RdxAccordionTriggerDirective
 } from '@radix-ng/primitives/accordion';
-import { cn, demoAccordion, demoInput } from '../../storybook/styles';
 
 /**
  * With `keepMounted`, collapsed panels keep their element in the DOM while hidden.
@@ -25,23 +25,23 @@ import { cn, demoAccordion, demoInput } from '../../storybook/styles';
         RdxAccordionPanelDirective
     ],
     template: `
-        <div [class]="cn(a.root, 'w-[300px]')" [defaultValue]="'item-1'" keepMounted rdxAccordionRoot>
-            <div [class]="a.item" [value]="'item-1'" rdxAccordionItem>
-                <h3 [class]="a.header" rdxAccordionHeader>
-                    <button [class]="a.trigger" type="button" rdxAccordionTrigger>Shipping address</button>
+        <div keepMounted rdxAccordionRoot [class]="cn(a.root, 'w-[300px]')" [defaultValue]="'item-1'">
+            <div rdxAccordionItem [class]="a.item" [value]="'item-1'">
+                <h3 rdxAccordionHeader [class]="a.header">
+                    <button type="button" rdxAccordionTrigger [class]="a.trigger">Shipping address</button>
                 </h3>
-                <div [class]="a.content" rdxAccordionPanel>
+                <div rdxAccordionPanel [class]="a.content">
                     <div [class]="a.contentText">
-                        <input [(ngModel)]="address" [class]="input" placeholder="Type, then collapse & reopen" />
+                        <input placeholder="Type, then collapse & reopen" [class]="input" [(ngModel)]="address" />
                     </div>
                 </div>
             </div>
 
-            <div [class]="a.item" [value]="'item-2'" rdxAccordionItem>
-                <h3 [class]="a.header" rdxAccordionHeader>
-                    <button [class]="a.trigger" type="button" rdxAccordionTrigger>Billing address</button>
+            <div rdxAccordionItem [class]="a.item" [value]="'item-2'">
+                <h3 rdxAccordionHeader [class]="a.header">
+                    <button type="button" rdxAccordionTrigger [class]="a.trigger">Billing address</button>
                 </h3>
-                <div [class]="a.content" rdxAccordionPanel>
+                <div rdxAccordionPanel [class]="a.content">
                     <div [class]="a.contentText">Same as shipping.</div>
                 </div>
             </div>
diff --git a/packages/primitives/accordion/stories/accordion-multiple.ts b/packages/primitives/accordion/stories/accordion-multiple.ts
index 1efb980fd..8f0887974 100644
--- a/packages/primitives/accordion/stories/accordion-multiple.ts
+++ b/packages/primitives/accordion/stories/accordion-multiple.ts
@@ -1,3 +1,4 @@
+import { cn, demoAccordion } from '../../storybook/styles';
 import { ChangeDetectionStrategy, Component } from '@angular/core';
 import {
     RdxAccordionHeaderDirective,
@@ -6,7 +7,6 @@ import {
     RdxAccordionRootDirective,
     RdxAccordionTriggerDirective
 } from '@radix-ng/primitives/accordion';
-import { cn, demoAccordion } from '../../storybook/styles';
 
 @Component({
     changeDetection: ChangeDetectionStrategy.Eager,
@@ -19,32 +19,32 @@ import { cn, demoAccordion } from '../../storybook/styles';
         RdxAccordionPanelDirective
     ],
     template: `
-        <div [class]="cn(a.root, 'w-[300px]')" [value]="['item-2', 'item-3']" multiple 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 multiple rdxAccordionRoot [class]="cn(a.root, 'w-[300px]')" [value]="['item-2', 'item-3']">
+            <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. It's unstyled by default, giving you freedom over the look and feel.
                     </div>
diff --git a/packages/primitives/accordion/stories/accordion.stories.ts b/packages/primitives/accordion/stories/accordion.stories.ts
index dee9dd4f0..c3518e2b5 100644
--- a/packages/primitives/accordion/stories/accordion.stories.ts
+++ b/packages/primitives/accordion/stories/accordion.stories.ts
@@ -1,4 +1,3 @@
-import { argsToTemplate, Meta, moduleMetadata, StoryObj } from '@storybook/angular';
 import { cn, demoAccordion } from '../../storybook/styles';
 import { tailwindDemoDecorator } from '../../storybook/tailwind-demo';
 import { RdxAccordionHeaderDirective } from '../src/accordion-header.directive';
@@ -7,20 +6,20 @@ import { RdxAccordionPanelDirective } from '../src/accordion-panel.directive';
 import { RdxAccordionRootDirective } from '../src/accordion-root.directive';
 import { RdxAccordionTriggerDirective } from '../src/accordion-trigger.directive';
 import { AccordionCollapsibleExample } from './accordion-collapsible';
+import collapsibleSource from './accordion-collapsible?raw';
 import { AccordionCollapsibleArrayExample } from './accordion-collapsible-array';
-import { AccordionDisabledExample } from './accordion-disabled';
-import { AccordionEventsExample } from './accordion-events';
-import { AccordionHorizontalExample } from './accordion-horizontal';
-import { AccordionKeepMountedExample } from './accordion-keep-mounted';
-import { AccordionMultipleExample } from './accordion-multiple';
-
 import collapsibleArraySource from './accordion-collapsible-array?raw';
-import collapsibleSource from './accordion-collapsible?raw';
+import { AccordionDisabledExample } from './accordion-disabled';
 import disabledSource from './accordion-disabled?raw';
+import { AccordionEventsExample } from './accordion-events';
 import eventsSource from './accordion-events?raw';
+import { AccordionHorizontalExample } from './accordion-horizontal';
 import horizontalSource from './accordion-horizontal?raw';
+import { AccordionKeepMountedExample } from './accordion-keep-mounted';
 import keepMountedSource from './accordion-keep-mounted?raw';
+import { AccordionMultipleExample } from './accordion-multiple';
 import multipleSource from './accordion-multiple?raw';
+import { argsToTemplate, Meta, moduleMetadata, StoryObj } from '@storybook/angular';
 
 const source = (code: string) => ({
     docs: { source: { code: code.trim(), language: 'typescript', type: 'code' } }
diff --git a/packages/primitives/alert-dialog/__tests__/alert-dialog.spec.ts b/packages/primitives/alert-dialog/__tests__/alert-dialog.spec.ts
index db497576c..3b1ca9a75 100644
--- a/packages/primitives/alert-dialog/__tests__/alert-dialog.spec.ts
+++ b/packages/primitives/alert-dialog/__tests__/alert-dialog.spec.ts
@@ -28,7 +28,7 @@ import { axe } from 'jest-axe';
         RdxAlertDialogClose
     ],
     template: `
-        <div [(open)]="open" (onOpenChange)="changes.push($event.reason)" rdxAlertDialogRoot>
+        <div rdxAlertDialogRoot [(open)]="open" (onOpenChange)="changes.push($event.reason)">
             <button rdxAlertDialogTrigger>Delete</button>
 
             <ng-template rdxAlertDialogPortal>
@@ -51,8 +51,8 @@ class TestHostComponent {
     changeDetection: ChangeDetectionStrategy.Eager,
     imports: [RdxAlertDialogTrigger, RdxAlertDialogRoot, RdxAlertDialogPortal, RdxAlertDialogPopup],
     template: `
-        <button id="detached" [handle]="handle" rdxAlertDialogTrigger>Open</button>
-        <div [handle]="handle" rdxAlertDialogRoot>
+        <button id="detached" rdxAlertDialogTrigger [handle]="handle">Open</button>
+        <div rdxAlertDialogRoot [handle]="handle">
             <ng-template rdxAlertDialogPortal>
                 <div rdxAlertDialogPopup>Popup</div>
             </ng-template>
diff --git a/packages/primitives/alert-dialog/index.ts b/packages/primitives/alert-dialog/index.ts
index c770a1165..147db8273 100644
--- a/packages/primitives/alert-dialog/index.ts
+++ b/packages/primitives/alert-dialog/index.ts
@@ -1,4 +1,3 @@
-import { NgModule } from '@angular/core';
 import { RdxAlertDialogBackdrop } from './src/alert-dialog-backdrop';
 import { RdxAlertDialogClose } from './src/alert-dialog-close';
 import { RdxAlertDialogDescription } from './src/alert-dialog-description';
@@ -8,6 +7,7 @@ import { RdxAlertDialogRoot } from './src/alert-dialog-root';
 import { RdxAlertDialogTitle } from './src/alert-dialog-title';
 import { RdxAlertDialogTrigger } from './src/alert-dialog-trigger';
 import { RdxAlertDialogViewport } from './src/alert-dialog-viewport';
+import { NgModule } from '@angular/core';
 
 export * from './src/alert-dialog-backdrop';
 export * from './src/alert-dialog-close';
diff --git a/packages/primitives/alert-dialog/stories/alert-dialog-close-confirmation.ts b/packages/primitives/alert-dialog/stories/alert-dialog-close-confirmation.ts
index 6a6e1b2af..326f84174 100644
--- a/packages/primitives/alert-dialog/stories/alert-dialog-close-confirmation.ts
+++ b/packages/primitives/alert-dialog/stories/alert-dialog-close-confirmation.ts
@@ -1,8 +1,8 @@
+import { cn, demoButton, demoDialog, demoInput } from '../../storybook/styles';
 import { ChangeDetectionStrategy, Component, signal } from '@angular/core';
 import { FormsModule } from '@angular/forms';
 import { alertDialogImports } from '@radix-ng/primitives/alert-dialog';
 import { dialogImports, RdxDialogOpenChange } from '@radix-ng/primitives/dialog';
-import { cn, demoButton, demoDialog, demoInput } from '../../storybook/styles';
 
 @Component({
     changeDetection: ChangeDetectionStrategy.Eager,
@@ -10,20 +10,20 @@ import { cn, demoButton, demoDialog, demoInput } from '../../storybook/styles';
     imports: [...dialogImports, ...alertDialogImports, FormsModule],
     template: `
         <!-- The editor is a regular Dialog, controlled so a close request can be intercepted. -->
-        <div [(open)]="editorOpen" (onOpenChange)="onEditorOpenChange($event)" rdxDialogRoot>
-            <button [class]="cn(b.base, b.primary, b.size.md)" rdxDialogTrigger>Edit note</button>
+        <div rdxDialogRoot [(open)]="editorOpen" (onOpenChange)="onEditorOpenChange($event)">
+            <button rdxDialogTrigger [class]="cn(b.base, b.primary, b.size.md)">Edit note</button>
 
             <ng-template rdxDialogPortal>
-                <div [class]="cn(d.backdrop, d.backdropAnimated)" rdxDialogBackdrop></div>
-                <div [class]="cn(d.popup, d.popupAnimated)" rdxDialogPopup>
-                    <h2 [class]="d.title" rdxDialogTitle>Edit note</h2>
-                    <p [class]="d.description" rdxDialogDescription>
+                <div rdxDialogBackdrop [class]="cn(d.backdrop, d.backdropAnimated)"></div>
+                <div rdxDialogPopup [class]="cn(d.popup, d.popupAnimated)">
+                    <h2 rdxDialogTitle [class]="d.title">Edit note</h2>
+                    <p rdxDialogDescription [class]="d.description">
                         Closing with unsaved changes asks an alert dialog to confirm.
                     </p>
 
                     <label [class]="d.field">
                         Note
-                        <input [(ngModel)]="text" [class]="input" placeholder="Type to create changes" />
+                        <input placeholder="Type to create changes" [class]="input" [(ngModel)]="text" />
                     </label>
 
                     <div [class]="d.footer">
@@ -35,12 +35,12 @@ import { cn, demoButton, demoDialog, demoInput } from '../../storybook/styles';
         </div>
 
         <!-- The confirmation is an Alert Dialog (assertive, not outside-dismissable). -->
-        <div [(open)]="confirmOpen" rdxAlertDialogRoot>
+        <div rdxAlertDialogRoot [(open)]="confirmOpen">
             <ng-template rdxAlertDialogPortal>
-                <div [class]="cn(d.backdrop, d.backdropAnimated)" rdxAlertDialogBackdrop></div>
-                <div [class]="cn(d.popup, d.popupAnimated)" rdxAlertDialogPopup>
-                    <h2 [class]="d.title" rdxAlertDialogTitle>Discard changes?</h2>
-                    <p [class]="d.description" rdxAlertDialogDescription>Your unsaved note will be lost.</p>
+                <div rdxAlertDialogBackdrop [class]="cn(d.backdrop, d.backdropAnimated)"></div>
+                <div rdxAlertDialogPopup [class]="cn(d.popup, d.popupAnimated)">
+                    <h2 rdxAlertDialogTitle [class]="d.title">Discard changes?</h2>
+                    <p rdxAlertDialogDescription [class]="d.description">Your unsaved note will be lost.</p>
                     <div [class]="d.footer">
                         <button [class]="cn(b.base, b.outline, b.size.sm)" (click)="confirmOpen.set(false)">
                             Keep editing
diff --git a/packages/primitives/alert-dialog/stories/alert-dialog-controlled-multiple.ts b/packages/primitives/alert-dialog/stories/alert-dialog-controlled-multiple.ts
index 7f066b6ed..366884e09 100644
--- a/packages/primitives/alert-dialog/stories/alert-dialog-controlled-multiple.ts
+++ b/packages/primitives/alert-dialog/stories/alert-dialog-controlled-multiple.ts
@@ -1,6 +1,6 @@
+import { cn, demoButton, demoDialog } from '../../storybook/styles';
 import { ChangeDetectionStrategy, Component, signal } from '@angular/core';
 import { alertDialogImports } from '@radix-ng/primitives/alert-dialog';
-import { cn, demoButton, demoDialog } from '../../storybook/styles';
 
 @Component({
     changeDetection: ChangeDetectionStrategy.Eager,
@@ -10,23 +10,23 @@ import { cn, demoButton, demoDialog } from '../../storybook/styles';
         <div class="flex flex-col items-center gap-3">
             <p class="text-muted-foreground text-xs">open: {{ open() }} · triggerId: {{ triggerId() ?? '—' }}</p>
 
-            <div [(open)]="open" [(triggerId)]="triggerId" rdxAlertDialogRoot>
+            <div rdxAlertDialogRoot [(open)]="open" [(triggerId)]="triggerId">
                 <div class="flex gap-2">
-                    <button id="logout" [class]="cn(b.base, b.outline, b.size.md)" rdxAlertDialogTrigger>
+                    <button id="logout" rdxAlertDialogTrigger [class]="cn(b.base, b.outline, b.size.md)">
                         Log out
                     </button>
-                    <button id="delete" [class]="cn(b.base, b.outline, b.size.md)" rdxAlertDialogTrigger>
+                    <button id="delete" rdxAlertDialogTrigger [class]="cn(b.base, b.outline, b.size.md)">
                         Delete account
                     </button>
                 </div>
 
                 <ng-template rdxAlertDialogPortal>
-                    <div [class]="cn(d.backdrop, d.backdropAnimated)" rdxAlertDialogBackdrop></div>
-                    <div [class]="cn(d.popup, d.popupAnimated)" rdxAlertDialogPopup>
-                        <h2 [class]="d.title" rdxAlertDialogTitle>
+                    <div rdxAlertDialogBackdrop [class]="cn(d.backdrop, d.backdropAnimated)"></div>
+                    <div rdxAlertDialogPopup [class]="cn(d.popup, d.popupAnimated)">
+                        <h2 rdxAlertDialogTitle [class]="d.title">
                             {{ triggerId() === 'delete' ? 'Delete account?' : 'Log out?' }}
                         </h2>
-                        <p [class]="d.description" rdxAlertDialogDescription>
+                        <p rdxAlertDialogDescription [class]="d.description">
                             Both
                             <code>open</code>
                             and
@@ -34,10 +34,10 @@ import { cn, demoButton, demoDialog } from '../../storybook/styles';
                             are bound, so the active action is driven from component state.
                         </p>
                         <div [class]="d.footer">
-                            <button [class]="cn(b.base, b.outline, b.size.sm)" rdxAlertDialogClose>Cancel</button>
+                            <button rdxAlertDialogClose [class]="cn(b.base, b.outline, b.size.sm)">Cancel</button>
                             <button
-                                [class]="cn(b.base, triggerId() === 'delete' ? b.destructive : b.primary, b.size.sm)"
                                 rdxAlertDialogClose
+                                [class]="cn(b.base, triggerId() === 'delete' ? b.destructive : b.primary, b.size.sm)"
                             >
                                 {{ triggerId() === 'delete' ? 'Delete' : 'Log out' }}
                             </button>
diff --git a/packages/primitives/alert-dialog/stories/alert-dialog-controlled.ts b/packages/primitives/alert-dialog/stories/alert-dialog-controlled.ts
index 9bb8673be..43705f302 100644
--- a/packages/primitives/alert-dialog/stories/alert-dialog-controlled.ts
+++ b/packages/primitives/alert-dialog/stories/alert-dialog-controlled.ts
@@ -1,6 +1,6 @@
+import { cn, demoButton, demoDialog } from '../../storybook/styles';
 import { ChangeDetectionStrategy, Component, signal } from '@angular/core';
 import { alertDialogImports } from '@radix-ng/primitives/alert-dialog';
-import { cn, demoButton, demoDialog } from '../../storybook/styles';
 
 @Component({
     changeDetection: ChangeDetectionStrategy.Eager,
@@ -12,15 +12,15 @@ import { cn, demoButton, demoDialog } from '../../storybook/styles';
 
             <button [class]="cn(b.base, b.outline, b.size.sm)" (click)="open.set(true)">Open from outside</button>
 
-            <div [(open)]="open" rdxAlertDialogRoot>
-                <button [class]="cn(b.base, b.destructive, b.size.md)" rdxAlertDialogTrigger>Discard changes</button>
+            <div rdxAlertDialogRoot [(open)]="open">
+                <button rdxAlertDialogTrigger [class]="cn(b.base, b.destructive, b.size.md)">Discard changes</button>
 
                 <ng-template rdxAlertDialogPortal>
-                    <div [class]="cn(d.backdrop, d.backdropAnimated)" rdxAlertDialogBackdrop></div>
+                    <div rdxAlertDialogBackdrop [class]="cn(d.backdrop, d.backdropAnimated)"></div>
 
-                    <div [class]="cn(d.popup, d.popupAnimated)" rdxAlertDialogPopup>
-                        <h2 [class]="d.title" rdxAlertDialogTitle>Discard unsaved changes?</h2>
-                        <p [class]="d.description" rdxAlertDialogDescription>
+                    <div rdxAlertDialogPopup [class]="cn(d.popup, d.popupAnimated)">
+                        <h2 rdxAlertDialogTitle [class]="d.title">Discard unsaved changes?</h2>
+                        <p rdxAlertDialogDescription [class]="d.description">
                             The open state is owned by the component and bound with
                             <code>[(open)]</code>
                             .
diff --git a/packages/primitives/alert-dialog/stories/alert-dialog-default.ts b/packages/primitives/alert-dialog/stories/alert-dialog-default.ts
index 2d8fe8fa5..e82f6e4cf 100644
--- a/packages/primitives/alert-dialog/stories/alert-dialog-default.ts
+++ b/packages/primitives/alert-dialog/stories/alert-dialog-default.ts
@@ -1,6 +1,6 @@
+import { cn, demoButton, demoDialog } from '../../storybook/styles';
 import { ChangeDetectionStrategy, Component } from '@angular/core';
 import { alertDialogImports } from '@radix-ng/primitives/alert-dialog';
-import { cn, demoButton, demoDialog } from '../../storybook/styles';
 
 @Component({
     changeDetection: ChangeDetectionStrategy.Eager,
@@ -8,21 +8,21 @@ import { cn, demoButton, demoDialog } from '../../storybook/styles';
     imports: [...alertDialogImports],
     template: `
         <div rdxAlertDialogRoot>
-            <button [class]="cn(b.base, b.destructive, b.size.md)" rdxAlertDialogTrigger>Delete account</button>
+            <button rdxAlertDialogTrigger [class]="cn(b.base, b.destructive, b.size.md)">Delete account</button>
 
             <ng-template rdxAlertDialogPortal>
-                <div [class]="cn(d.backdrop, d.backdropAnimated)" rdxAlertDialogBackdrop></div>
+                <div rdxAlertDialogBackdrop [class]="cn(d.backdrop, d.backdropAnimated)"></div>
 
-                <div [class]="cn(d.popup, d.popupAnimated)" rdxAlertDialogPopup>
-                    <h2 [class]="d.title" rdxAlertDialogTitle>Are you absolutely sure?</h2>
-                    <p [class]="d.description" rdxAlertDialogDescription>
+                <div rdxAlertDialogPopup [class]="cn(d.popup, d.popupAnimated)">
+                    <h2 rdxAlertDialogTitle [class]="d.title">Are you absolutely sure?</h2>
+                    <p rdxAlertDialogDescription [class]="d.description">
                         This action cannot be undone. This will permanently delete your account and remove your data
                         from our servers.
                     </p>
 
                     <div [class]="d.footer">
-                        <button [class]="cn(b.base, b.outline, b.size.sm)" rdxAlertDialogClose>Cancel</button>
-                        <button [class]="cn(b.base, b.destructive, b.size.sm)" rdxAlertDialogClose>
+                        <button rdxAlertDialogClose [class]="cn(b.base, b.outline, b.size.sm)">Cancel</button>
+                        <button rdxAlertDialogClose [class]="cn(b.base, b.destructive, b.size.sm)">
                             Yes, delete account
                         </button>
                     </div>
diff --git a/packages/primitives/alert-dialog/stories/alert-dialog-detached.ts b/packages/primitives/alert-dialog/stories/alert-dialog-detached.ts
index 8f4f26c1e..e0d67101a 100644
--- a/packages/primitives/alert-dialog/stories/alert-dialog-detached.ts
+++ b/packages/primitives/alert-dialog/stories/alert-dialog-detached.ts
@@ -1,6 +1,6 @@
+import { cn, demoButton, demoDialog } from '../../storybook/styles';
 import { ChangeDetectionStrategy, Component } from '@angular/core';
 import { alertDialogImports, createRdxAlertDialogHandle } from '@radix-ng/primitives/alert-dialog';
-import { cn, demoButton, demoDialog } from '../../storybook/styles';
 
 @Component({
     changeDetection: ChangeDetectionStrategy.Eager,
@@ -9,7 +9,7 @@ import { cn, demoButton, demoDialog } from '../../storybook/styles';
     template: `
         <div class="flex flex-col items-center gap-3">
             <!-- Triggers live outside the root and are linked through a shared handle. -->
-            <button id="delete" [class]="cn(b.base, b.destructive, b.size.md)" [handle]="handle" rdxAlertDialogTrigger>
+            <button id="delete" rdxAlertDialogTrigger [class]="cn(b.base, b.destructive, b.size.md)" [handle]="handle">
                 Delete file
             </button>
 
@@ -17,19 +17,19 @@ import { cn, demoButton, demoDialog } from '../../storybook/styles';
                 Open imperatively
             </button>
 
-            <div [handle]="handle" rdxAlertDialogRoot>
+            <div rdxAlertDialogRoot [handle]="handle">
                 <ng-template rdxAlertDialogPortal>
-                    <div [class]="cn(d.backdrop, d.backdropAnimated)" rdxAlertDialogBackdrop></div>
-                    <div [class]="cn(d.popup, d.popupAnimated)" rdxAlertDialogPopup>
-                        <h2 [class]="d.title" rdxAlertDialogTitle>Delete this file?</h2>
-                        <p [class]="d.description" rdxAlertDialogDescription>
+                    <div rdxAlertDialogBackdrop [class]="cn(d.backdrop, d.backdropAnimated)"></div>
+                    <div rdxAlertDialogPopup [class]="cn(d.popup, d.popupAnimated)">
+                        <h2 rdxAlertDialogTitle [class]="d.title">Delete this file?</h2>
+                        <p rdxAlertDialogDescription [class]="d.description">
                             The trigger and this alert dialog are connected with
                             <code>createRdxAlertDialogHandle()</code>
                             .
                         </p>
                         <div [class]="d.footer">
-                            <button [class]="cn(b.base, b.outline, b.size.sm)" rdxAlertDialogClose>Cancel</button>
-                            <button [class]="cn(b.base, b.destructive, b.size.sm)" rdxAlertDialogClose>Delete</button>
+                            <button rdxAlertDialogClose [class]="cn(b.base, b.outline, b.size.sm)">Cancel</button>
+                            <button rdxAlertDialogClose [class]="cn(b.base, b.destructive, b.size.sm)">Delete</button>
                         </div>
                     </div>
                 </ng-template>
diff --git a/packages/primitives/alert-dialog/stories/alert-dialog-from-menu.ts b/packages/primitives/alert-dialog/stories/alert-dialog-from-menu.ts
index 124af23fd..7f86010b3 100644
--- a/packages/primitives/alert-dialog/stories/alert-dialog-from-menu.ts
+++ b/packages/primitives/alert-dialog/stories/alert-dialog-from-menu.ts
@@ -1,7 +1,7 @@
+import { cn, demoButton, demoDialog, demoMenu } from '../../storybook/styles';
 import { ChangeDetectionStrategy, Component, signal } from '@angular/core';
 import { alertDialogImports } from '@radix-ng/primitives/alert-dialog';
 import { RdxMenuModule } from '@radix-ng/primitives/menu';
-import { cn, demoButton, demoDialog, demoMenu } from '../../storybook/styles';
 
 @Component({
     changeDetection: ChangeDetectionStrategy.Eager,
@@ -9,32 +9,32 @@ import { cn, demoButton, demoDialog, demoMenu } from '../../storybook/styles';
     imports: [...alertDialogImports, RdxMenuModule],
     template: `
         <ng-container #menu="rdxMenuRoot" rdxMenuRoot>
-            <button [class]="cn(b.base, b.outline, b.size.md)" rdxMenuTrigger>Project</button>
+            <button rdxMenuTrigger [class]="cn(b.base, b.outline, b.size.md)">Project</button>
 
             @if (menu.open()) {
-                <div [class]="m.positioner" sideOffset="4" rdxMenuPositioner>
-                    <div [class]="m.popup" rdxMenuPopup>
-                        <button [class]="m.item" rdxMenuItem>Rename</button>
-                        <button [class]="m.item" rdxMenuItem>Duplicate</button>
-                        <div [class]="m.separator" rdxMenuSeparator></div>
-                        <button [class]="m.item" (click)="deleteOpen.set(true)" rdxMenuItem>Delete…</button>
+                <div sideOffset="4" rdxMenuPositioner [class]="m.positioner">
+                    <div rdxMenuPopup [class]="m.popup">
+                        <button rdxMenuItem [class]="m.item">Rename</button>
+                        <button rdxMenuItem [class]="m.item">Duplicate</button>
+                        <div rdxMenuSeparator [class]="m.separator"></div>
+                        <button rdxMenuItem [class]="m.item" (click)="deleteOpen.set(true)">Delete…</button>
                     </div>
                 </div>
             }
         </ng-container>
 
         <!-- Controlled alert dialog opened from the menu item. -->
-        <div [(open)]="deleteOpen" rdxAlertDialogRoot>
+        <div rdxAlertDialogRoot [(open)]="deleteOpen">
             <ng-template rdxAlertDialogPortal>
-                <div [class]="cn(d.backdrop, d.backdropAnimated)" rdxAlertDialogBackdrop></div>
-                <div [class]="cn(d.popup, d.popupAnimated)" rdxAlertDialogPopup>
-                    <h2 [class]="d.title" rdxAlertDialogTitle>Delete project?</h2>
-                    <p [class]="d.description" rdxAlertDialogDescription>
+                <div rdxAlertDialogBackdrop [class]="cn(d.backdrop, d.backdropAnimated)"></div>
+                <div rdxAlertDialogPopup [class]="cn(d.popup, d.popupAnimated)">
+                    <h2 rdxAlertDialogTitle [class]="d.title">Delete project?</h2>
+                    <p rdxAlertDialogDescription [class]="d.description">
                         This permanently deletes the project. Opened by controlling the alert dialog from a menu item.
                     </p>
                     <div [class]="d.footer">
-                        <button [class]="cn(b.base, b.outline, b.size.sm)" rdxAlertDialogClose>Cancel</button>
-                        <button [class]="cn(b.base, b.destructive, b.size.sm)" rdxAlertDialogClose>Delete</button>
+                        <button rdxAlertDialogClose [class]="cn(b.base, b.outline, b.size.sm)">Cancel</button>
+                        <button rdxAlertDialogClose [class]="cn(b.base, b.destructive, b.size.sm)">Delete</button>
                     </div>
                 </div>
             </ng-template>
diff --git a/packages/primitives/alert-dialog/stories/alert-dialog-multiple-triggers.ts b/packages/primitives/alert-dialog/stories/alert-dialog-multiple-triggers.ts
index 46bf32ce4..fa3876ae0 100644
--- a/packages/primitives/alert-dialog/stories/alert-dialog-multiple-triggers.ts
+++ b/packages/primitives/alert-dialog/stories/alert-dialog-multiple-triggers.ts
@@ -1,6 +1,6 @@
+import { cn, demoButton, demoDialog } from '../../storybook/styles';
 import { ChangeDetectionStrategy, Component } from '@angular/core';
 import { alertDialogImports } from '@radix-ng/primitives/alert-dialog';
-import { cn, demoButton, demoDialog } from '../../storybook/styles';
 
 @Component({
     changeDetection: ChangeDetectionStrategy.Eager,
@@ -9,29 +9,29 @@ import { cn, demoButton, demoDialog } from '../../storybook/styles';
     template: `
         <div #root="rdxAlertDialogRoot" rdxAlertDialogRoot>
             <div class="flex gap-2">
-                <button [class]="cn(b.base, b.outline, b.size.md)" payload="photo" rdxAlertDialogTrigger>
+                <button payload="photo" rdxAlertDialogTrigger [class]="cn(b.base, b.outline, b.size.md)">
                     Delete photo
                 </button>
-                <button [class]="cn(b.base, b.outline, b.size.md)" payload="video" rdxAlertDialogTrigger>
+                <button payload="video" rdxAlertDialogTrigger [class]="cn(b.base, b.outline, b.size.md)">
                     Delete video
                 </button>
-                <button [class]="cn(b.base, b.outline, b.size.md)" payload="album" rdxAlertDialogTrigger>
+                <button payload="album" rdxAlertDialogTrigger [class]="cn(b.base, b.outline, b.size.md)">
                     Delete album
                 </button>
             </div>
 
             <ng-template rdxAlertDialogPortal>
-                <div [class]="cn(d.backdrop, d.backdropAnimated)" rdxAlertDialogBackdrop></div>
-                <div [class]="cn(d.popup, d.popupAnimated)" rdxAlertDialogPopup>
-                    <h2 [class]="d.title" rdxAlertDialogTitle>Delete this {{ root.payload() || 'item' }}?</h2>
-                    <p [class]="d.description" rdxAlertDialogDescription>
+                <div rdxAlertDialogBackdrop [class]="cn(d.backdrop, d.backdropAnimated)"></div>
+                <div rdxAlertDialogPopup [class]="cn(d.popup, d.popupAnimated)">
+                    <h2 rdxAlertDialogTitle [class]="d.title">Delete this {{ root.payload() || 'item' }}?</h2>
+                    <p rdxAlertDialogDescription [class]="d.description">
                         Every trigger opens the same alert dialog; the active trigger's
                         <code>payload</code>
                         decides what is being deleted.
                     </p>
                     <div [class]="d.footer">
-                        <button [class]="cn(b.base, b.outline, b.size.sm)" rdxAlertDialogClose>Cancel</button>
-                        <button [class]="cn(b.base, b.destructive, b.size.sm)" rdxAlertDialogClose>Delete</button>
+                        <button rdxAlertDialogClose [class]="cn(b.base, b.outline, b.size.sm)">Cancel</button>
+                        <button rdxAlertDialogClose [class]="cn(b.base, b.destructive, b.size.sm)">Delete</button>
                     </div>
                 </div>
             </ng-template>
diff --git a/packages/primitives/alert-dialog/stories/alert-dialog.stories.ts b/packages/primitives/alert-dialog/stories/alert-dialog.stories.ts
index 9a267b68b..be9da79a0 100644
--- a/packages/primitives/alert-dialog/stories/alert-dialog.stories.ts
+++ b/packages/primitives/alert-dialog/stories/alert-dialog.stories.ts
@@ -1,11 +1,10 @@
-import { Meta, moduleMetadata, StoryObj } from '@storybook/angular';
 import { tailwindDemoDecorator } from '../../storybook/tailwind-demo';
 import { RdxAlertDialogCloseConfirmationComponent } from './alert-dialog-close-confirmation';
 import closeConfirmationSource from './alert-dialog-close-confirmation?raw';
 import { RdxAlertDialogControlledComponent } from './alert-dialog-controlled';
+import controlledSource from './alert-dialog-controlled?raw';
 import { RdxAlertDialogControlledMultipleComponent } from './alert-dialog-controlled-multiple';
 import controlledMultipleSource from './alert-dialog-controlled-multiple?raw';
-import controlledSource from './alert-dialog-controlled?raw';
 import { RdxAlertDialogDefaultComponent } from './alert-dialog-default';
 import defaultSource from './alert-dialog-default?raw';
 import { RdxAlertDialogDetachedComponent } from './alert-dialog-detached';
@@ -14,6 +13,7 @@ import { RdxAlertDialogFromMenuComponent } from './alert-dialog-from-menu';
 import fromMenuSource from './alert-dialog-from-menu?raw';
 import { RdxAlertDialogMultipleTriggersComponent } from './alert-dialog-multiple-triggers';
 import multipleTriggersSource from './alert-dialog-multiple-triggers?raw';
+import { Meta, moduleMetadata, StoryObj } from '@storybook/angular';
 
 const html = String.raw;
 
diff --git a/packages/primitives/arrow/__tests__/arrow.spec.ts b/packages/primitives/arrow/__tests__/arrow.spec.ts
index 97a65712a..3aeb4c914 100644
--- a/packages/primitives/arrow/__tests__/arrow.spec.ts
+++ b/packages/primitives/arrow/__tests__/arrow.spec.ts
@@ -1,7 +1,7 @@
+import { RdxArrow } from '../src/arrow';
 import { ChangeDetectionStrategy, Component } from '@angular/core';
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { By } from '@angular/platform-browser';
-import { RdxArrow } from '../src/arrow';
 
 @Component({
     changeDetection: ChangeDetectionStrategy.Eager,
diff --git a/packages/primitives/arrow/src/arrow.ts b/packages/primitives/arrow/src/arrow.ts
index 0bf03580f..1da05a4c5 100644
--- a/packages/primitives/arrow/src/arrow.ts
+++ b/packages/primitives/arrow/src/arrow.ts
@@ -7,13 +7,13 @@ import { NumberInput } from '@radix-ng/primitives/core';
     template: `
         <ng-content>
             <svg
-                [style.width.px]="width()"
-                [style.height.px]="height()"
                 style="display: block"
                 viewBox="0 0 30 10"
                 preserveAspectRatio="none"
                 aria-hidden="true"
                 focusable="false"
+                [style.width.px]="width()"
+                [style.height.px]="height()"
             >
                 <polygon points="0,0 30,0 15,10" fill="currentColor" />
             </svg>
diff --git a/packages/primitives/aspect-ratio/__tests__/aspect-ratio.directive.spec.ts b/packages/primitives/aspect-ratio/__tests__/aspect-ratio.directive.spec.ts
index f5d915a90..c04e09fab 100644
--- a/packages/primitives/aspect-ratio/__tests__/aspect-ratio.directive.spec.ts
+++ b/packages/primitives/aspect-ratio/__tests__/aspect-ratio.directive.spec.ts
@@ -1,10 +1,10 @@
+import { RdxAspectRatioDirective } from '../src/aspect-ratio.directive';
 import { Component, signal } from '@angular/core';
 import { ComponentFixture, TestBed } from '@angular/core/testing';
-import { RdxAspectRatioDirective } from '../src/aspect-ratio.directive';
 
 @Component({
     template: `
-        <div [ratio]="ratio()" rdxAspectRatio></div>
+        <div rdxAspectRatio [ratio]="ratio()"></div>
     `,
     imports: [RdxAspectRatioDirective]
 })
diff --git a/packages/primitives/aspect-ratio/stories/aspect-ratio.stories.ts b/packages/primitives/aspect-ratio/stories/aspect-ratio.stories.ts
index 5e37828e3..1436e2b0e 100644
--- a/packages/primitives/aspect-ratio/stories/aspect-ratio.stories.ts
+++ b/packages/primitives/aspect-ratio/stories/aspect-ratio.stories.ts
@@ -1,6 +1,6 @@
-import { Meta, moduleMetadata, StoryObj } from '@storybook/angular';
 import { tailwindDemoDecorator } from '../../storybook/tailwind-demo';
 import { RdxAspectRatioDirective } from '../src/aspect-ratio.directive';
+import { Meta, moduleMetadata, StoryObj } from '@storybook/angular';
 
 const html = String.raw;
 
diff --git a/packages/primitives/autocomplete/__tests__/autocomplete-aria-selected.spec.ts b/packages/primitives/autocomplete/__tests__/autocomplete-aria-selected.spec.ts
index 40a1bb2d2..764fbd780 100644
--- a/packages/primitives/autocomplete/__tests__/autocomplete-aria-selected.spec.ts
+++ b/packages/primitives/autocomplete/__tests__/autocomplete-aria-selected.spec.ts
@@ -1,7 +1,7 @@
+import { _importsAutocomplete } from '../index';
 import { ChangeDetectionStrategy, Component, signal } from '@angular/core';
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { beforeEach, describe, expect, it } from 'vitest';
-import { _importsAutocomplete } from '../index';
 
 /**
  * Regression (ADR 0014 review, Finding 3): autocomplete is always `selectionMode="none"`, so options
@@ -12,13 +12,13 @@ import { _importsAutocomplete } from '../index';
     changeDetection: ChangeDetectionStrategy.Eager,
     imports: [_importsAutocomplete],
     template: `
-        <div [(value)]="value" [(open)]="open" rdxAutocompleteRoot>
+        <div rdxAutocompleteRoot [(value)]="value" [(open)]="open">
             <input rdxAutocompleteInput aria-label="Fruit" />
             <div *rdxAutocompletePortal rdxAutocompletePositioner>
                 <div rdxAutocompletePopup>
                     <div rdxAutocompleteList aria-label="Fruits">
                         @for (fruit of fruits; track fruit) {
-                            <div [value]="fruit" rdxAutocompleteItem>{{ fruit }}</div>
+                            <div rdxAutocompleteItem [value]="fruit">{{ fruit }}</div>
                         }
                     </div>
                 </div>
diff --git a/packages/primitives/autocomplete/__tests__/autocomplete-auto-highlight.spec.ts b/packages/primitives/autocomplete/__tests__/autocomplete-auto-highlight.spec.ts
index 135345fce..03e0cfa7b 100644
--- a/packages/primitives/autocomplete/__tests__/autocomplete-auto-highlight.spec.ts
+++ b/packages/primitives/autocomplete/__tests__/autocomplete-auto-highlight.spec.ts
@@ -1,16 +1,16 @@
+import { _importsAutocomplete } from '../index';
+import { RdxAutocompleteRoot } from '../src/autocomplete-root';
 import { ChangeDetectionStrategy, Component, signal } from '@angular/core';
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { By } from '@angular/platform-browser';
 import { beforeEach, describe, expect, it } from 'vitest';
-import { _importsAutocomplete } from '../index';
-import { RdxAutocompleteRoot } from '../src/autocomplete-root';
 
 // Bare `autoHighlight` attribute (no value) — the common authoring form. Must coerce to `true`.
 @Component({
     changeDetection: ChangeDetectionStrategy.Eager,
     imports: [_importsAutocomplete],
     template: `
-        <div [(value)]="value" autoHighlight rdxAutocompleteRoot>
+        <div autoHighlight rdxAutocompleteRoot [(value)]="value">
             <input rdxAutocompleteInput aria-label="Tag" />
             <div *rdxAutocompletePortal rdxAutocompletePositioner>
                 <div rdxAutocompletePopup>
diff --git a/packages/primitives/autocomplete/__tests__/autocomplete-engine-parity.spec.ts b/packages/primitives/autocomplete/__tests__/autocomplete-engine-parity.spec.ts
index e6121e555..568fc33d6 100644
--- a/packages/primitives/autocomplete/__tests__/autocomplete-engine-parity.spec.ts
+++ b/packages/primitives/autocomplete/__tests__/autocomplete-engine-parity.spec.ts
@@ -1,9 +1,9 @@
+import { _importsAutocomplete } from '../index';
+import { AutocompleteItemHighlightedDetails, RdxAutocompleteRoot } from '../src/autocomplete-root';
 import { ChangeDetectionStrategy, Component, signal } from '@angular/core';
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { By } from '@angular/platform-browser';
 import { beforeEach, describe, expect, it } from 'vitest';
-import { _importsAutocomplete } from '../index';
-import { AutocompleteItemHighlightedDetails, RdxAutocompleteRoot } from '../src/autocomplete-root';
 
 /**
  * Characterization tests (ADR 0014, Phase 0): pin engine behaviors that autocomplete shares with
@@ -15,18 +15,18 @@ import { AutocompleteItemHighlightedDetails, RdxAutocompleteRoot } from '../src/
     imports: [_importsAutocomplete],
     template: `
         <div
+            rdxAutocompleteRoot
+            [limit]="limit()"
             [(value)]="value"
             [(open)]="open"
-            [limit]="limit()"
             (onItemHighlighted)="lastHighlight = $event"
-            rdxAutocompleteRoot
         >
             <input rdxAutocompleteInput aria-label="Item" />
             <div *rdxAutocompletePortal rdxAutocompletePositioner>
                 <div rdxAutocompletePopup>
                     <div rdxAutocompleteList aria-label="Items">
                         @for (item of items; track item) {
-                            <div [value]="item" rdxAutocompleteItem>{{ item }}</div>
+                            <div rdxAutocompleteItem [value]="item">{{ item }}</div>
                         }
                     </div>
                 </div>
diff --git a/packages/primitives/autocomplete/__tests__/autocomplete-filter-value.spec.ts b/packages/primitives/autocomplete/__tests__/autocomplete-filter-value.spec.ts
index 7c1d2c8fa..502a2b433 100644
--- a/packages/primitives/autocomplete/__tests__/autocomplete-filter-value.spec.ts
+++ b/packages/primitives/autocomplete/__tests__/autocomplete-filter-value.spec.ts
@@ -1,9 +1,9 @@
+import { _importsAutocomplete } from '../index';
+import { AutocompleteFilter } from '../src/autocomplete-root';
 import { ChangeDetectionStrategy, Component, signal } from '@angular/core';
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { AcceptableValue } from '@radix-ng/primitives/core';
 import { beforeEach, describe, expect, it } from 'vitest';
-import { _importsAutocomplete } from '../index';
-import { AutocompleteFilter } from '../src/autocomplete-root';
 
 /**
  * Regression (ADR 0014 review): the value-first filter contract must hand the custom filter the real
@@ -14,14 +14,14 @@ import { AutocompleteFilter } from '../src/autocomplete-root';
     changeDetection: ChangeDetectionStrategy.Eager,
     imports: [_importsAutocomplete],
     template: `
-        <div [(value)]="value" [(open)]="open" [filter]="filter()" rdxAutocompleteRoot>
+        <div rdxAutocompleteRoot [filter]="filter()" [(value)]="value" [(open)]="open">
             <input rdxAutocompleteInput aria-label="Item" />
             <div *rdxAutocompletePortal rdxAutocompletePositioner>
                 <div rdxAutocompletePopup>
                     <div rdxAutocompleteList aria-label="Items">
                         <div rdxAutocompleteItem>Plain</div>
-                        <div [value]="''" rdxAutocompleteItem>Empty</div>
-                        <div [value]="null" rdxAutocompleteItem>Null</div>
+                        <div rdxAutocompleteItem [value]="''">Empty</div>
+                        <div rdxAutocompleteItem [value]="null">Null</div>
                     </div>
                 </div>
             </div>
diff --git a/packages/primitives/autocomplete/__tests__/autocomplete-forms.spec.ts b/packages/primitives/autocomplete/__tests__/autocomplete-forms.spec.ts
index 8ce0a7344..4c03eba70 100644
--- a/packages/primitives/autocomplete/__tests__/autocomplete-forms.spec.ts
+++ b/packages/primitives/autocomplete/__tests__/autocomplete-forms.spec.ts
@@ -1,15 +1,15 @@
+import { _importsAutocomplete } from '../index';
 import { ChangeDetectionStrategy, Component, signal } from '@angular/core';
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { FormControl, FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { form, FormField } from '@angular/forms/signals';
 import { beforeEach, describe, expect, it } from 'vitest';
-import { _importsAutocomplete } from '../index';
 
 @Component({
     changeDetection: ChangeDetectionStrategy.Eager,
     imports: [_importsAutocomplete, ReactiveFormsModule],
     template: `
-        <div [(open)]="open" [formControl]="control" rdxAutocompleteRoot>
+        <div rdxAutocompleteRoot [formControl]="control" [(open)]="open">
             <input rdxAutocompleteInput aria-label="Fruit" />
             <div *rdxAutocompletePortal rdxAutocompletePositioner>
                 <div rdxAutocompletePopup>
@@ -33,7 +33,7 @@ class ReactiveHost {
     changeDetection: ChangeDetectionStrategy.Eager,
     imports: [_importsAutocomplete, FormsModule],
     template: `
-        <div [(ngModel)]="value" [(open)]="open" rdxAutocompleteRoot>
+        <div rdxAutocompleteRoot [(ngModel)]="value" [(open)]="open">
             <input rdxAutocompleteInput aria-label="Fruit" />
             <div *rdxAutocompletePortal rdxAutocompletePositioner>
                 <div rdxAutocompletePopup>
@@ -140,7 +140,7 @@ describe('Autocomplete forms', () => {
     changeDetection: ChangeDetectionStrategy.Eager,
     imports: [_importsAutocomplete],
     template: `
-        <div [(open)]="open" [invalid]="invalid()" [errors]="errors()" [dirty]="dirty()" rdxAutocompleteRoot>
+        <div rdxAutocompleteRoot [invalid]="invalid()" [errors]="errors()" [dirty]="dirty()" [(open)]="open">
             <input rdxAutocompleteInput aria-label="Fruit" />
             <div *rdxAutocompletePortal rdxAutocompletePositioner>
                 <div rdxAutocompletePopup>
@@ -166,7 +166,7 @@ class AutocompleteValidationHost {
     changeDetection: ChangeDetectionStrategy.Eager,
     imports: [_importsAutocomplete, FormField],
     template: `
-        <div [(open)]="open" [formField]="query" rdxAutocompleteRoot>
+        <div rdxAutocompleteRoot [formField]="query" [(open)]="open">
             <input rdxAutocompleteInput aria-label="Fruit" />
             <div *rdxAutocompletePortal rdxAutocompletePositioner>
                 <div rdxAutocompletePopup>
diff --git a/packages/primitives/autocomplete/__tests__/autocomplete-grid.spec.ts b/packages/primitives/autocomplete/__tests__/autocomplete-grid.spec.ts
index 627d6c22c..8d1a244e0 100644
--- a/packages/primitives/autocomplete/__tests__/autocomplete-grid.spec.ts
+++ b/packages/primitives/autocomplete/__tests__/autocomplete-grid.spec.ts
@@ -1,13 +1,13 @@
+import { _importsAutocomplete } from '../index';
 import { ChangeDetectionStrategy, Component, signal } from '@angular/core';
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { beforeEach, describe, expect, it } from 'vitest';
-import { _importsAutocomplete } from '../index';
 
 @Component({
     changeDetection: ChangeDetectionStrategy.Eager,
     imports: [_importsAutocomplete],
     template: `
-        <div [(value)]="value" [(open)]="open" grid rdxAutocompleteRoot>
+        <div grid rdxAutocompleteRoot [(value)]="value" [(open)]="open">
             <input rdxAutocompleteInput aria-label="Color" />
             <div *rdxAutocompletePortal rdxAutocompletePositioner>
                 <div rdxAutocompletePopup>
@@ -146,7 +146,7 @@ describe('Autocomplete grid', () => {
     changeDetection: ChangeDetectionStrategy.Eager,
     imports: [_importsAutocomplete],
     template: `
-        <div [(open)]="open" grid rdxAutocompleteRoot>
+        <div grid rdxAutocompleteRoot [(open)]="open">
             <input rdxAutocompleteInput aria-label="X" />
             <div *rdxAutocompletePortal rdxAutocompletePositioner>
                 <div rdxAutocompletePopup>
diff --git a/packages/primitives/autocomplete/__tests__/autocomplete-hover.spec.ts b/packages/primitives/autocomplete/__tests__/autocomplete-hover.spec.ts
index fdc360aba..ffe688f23 100644
--- a/packages/primitives/autocomplete/__tests__/autocomplete-hover.spec.ts
+++ b/packages/primitives/autocomplete/__tests__/autocomplete-hover.spec.ts
@@ -1,13 +1,13 @@
+import { _importsAutocomplete } from '../index';
 import { ChangeDetectionStrategy, Component, signal } from '@angular/core';
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { beforeEach, describe, expect, it } from 'vitest';
-import { _importsAutocomplete } from '../index';
 
 @Component({
     changeDetection: ChangeDetectionStrategy.Eager,
     imports: [_importsAutocomplete],
     template: `
-        <div [(open)]="open" [highlightItemOnHover]="hover()" [keepHighlight]="keep()" rdxAutocompleteRoot>
+        <div rdxAutocompleteRoot [highlightItemOnHover]="hover()" [keepHighlight]="keep()" [(open)]="open">
             <input rdxAutocompleteInput aria-label="Fruit" />
             <div *rdxAutocompletePortal rdxAutocompletePositioner>
                 <div rdxAutocompletePopup>
diff --git a/packages/primitives/autocomplete/__tests__/autocomplete-inline-list.spec.ts b/packages/primitives/autocomplete/__tests__/autocomplete-inline-list.spec.ts
index ce6fbeadf..733df2da6 100644
--- a/packages/primitives/autocomplete/__tests__/autocomplete-inline-list.spec.ts
+++ b/packages/primitives/autocomplete/__tests__/autocomplete-inline-list.spec.ts
@@ -1,7 +1,7 @@
+import { _importsAutocomplete } from '../index';
 import { ChangeDetectionStrategy, Component, signal } from '@angular/core';
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { beforeEach, describe, expect, it } from 'vitest';
-import { _importsAutocomplete } from '../index';
 
 /**
  * Command-palette / "inline list" composition: the `List` is rendered directly under the root with no
@@ -12,7 +12,7 @@ import { _importsAutocomplete } from '../index';
     changeDetection: ChangeDetectionStrategy.Eager,
     imports: [_importsAutocomplete],
     template: `
-        <div [(open)]="open" autoHighlight="always" rdxAutocompleteRoot>
+        <div autoHighlight="always" rdxAutocompleteRoot [(open)]="open">
             <input rdxAutocompleteInput aria-label="Command" />
             <div rdxAutocompleteList aria-label="Commands">
                 @for (item of items(); track item) {
diff --git a/packages/primitives/autocomplete/__tests__/autocomplete-modes.spec.ts b/packages/primitives/autocomplete/__tests__/autocomplete-modes.spec.ts
index 1db0d3cf3..e0a8471ef 100644
--- a/packages/primitives/autocomplete/__tests__/autocomplete-modes.spec.ts
+++ b/packages/primitives/autocomplete/__tests__/autocomplete-modes.spec.ts
@@ -1,15 +1,15 @@
+import { _importsAutocomplete } from '../index';
+import { AutocompleteMode, RdxAutocompleteRoot } from '../src/autocomplete-root';
 import { ChangeDetectionStrategy, Component, signal } from '@angular/core';
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { By } from '@angular/platform-browser';
 import { beforeEach, describe, expect, it } from 'vitest';
-import { _importsAutocomplete } from '../index';
-import { AutocompleteMode, RdxAutocompleteRoot } from '../src/autocomplete-root';
 
 @Component({
     changeDetection: ChangeDetectionStrategy.Eager,
     imports: [_importsAutocomplete],
     template: `
-        <div [(value)]="value" [(open)]="open" [mode]="mode()" [autoHighlight]="autoHighlight()" rdxAutocompleteRoot>
+        <div rdxAutocompleteRoot [mode]="mode()" [autoHighlight]="autoHighlight()" [(value)]="value" [(open)]="open">
             <input rdxAutocompleteInput aria-label="Fruit" />
             <div *rdxAutocompletePortal rdxAutocompletePositioner>
                 <div rdxAutocompletePopup>
diff --git a/packages/primitives/autocomplete/__tests__/autocomplete-pointer.spec.ts b/packages/primitives/autocomplete/__tests__/autocomplete-pointer.spec.ts
index cd82691ec..459c63670 100644
--- a/packages/primitives/autocomplete/__tests__/autocomplete-pointer.spec.ts
+++ b/packages/primitives/autocomplete/__tests__/autocomplete-pointer.spec.ts
@@ -1,7 +1,7 @@
+import { _importsAutocomplete } from '../index';
 import { ChangeDetectionStrategy, Component, signal } from '@angular/core';
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { beforeEach, describe, expect, it } from 'vitest';
-import { _importsAutocomplete } from '../index';
 
 /**
  * Autocomplete pointer/click selection (ADR 0014, Finding 6 — Base UI parity) — mirrors the combobox
@@ -12,7 +12,7 @@ import { _importsAutocomplete } from '../index';
     changeDetection: ChangeDetectionStrategy.Eager,
     imports: [_importsAutocomplete],
     template: `
-        <div [(value)]="value" [(open)]="open" rdxAutocompleteRoot>
+        <div rdxAutocompleteRoot [(value)]="value" [(open)]="open">
             <input rdxAutocompleteInput aria-label="Fruit" />
             <div *rdxAutocompletePortal rdxAutocompletePositioner>
                 <div rdxAutocompletePopup>
diff --git a/packages/primitives/autocomplete/__tests__/autocomplete-popup-input.spec.ts b/packages/primitives/autocomplete/__tests__/autocomplete-popup-input.spec.ts
index 879e86479..f952b0cb3 100644
--- a/packages/primitives/autocomplete/__tests__/autocomplete-popup-input.spec.ts
+++ b/packages/primitives/autocomplete/__tests__/autocomplete-popup-input.spec.ts
@@ -1,13 +1,13 @@
+import { _importsAutocomplete } from '../index';
 import { ChangeDetectionStrategy, Component, signal } from '@angular/core';
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { beforeEach, describe, expect, it } from 'vitest';
-import { _importsAutocomplete } from '../index';
 
 @Component({
     changeDetection: ChangeDetectionStrategy.Eager,
     imports: [_importsAutocomplete],
     template: `
-        <div [(value)]="value" rdxAutocompleteRoot>
+        <div rdxAutocompleteRoot [(value)]="value">
             <button rdxAutocompleteTrigger rdxAutocompleteAnchor>Choose</button>
 
             <div *rdxAutocompletePortal rdxAutocompletePositioner>
diff --git a/packages/primitives/autocomplete/__tests__/autocomplete-readonly.spec.ts b/packages/primitives/autocomplete/__tests__/autocomplete-readonly.spec.ts
index 6739b8998..065438cdf 100644
--- a/packages/primitives/autocomplete/__tests__/autocomplete-readonly.spec.ts
+++ b/packages/primitives/autocomplete/__tests__/autocomplete-readonly.spec.ts
@@ -1,8 +1,8 @@
+import { _importsAutocomplete } from '../index';
+import { AutocompleteValueChangeDetails } from '../src/autocomplete-root';
 import { ChangeDetectionStrategy, Component, signal } from '@angular/core';
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { beforeEach, describe, expect, it } from 'vitest';
-import { _importsAutocomplete } from '../index';
-import { AutocompleteValueChangeDetails } from '../src/autocomplete-root';
 
 /**
  * Regression (ADR 0014 review, Finding 1): autocomplete's value IS the input string, so its single
@@ -15,11 +15,11 @@ import { AutocompleteValueChangeDetails } from '../src/autocomplete-root';
     imports: [_importsAutocomplete],
     template: `
         <div
-            [(value)]="value"
+            rdxAutocompleteRoot
             [readOnly]="readOnly()"
             [disabled]="disabled()"
+            [(value)]="value"
             (onValueChange)="changes.push($event)"
-            rdxAutocompleteRoot
         >
             <input rdxAutocompleteInput aria-label="Fruit" />
             <button rdxAutocompleteClear>clear</button>
@@ -27,7 +27,7 @@ import { AutocompleteValueChangeDetails } from '../src/autocomplete-root';
                 <div rdxAutocompletePopup>
                     <div rdxAutocompleteList aria-label="Fruits">
                         @for (fruit of fruits; track fruit) {
-                            <div [value]="fruit" rdxAutocompleteItem>{{ fruit }}</div>
+                            <div rdxAutocompleteItem [value]="fruit">{{ fruit }}</div>
                         }
                     </div>
                 </div>
diff --git a/packages/primitives/autocomplete/__tests__/autocomplete-virtualized.spec.ts b/packages/primitives/autocomplete/__tests__/autocomplete-virtualized.spec.ts
index e8b78bcef..709ab9e4e 100644
--- a/packages/primitives/autocomplete/__tests__/autocomplete-virtualized.spec.ts
+++ b/packages/primitives/autocomplete/__tests__/autocomplete-virtualized.spec.ts
@@ -1,7 +1,7 @@
+import { _importsAutocomplete } from '../index';
 import { ChangeDetectionStrategy, Component, signal } from '@angular/core';
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { beforeEach, describe, expect, it } from 'vitest';
-import { _importsAutocomplete } from '../index';
 
 @Component({
     changeDetection: ChangeDetectionStrategy.Eager,
@@ -9,20 +9,20 @@ import { _importsAutocomplete } from '../index';
     template: `
         <div
             #ac="rdxAutocompleteRoot"
-            [(value)]="value"
-            [(open)]="open"
+            virtualized
+            rdxAutocompleteRoot
             [items]="items()"
             [mode]="mode()"
             [autoHighlight]="autoHighlight()"
-            virtualized
-            rdxAutocompleteRoot
+            [(value)]="value"
+            [(open)]="open"
         >
             <input rdxAutocompleteInput aria-label="Item" />
             <div *rdxAutocompletePortal rdxAutocompletePositioner>
                 <div rdxAutocompletePopup>
                     <div rdxAutocompleteList aria-label="Items">
                         @for (item of ac.filteredItems(); track item; let i = $index) {
-                            <div [value]="item" [index]="i" rdxAutocompleteItem>{{ item }}</div>
+                            <div rdxAutocompleteItem [value]="item" [index]="i">{{ item }}</div>
                         }
                     </div>
                 </div>
diff --git a/packages/primitives/autocomplete/__tests__/autocomplete.spec.ts b/packages/primitives/autocomplete/__tests__/autocomplete.spec.ts
index 0c7f62b58..8098579d3 100644
--- a/packages/primitives/autocomplete/__tests__/autocomplete.spec.ts
+++ b/packages/primitives/autocomplete/__tests__/autocomplete.spec.ts
@@ -1,25 +1,25 @@
+import { _importsAutocomplete } from '../index';
+import { AutocompleteFilter, AutocompleteValueChangeDetails, RdxAutocompleteRoot } from '../src/autocomplete-root';
 import { ChangeDetectionStrategy, Component, signal } from '@angular/core';
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { By } from '@angular/platform-browser';
 import { RdxComboboxOpenChange } from '@radix-ng/primitives/combobox';
 import { axe } from 'jest-axe';
 import { beforeEach, describe, expect, it } from 'vitest';
-import { _importsAutocomplete } from '../index';
-import { AutocompleteFilter, AutocompleteValueChangeDetails, RdxAutocompleteRoot } from '../src/autocomplete-root';
 
 @Component({
     changeDetection: ChangeDetectionStrategy.Eager,
     imports: [_importsAutocomplete],
     template: `
         <div
-            [(value)]="value"
-            [(open)]="open"
+            rdxAutocompleteRoot
             [filter]="filter()"
             [autoHighlight]="autoHighlight()"
             [openOnInputClick]="openOnInputClick()"
+            [(value)]="value"
+            [(open)]="open"
             (onValueChange)="changes.push($event)"
             (onOpenChange)="handleOpenChange($event)"
-            rdxAutocompleteRoot
         >
             <label rdxAutocompleteLabel>Fruit</label>
             <input rdxAutocompleteInput />
diff --git a/packages/primitives/autocomplete/index.ts b/packages/primitives/autocomplete/index.ts
index f0c3def31..e3f5d7ef7 100644
--- a/packages/primitives/autocomplete/index.ts
+++ b/packages/primitives/autocomplete/index.ts
@@ -1,4 +1,3 @@
-import { NgModule } from '@angular/core';
 import { RdxAutocompleteAnchor } from './src/autocomplete-anchor';
 import { RdxAutocompleteArrow } from './src/autocomplete-arrow';
 import { RdxAutocompleteBackdrop } from './src/autocomplete-backdrop';
@@ -22,6 +21,7 @@ import { RdxAutocompleteSeparator } from './src/autocomplete-separator';
 import { RdxAutocompleteStatus } from './src/autocomplete-status';
 import { RdxAutocompleteTrigger } from './src/autocomplete-trigger';
 import { RdxAutocompleteValue } from './src/autocomplete-value';
+import { NgModule } from '@angular/core';
 
 export * from './src/autocomplete-anchor';
 export * from './src/autocomplete-arrow';
diff --git a/packages/primitives/autocomplete/src/autocomplete-clear.ts b/packages/primitives/autocomplete/src/autocomplete-clear.ts
index 689efa4c6..74ddcfbe8 100644
--- a/packages/primitives/autocomplete/src/autocomplete-clear.ts
+++ b/packages/primitives/autocomplete/src/autocomplete-clear.ts
@@ -1,6 +1,6 @@
+import { RdxAutocompleteRoot } from './autocomplete-root';
 import { computed, Directive, inject } from '@angular/core';
 import { RdxFloatingInsideElement } from '@radix-ng/primitives/dismissable-layer';
-import { RdxAutocompleteRoot } from './autocomplete-root';
 
 /**
  * Clears the input value. Hidden when there is nothing to clear.
diff --git a/packages/primitives/autocomplete/src/autocomplete-input-group.ts b/packages/primitives/autocomplete/src/autocomplete-input-group.ts
index 46f0e9b34..0c6f1ac00 100644
--- a/packages/primitives/autocomplete/src/autocomplete-input-group.ts
+++ b/packages/primitives/autocomplete/src/autocomplete-input-group.ts
@@ -1,5 +1,5 @@
-import { Directive, inject } from '@angular/core';
 import { RdxAutocompleteRoot } from './autocomplete-root';
+import { Directive, inject } from '@angular/core';
 
 const attr = (value: boolean) => (value ? '' : undefined);
 
diff --git a/packages/primitives/autocomplete/src/autocomplete-input.ts b/packages/primitives/autocomplete/src/autocomplete-input.ts
index c9c79455c..590df9065 100644
--- a/packages/primitives/autocomplete/src/autocomplete-input.ts
+++ b/packages/primitives/autocomplete/src/autocomplete-input.ts
@@ -1,3 +1,5 @@
+import { RdxAutocompletePositioner } from './autocomplete-positioner';
+import { RdxAutocompleteRoot } from './autocomplete-root';
 import {
     afterNextRender,
     afterRenderEffect,
@@ -13,8 +15,6 @@ import { BooleanInput, injectId } from '@radix-ng/primitives/core';
 import { RdxFloatingInsideElement } from '@radix-ng/primitives/dismissable-layer';
 import { injectFieldRootContext } from '@radix-ng/primitives/field';
 import { RdxPopperAnchor } from '@radix-ng/primitives/popper';
-import { RdxAutocompletePositioner } from './autocomplete-positioner';
-import { RdxAutocompleteRoot } from './autocomplete-root';
 
 const attr = (value: boolean) => (value ? '' : undefined);
 
diff --git a/packages/primitives/autocomplete/src/autocomplete-item.ts b/packages/primitives/autocomplete/src/autocomplete-item.ts
index f871681be..8cdf0e064 100644
--- a/packages/primitives/autocomplete/src/autocomplete-item.ts
+++ b/packages/primitives/autocomplete/src/autocomplete-item.ts
@@ -1,3 +1,4 @@
+import { RdxAutocompleteRow } from './autocomplete-row';
 import {
     afterNextRender,
     afterRenderEffect,
@@ -18,7 +19,6 @@ import {
     provideComboboxItemContext
 } from '@radix-ng/primitives/combobox';
 import { AcceptableValue, injectId } from '@radix-ng/primitives/core';
-import { RdxAutocompleteRow } from './autocomplete-row';
 
 const itemContext = () => {
     const item = inject(RdxAutocompleteItem);
diff --git a/packages/primitives/autocomplete/src/autocomplete-list.ts b/packages/primitives/autocomplete/src/autocomplete-list.ts
index a32a5e290..be6e78ada 100644
--- a/packages/primitives/autocomplete/src/autocomplete-list.ts
+++ b/packages/primitives/autocomplete/src/autocomplete-list.ts
@@ -1,5 +1,5 @@
-import { Directive, inject } from '@angular/core';
 import { RdxAutocompleteRoot } from './autocomplete-root';
+import { Directive, inject } from '@angular/core';
 
 /**
  * The listbox (or grid) container for suggestions. Carries the id referenced by the input's
diff --git a/packages/primitives/autocomplete/src/autocomplete-popup.ts b/packages/primitives/autocomplete/src/autocomplete-popup.ts
index 1f293d981..cf8230778 100644
--- a/packages/primitives/autocomplete/src/autocomplete-popup.ts
+++ b/packages/primitives/autocomplete/src/autocomplete-popup.ts
@@ -1,3 +1,4 @@
+import { RdxAutocompleteRoot } from './autocomplete-root';
 import { afterRenderEffect, computed, DestroyRef, Directive, ElementRef, inject } from '@angular/core';
 import {
     RDX_FLOATING_REGISTRATION,
@@ -7,7 +8,6 @@ import {
 } from '@radix-ng/primitives/core';
 import { RdxDismiss } from '@radix-ng/primitives/dismissable-layer';
 import { injectPopperContentWrapperContext, RdxPopperContent } from '@radix-ng/primitives/popper';
-import { RdxAutocompleteRoot } from './autocomplete-root';
 
 /**
  * The popup surface. Composes the popper content (for `data-side` / `data-align`) and a dismissable
diff --git a/packages/primitives/autocomplete/src/autocomplete-positioner.ts b/packages/primitives/autocomplete/src/autocomplete-positioner.ts
index 910a95ce7..57877770d 100644
--- a/packages/primitives/autocomplete/src/autocomplete-positioner.ts
+++ b/packages/primitives/autocomplete/src/autocomplete-positioner.ts
@@ -1,3 +1,4 @@
+import { RdxAutocompleteRoot } from './autocomplete-root';
 import { afterNextRender, Directive, ElementRef, inject, Injector } from '@angular/core';
 import { setupInternalBackdrop } from '@radix-ng/primitives/core';
 import {
@@ -5,7 +6,6 @@ import {
     provideRdxPopperContentWrapper,
     RdxPopperContentWrapper
 } from '@radix-ng/primitives/popper';
-import { RdxAutocompleteRoot } from './autocomplete-root';
 
 /**
  * Positions the autocomplete popup relative to the input anchor using the popper engine.
diff --git a/packages/primitives/autocomplete/src/autocomplete-root.ts b/packages/primitives/autocomplete/src/autocomplete-root.ts
index a9c3eff73..1ba81a3cc 100644
--- a/packages/primitives/autocomplete/src/autocomplete-root.ts
+++ b/packages/primitives/autocomplete/src/autocomplete-root.ts
@@ -31,9 +31,9 @@ import {
     BooleanInput,
     createCancelableChangeEventDetails,
     createFloatingRootContext,
-    itemToStringLabel as defaultItemToStringLabel,
     Direction,
     isItemEqualToValue as itemsEqual,
+    itemToStringLabel as defaultItemToStringLabel,
     ItemValueComparator,
     provideFloatingRootContext,
     provideFloatingTree,
diff --git a/packages/primitives/autocomplete/src/autocomplete-value.ts b/packages/primitives/autocomplete/src/autocomplete-value.ts
index 2363a9583..f9d0f53bd 100644
--- a/packages/primitives/autocomplete/src/autocomplete-value.ts
+++ b/packages/primitives/autocomplete/src/autocomplete-value.ts
@@ -1,5 +1,5 @@
-import { computed, Directive, inject, input } from '@angular/core';
 import { RdxAutocompleteRoot } from './autocomplete-root';
+import { computed, Directive, inject, input } from '@angular/core';
 
 /**
  * Renders the current input value as text. Useful for a read-only display of the committed value.
diff --git a/packages/primitives/autocomplete/stories/autocomplete-async.ts b/packages/primitives/autocomplete/stories/autocomplete-async.ts
index bf20ee4f7..7cf564fef 100644
--- a/packages/primitives/autocomplete/stories/autocomplete-async.ts
+++ b/packages/primitives/autocomplete/stories/autocomplete-async.ts
@@ -1,6 +1,6 @@
-import { ChangeDetectionStrategy, Component, computed, signal } from '@angular/core';
 import { demoCombobox } from '../../storybook/styles';
 import { _importsAutocomplete } from '../index';
+import { ChangeDetectionStrategy, Component, computed, signal } from '@angular/core';
 
 interface Movie {
     id: string;
@@ -123,18 +123,18 @@ const top100Movies: Movie[] = [
     selector: 'autocomplete-async',
     imports: [_importsAutocomplete],
     template: `
-        <div [(value)]="value" [filter]="null" (onValueChange)="search($event.value)" rdxAutocompleteRoot>
-            <div [class]="c.control" rdxAutocompleteInputGroup>
+        <div rdxAutocompleteRoot [filter]="null" [(value)]="value" (onValueChange)="search($event.value)">
+            <div rdxAutocompleteInputGroup [class]="c.control">
                 <input
-                    [class]="c.input"
                     rdxAutocompleteInput
                     placeholder="e.g. Pulp Fiction or 1994"
                     aria-label="Movie"
+                    [class]="c.input"
                 />
             </div>
 
-            <div *rdxAutocompletePortal [class]="c.positioner" rdxAutocompletePositioner>
-                <div [class]="c.popup" [hidden]="!status()" rdxAutocompletePopup>
+            <div *rdxAutocompletePortal rdxAutocompletePositioner [class]="c.positioner">
+                <div rdxAutocompletePopup [class]="c.popup" [hidden]="!status()">
                     <div class="text-muted-foreground flex items-center gap-2 px-2 py-1 text-xs" rdxAutocompleteStatus>
                         @if (loading()) {
                             <span
@@ -146,9 +146,9 @@ const top100Movies: Movie[] = [
                             {{ status() }}
                         }
                     </div>
-                    <div [class]="c.list" rdxAutocompleteList aria-label="Movies">
+                    <div rdxAutocompleteList aria-label="Movies" [class]="c.list">
                         @for (movie of results(); track movie.id) {
-                            <div [class]="c.item" [value]="movie.title" [textValue]="movie.title" rdxAutocompleteItem>
+                            <div rdxAutocompleteItem [class]="c.item" [value]="movie.title" [textValue]="movie.title">
                                 {{ movie.title }}
                                 <span class="text-muted-foreground ml-1 text-xs">{{ movie.year }}</span>
                             </div>
diff --git a/packages/primitives/autocomplete/stories/autocomplete-auto-highlight.ts b/packages/primitives/autocomplete/stories/autocomplete-auto-highlight.ts
index f25054f59..7b05c4ba4 100644
--- a/packages/primitives/autocomplete/stories/autocomplete-auto-highlight.ts
+++ b/packages/primitives/autocomplete/stories/autocomplete-auto-highlight.ts
@@ -1,6 +1,6 @@
-import { ChangeDetectionStrategy, Component, signal } from '@angular/core';
 import { demoCombobox } from '../../storybook/styles';
 import { _importsAutocomplete } from '../index';
+import { ChangeDetectionStrategy, Component, signal } from '@angular/core';
 
 const TAGS = [
     'feature',
@@ -51,19 +51,19 @@ const TAGS = [
     selector: 'autocomplete-auto-highlight',
     imports: [_importsAutocomplete],
     template: `
-        <div [(value)]="value" autoHighlight rdxAutocompleteRoot>
-            <div [class]="c.control" rdxAutocompleteInputGroup>
-                <input [class]="c.input" rdxAutocompleteInput placeholder="e.g. fix" aria-label="Search tags" />
+        <div autoHighlight rdxAutocompleteRoot [(value)]="value">
+            <div rdxAutocompleteInputGroup [class]="c.control">
+                <input rdxAutocompleteInput placeholder="e.g. fix" aria-label="Search tags" [class]="c.input" />
             </div>
 
-            <div *rdxAutocompletePortal [class]="c.positioner" rdxAutocompletePositioner>
-                <div [class]="c.popup" rdxAutocompletePopup>
-                    <div [class]="c.list" rdxAutocompleteList aria-label="Tags">
+            <div *rdxAutocompletePortal rdxAutocompletePositioner [class]="c.positioner">
+                <div rdxAutocompletePopup [class]="c.popup">
+                    <div rdxAutocompleteList aria-label="Tags" [class]="c.list">
                         @for (tag of tags; track tag) {
-                            <div [class]="c.item" rdxAutocompleteItem>{{ tag }}</div>
+                            <div rdxAutocompleteItem [class]="c.item">{{ tag }}</div>
                         }
                     </div>
-                    <div [class]="c.empty" rdxAutocompleteEmpty>No tags found.</div>
+                    <div rdxAutocompleteEmpty [class]="c.empty">No tags found.</div>
                 </div>
             </div>
         </div>
diff --git a/packages/primitives/autocomplete/stories/autocomplete-command-palette.ts b/packages/primitives/autocomplete/stories/autocomplete-command-palette.ts
index 69a5817de..407d6ee7f 100644
--- a/packages/primitives/autocomplete/stories/autocomplete-command-palette.ts
+++ b/packages/primitives/autocomplete/stories/autocomplete-command-palette.ts
@@ -1,7 +1,7 @@
-import { ChangeDetectionStrategy, Component, signal } from '@angular/core';
-import { dialogImports } from '@radix-ng/primitives/dialog';
 import { cn, demoButton, demoCard, demoDialog } from '../../storybook/styles';
 import { _importsAutocomplete } from '../index';
+import { ChangeDetectionStrategy, Component, signal } from '@angular/core';
+import { dialogImports } from '@radix-ng/primitives/dialog';
 
 interface Item {
     value: string;
@@ -23,33 +23,33 @@ interface Group {
     selector: 'autocomplete-command-palette',
     imports: [...dialogImports, _importsAutocomplete],
     template: `
-        <div [(open)]="open" rdxDialogRoot>
-            <button [class]="cn(b.base, b.primary, b.size.md)" rdxDialogTrigger>Open command palette</button>
+        <div rdxDialogRoot [(open)]="open">
+            <button rdxDialogTrigger [class]="cn(b.base, b.primary, b.size.md)">Open command palette</button>
 
             <ng-template rdxDialogPortal>
-                <div [class]="cn(d.backdrop, d.backdropAnimated)" rdxDialogBackdrop></div>
+                <div rdxDialogBackdrop [class]="cn(d.backdrop, d.backdropAnimated)"></div>
 
                 <div class="fixed inset-0 z-50 flex items-start justify-center overflow-y-auto p-4 pt-[12vh]">
-                    <div [class]="popup" rdxDialogPopup aria-label="Command palette">
-                        <div [(open)]="open" autoHighlight="always" rdxAutocompleteRoot>
+                    <div rdxDialogPopup aria-label="Command palette" [class]="popup">
+                        <div autoHighlight="always" rdxAutocompleteRoot [(open)]="open">
                             <input
                                 #cmdInput
-                                [class]="input"
                                 rdxAutocompleteInput
                                 placeholder="Search for apps and commands…"
                                 aria-label="Command"
+                                [class]="input"
                             />
 
-                            <div [class]="list" rdxAutocompleteList aria-label="Commands">
+                            <div rdxAutocompleteList aria-label="Commands" [class]="list">
                                 @for (group of groups; track group.value) {
                                     <div class="mb-1" rdxAutocompleteGroup>
-                                        <div [class]="groupLabel" rdxAutocompleteGroupLabel>{{ group.value }}</div>
+                                        <div rdxAutocompleteGroupLabel [class]="groupLabel">{{ group.value }}</div>
                                         @for (item of group.items; track item.value) {
                                             <div
+                                                rdxAutocompleteItem
                                                 [class]="itemClass"
                                                 [value]="item"
                                                 [textValue]="item.label"
-                                                rdxAutocompleteItem
                                             >
                                                 <span class="truncate">{{ item.label }}</span>
                                                 <span [class]="badge">
@@ -59,7 +59,7 @@ interface Group {
                                         }
                                     </div>
                                 }
-                                <div [class]="empty" rdxAutocompleteEmpty>No results found.</div>
+                                <div rdxAutocompleteEmpty [class]="empty">No results found.</div>
                             </div>
 
                             <div [class]="footer">
diff --git a/packages/primitives/autocomplete/stories/autocomplete-default.ts b/packages/primitives/autocomplete/stories/autocomplete-default.ts
index d16cf528e..a5e805b18 100644
--- a/packages/primitives/autocomplete/stories/autocomplete-default.ts
+++ b/packages/primitives/autocomplete/stories/autocomplete-default.ts
@@ -1,6 +1,6 @@
-import { ChangeDetectionStrategy, Component, signal } from '@angular/core';
 import { cn, demoCombobox } from '../../storybook/styles';
 import { _importsAutocomplete } from '../index';
+import { ChangeDetectionStrategy, Component, signal } from '@angular/core';
 
 const TAGS = [
     'feature',
@@ -51,24 +51,24 @@ const TAGS = [
     selector: 'autocomplete-default',
     imports: [_importsAutocomplete],
     template: `
-        <div [(value)]="value" rdxAutocompleteRoot>
-            <div [class]="c.control" rdxAutocompleteInputGroup>
+        <div rdxAutocompleteRoot [(value)]="value">
+            <div rdxAutocompleteInputGroup [class]="c.control">
                 <input
-                    [class]="cn(c.input, 'pr-3')"
                     rdxAutocompleteInput
                     placeholder="e.g. fix"
                     aria-label="Search tags"
+                    [class]="cn(c.input, 'pr-3')"
                 />
             </div>
 
-            <div *rdxAutocompletePortal [class]="c.positioner" rdxAutocompletePositioner>
-                <div [class]="c.popup" rdxAutocompletePopup>
-                    <div [class]="c.list" rdxAutocompleteList aria-label="Tags">
+            <div *rdxAutocompletePortal rdxAutocompletePositioner [class]="c.positioner">
+                <div rdxAutocompletePopup [class]="c.popup">
+                    <div rdxAutocompleteList aria-label="Tags" [class]="c.list">
                         @for (tag of tags; track tag) {
-                            <div [class]="c.item" rdxAutocompleteItem>{{ tag }}</div>
+                            <div rdxAutocompleteItem [class]="c.item">{{ tag }}</div>
                         }
                     </div>
-                    <div [class]="c.empty" rdxAutocompleteEmpty>No tags found.</div>
+                    <div rdxAutocompleteEmpty [class]="c.empty">No tags found.</div>
                 </div>
             </div>
         </div>
diff --git a/packages/primitives/autocomplete/stories/autocomplete-disabled.ts b/packages/primitives/autocomplete/stories/autocomplete-disabled.ts
index ea82cde1d..f43961c42 100644
--- a/packages/primitives/autocomplete/stories/autocomplete-disabled.ts
+++ b/packages/primitives/autocomplete/stories/autocomplete-disabled.ts
@@ -1,22 +1,22 @@
-import { ChangeDetectionStrategy, Component, signal } from '@angular/core';
 import { demoCombobox } from '../../storybook/styles';
 import { _importsAutocomplete } from '../index';
+import { ChangeDetectionStrategy, Component, signal } from '@angular/core';
 
 @Component({
     changeDetection: ChangeDetectionStrategy.Eager,
     selector: 'autocomplete-disabled',
     imports: [_importsAutocomplete],
     template: `
-        <div [(value)]="value" disabled rdxAutocompleteRoot>
-            <div [class]="c.control" rdxAutocompleteInputGroup>
-                <input [class]="c.input" rdxAutocompleteInput placeholder="Disabled" aria-label="Fruit" />
+        <div disabled rdxAutocompleteRoot [(value)]="value">
+            <div rdxAutocompleteInputGroup [class]="c.control">
+                <input rdxAutocompleteInput placeholder="Disabled" aria-label="Fruit" [class]="c.input" />
             </div>
 
-            <div *rdxAutocompletePortal [class]="c.positioner" rdxAutocompletePositioner>
-                <div [class]="c.popup" rdxAutocompletePopup>
-                    <div [class]="c.list" rdxAutocompleteList aria-label="Fruits">
+            <div *rdxAutocompletePortal rdxAutocompletePositioner [class]="c.positioner">
+                <div rdxAutocompletePopup [class]="c.popup">
+                    <div rdxAutocompleteList aria-label="Fruits" [class]="c.list">
                         @for (fruit of fruits; track fruit) {
-                            <div [class]="c.item" rdxAutocompleteItem>{{ fruit }}</div>
+                            <div rdxAutocompleteItem [class]="c.item">{{ fruit }}</div>
                         }
                     </div>
                 </div>
diff --git a/packages/primitives/autocomplete/stories/autocomplete-fuzzy.ts b/packages/primitives/autocomplete/stories/autocomplete-fuzzy.ts
index 063f1130a..2bedda268 100644
--- a/packages/primitives/autocomplete/stories/autocomplete-fuzzy.ts
+++ b/packages/primitives/autocomplete/stories/autocomplete-fuzzy.ts
@@ -1,7 +1,7 @@
-import { ChangeDetectionStrategy, Component, signal } from '@angular/core';
-import { matchSorter, rankings } from 'match-sorter';
 import { cn, demoCombobox } from '../../storybook/styles';
 import { _importsAutocomplete, AutocompleteFilter } from '../index';
+import { ChangeDetectionStrategy, Component, signal } from '@angular/core';
+import { matchSorter, rankings } from 'match-sorter';
 
 interface DocItem {
     title: string;
@@ -33,17 +33,17 @@ const fuzzyFilter: AutocompleteFilter = (value, query) => {
     selector: 'autocomplete-fuzzy',
     imports: [_importsAutocomplete],
     template: `
-        <div #ac="rdxAutocompleteRoot" [(value)]="value" [filter]="fuzzy" rdxAutocompleteRoot>
-            <div [class]="control" rdxAutocompleteInputGroup>
-                <input [class]="c.input" rdxAutocompleteInput placeholder="e.g. React" aria-label="Documentation" />
+        <div #ac="rdxAutocompleteRoot" rdxAutocompleteRoot [filter]="fuzzy" [(value)]="value">
+            <div rdxAutocompleteInputGroup [class]="control">
+                <input rdxAutocompleteInput placeholder="e.g. React" aria-label="Documentation" [class]="c.input" />
             </div>
 
-            <div *rdxAutocompletePortal [class]="positioner" rdxAutocompletePositioner>
-                <div [class]="popup" rdxAutocompletePopup>
-                    <div [class]="c.empty" rdxAutocompleteEmpty>No results found for "{{ ac.value() }}".</div>
-                    <div [class]="c.list" rdxAutocompleteList aria-label="Documentation">
+            <div *rdxAutocompletePortal rdxAutocompletePositioner [class]="positioner">
+                <div rdxAutocompletePopup [class]="popup">
+                    <div rdxAutocompleteEmpty [class]="c.empty">No results found for "{{ ac.value() }}".</div>
+                    <div rdxAutocompleteList aria-label="Documentation" [class]="c.list">
                         @for (item of items; track item.title) {
-                            <div [class]="itemClass" [value]="item" [textValue]="item.title" rdxAutocompleteItem>
+                            <div rdxAutocompleteItem [class]="itemClass" [value]="item" [textValue]="item.title">
                                 <span class="flex flex-col gap-0.5">
                                     <span
                                         class="text-foreground leading-5 font-semibold"
diff --git a/packages/primitives/autocomplete/stories/autocomplete-grid.ts b/packages/primitives/autocomplete/stories/autocomplete-grid.ts
index c3df0058a..efd362630 100644
--- a/packages/primitives/autocomplete/stories/autocomplete-grid.ts
+++ b/packages/primitives/autocomplete/stories/autocomplete-grid.ts
@@ -1,6 +1,6 @@
-import { ChangeDetectionStrategy, Component, ElementRef, signal, viewChild } from '@angular/core';
 import { cn, demoCombobox, demoFocusRing } from '../../storybook/styles';
 import { _importsAutocomplete } from '../index';
+import { ChangeDetectionStrategy, Component, ElementRef, signal, viewChild } from '@angular/core';
 
 interface Emoji {
     emoji: string;
@@ -35,42 +35,42 @@ function chunk<T>(items: T[], size: number): T[][] {
     template: `
         <div class="relative flex w-64">
             <input
-                class="border-border bg-background text-foreground placeholder:text-muted-foreground focus-visible:ring-ring relative -mr-px h-9 flex-1 rounded-l-md border px-2 text-sm outline-none focus-visible:z-10 focus-visible:ring-2 focus-visible:ring-inset"
                 #message
+                class="border-border bg-background text-foreground placeholder:text-muted-foreground focus-visible:ring-ring relative -mr-px h-9 flex-1 rounded-l-md border px-2 text-sm outline-none focus-visible:z-10 focus-visible:ring-2 focus-visible:ring-inset"
                 placeholder="Message…"
                 aria-label="Message"
             />
 
             <div
-                [(open)]="open"
+                grid
+                rdxAutocompleteRoot
                 [value]="search()"
+                [(open)]="open"
                 (onValueChange)="onSearch($event)"
                 (onOpenChangeComplete)="onOpenComplete($event)"
-                grid
-                rdxAutocompleteRoot
             >
-                <button [class]="trigger" rdxAutocompleteTrigger rdxAutocompleteAnchor aria-label="Choose emoji">
+                <button rdxAutocompleteTrigger rdxAutocompleteAnchor aria-label="Choose emoji" [class]="trigger">
                     😀
                 </button>
 
-                <div *rdxAutocompletePortal [class]="c.positioner" rdxAutocompletePositioner align="end">
-                    <div [class]="popup" rdxAutocompletePopup>
+                <div *rdxAutocompletePortal rdxAutocompletePositioner align="end" [class]="c.positioner">
+                    <div rdxAutocompletePopup [class]="popup">
                         <input
-                            [class]="input"
                             rdxAutocompleteInput
                             placeholder="Search emojis…"
                             aria-label="Search emojis"
+                            [class]="input"
                         />
                         <div class="max-h-64 overflow-auto p-1">
                             @for (group of groups; track group.label) {
                                 <div rdxAutocompleteGroup>
-                                    <div [class]="c.groupLabel" rdxAutocompleteGroupLabel>
+                                    <div rdxAutocompleteGroupLabel [class]="c.groupLabel">
                                         {{ group.label }}
                                     </div>
                                     @for (row of group.rows; track $index) {
                                         <div class="grid grid-cols-5" rdxAutocompleteRow>
                                             @for (item of row; track item.emoji) {
-                                                <div [class]="cell" [textValue]="item.name" rdxAutocompleteItem>
+                                                <div rdxAutocompleteItem [class]="cell" [textValue]="item.name">
                                                     {{ item.emoji }}
                                                 </div>
                                             }
@@ -79,7 +79,7 @@ function chunk<T>(items: T[], size: number): T[][] {
                                 </div>
                             }
                         </div>
-                        <div [class]="c.empty" rdxAutocompleteEmpty>No emoji found.</div>
+                        <div rdxAutocompleteEmpty [class]="c.empty">No emoji found.</div>
                     </div>
                 </div>
             </div>
diff --git a/packages/primitives/autocomplete/stories/autocomplete-grouped.ts b/packages/primitives/autocomplete/stories/autocomplete-grouped.ts
index 18ac382e5..af65f44eb 100644
--- a/packages/primitives/autocomplete/stories/autocomplete-grouped.ts
+++ b/packages/primitives/autocomplete/stories/autocomplete-grouped.ts
@@ -1,6 +1,6 @@
-import { ChangeDetectionStrategy, Component, signal } from '@angular/core';
 import { demoCombobox } from '../../storybook/styles';
 import { _importsAutocomplete } from '../index';
+import { ChangeDetectionStrategy, Component, signal } from '@angular/core';
 
 interface Group {
     label: string;
@@ -12,24 +12,24 @@ interface Group {
     selector: 'autocomplete-grouped',
     imports: [_importsAutocomplete],
     template: `
-        <div [(value)]="value" rdxAutocompleteRoot>
-            <div [class]="c.control" rdxAutocompleteInputGroup>
-                <input [class]="c.input" rdxAutocompleteInput placeholder="e.g. fix" aria-label="Search tags" />
+        <div rdxAutocompleteRoot [(value)]="value">
+            <div rdxAutocompleteInputGroup [class]="c.control">
+                <input rdxAutocompleteInput placeholder="e.g. fix" aria-label="Search tags" [class]="c.input" />
             </div>
 
-            <div *rdxAutocompletePortal [class]="c.positioner" rdxAutocompletePositioner>
-                <div [class]="c.popup" rdxAutocompletePopup>
-                    <div [class]="c.list" rdxAutocompleteList aria-label="Tags">
+            <div *rdxAutocompletePortal rdxAutocompletePositioner [class]="c.positioner">
+                <div rdxAutocompletePopup [class]="c.popup">
+                    <div rdxAutocompleteList aria-label="Tags" [class]="c.list">
                         @for (group of groups; track group.label) {
                             <div rdxAutocompleteGroup>
-                                <div [class]="c.groupLabel" rdxAutocompleteGroupLabel>{{ group.label }}</div>
+                                <div rdxAutocompleteGroupLabel [class]="c.groupLabel">{{ group.label }}</div>
                                 @for (item of group.items; track item) {
-                                    <div [class]="c.item" rdxAutocompleteItem>{{ item }}</div>
+                                    <div rdxAutocompleteItem [class]="c.item">{{ item }}</div>
                                 }
                             </div>
                         }
                     </div>
-                    <div [class]="c.empty" rdxAutocompleteEmpty>No tags found.</div>
+                    <div rdxAutocompleteEmpty [class]="c.empty">No tags found.</div>
                 </div>
             </div>
         </div>
diff --git a/packages/primitives/autocomplete/stories/autocomplete-inline.ts b/packages/primitives/autocomplete/stories/autocomplete-inline.ts
index a18d89af0..398f34846 100644
--- a/packages/primitives/autocomplete/stories/autocomplete-inline.ts
+++ b/packages/primitives/autocomplete/stories/autocomplete-inline.ts
@@ -1,6 +1,6 @@
-import { ChangeDetectionStrategy, Component, signal } from '@angular/core';
 import { demoCombobox } from '../../storybook/styles';
 import { _importsAutocomplete } from '../index';
+import { ChangeDetectionStrategy, Component, signal } from '@angular/core';
 
 const TAGS = [
     'feature',
@@ -51,19 +51,19 @@ const TAGS = [
     selector: 'autocomplete-inline',
     imports: [_importsAutocomplete],
     template: `
-        <div [(value)]="value" mode="both" rdxAutocompleteRoot>
-            <div [class]="c.control" rdxAutocompleteInputGroup>
-                <input [class]="c.input" rdxAutocompleteInput placeholder="e.g. fix" aria-label="Search tags" />
+        <div mode="both" rdxAutocompleteRoot [(value)]="value">
+            <div rdxAutocompleteInputGroup [class]="c.control">
+                <input rdxAutocompleteInput placeholder="e.g. fix" aria-label="Search tags" [class]="c.input" />
             </div>
 
-            <div *rdxAutocompletePortal [class]="c.positioner" rdxAutocompletePositioner>
-                <div [class]="c.popup" rdxAutocompletePopup>
-                    <div [class]="c.list" rdxAutocompleteList aria-label="Tags">
+            <div *rdxAutocompletePortal rdxAutocompletePositioner [class]="c.positioner">
+                <div rdxAutocompletePopup [class]="c.popup">
+                    <div rdxAutocompleteList aria-label="Tags" [class]="c.list">
                         @for (tag of tags; track tag) {
-                            <div [class]="c.item" rdxAutocompleteItem>{{ tag }}</div>
+                            <div rdxAutocompleteItem [class]="c.item">{{ tag }}</div>
                         }
                     </div>
-                    <div [class]="c.empty" rdxAutocompleteEmpty>No tags found.</div>
+                    <div rdxAutocompleteEmpty [class]="c.empty">No tags found.</div>
                 </div>
             </div>
         </div>
diff --git a/packages/primitives/autocomplete/stories/autocomplete-limit.ts b/packages/primitives/autocomplete/stories/autocomplete-limit.ts
index e05266ee5..bcea176bb 100644
--- a/packages/primitives/autocomplete/stories/autocomplete-limit.ts
+++ b/packages/primitives/autocomplete/stories/autocomplete-limit.ts
@@ -1,25 +1,25 @@
-import { ChangeDetectionStrategy, Component, signal } from '@angular/core';
 import { demoCombobox } from '../../storybook/styles';
 import { _importsAutocomplete } from '../index';
+import { ChangeDetectionStrategy, Component, signal } from '@angular/core';
 
 @Component({
     changeDetection: ChangeDetectionStrategy.Eager,
     selector: 'autocomplete-limit',
     imports: [_importsAutocomplete],
     template: `
-        <div #ac="rdxAutocompleteRoot" [(value)]="value" [limit]="8" rdxAutocompleteRoot>
-            <div [class]="c.control" rdxAutocompleteInputGroup>
-                <input [class]="c.input" rdxAutocompleteInput placeholder="e.g. component" aria-label="Search tags" />
+        <div #ac="rdxAutocompleteRoot" rdxAutocompleteRoot [limit]="8" [(value)]="value">
+            <div rdxAutocompleteInputGroup [class]="c.control">
+                <input rdxAutocompleteInput placeholder="e.g. component" aria-label="Search tags" [class]="c.input" />
             </div>
 
-            <div *rdxAutocompletePortal [class]="c.positioner" rdxAutocompletePositioner>
-                <div [class]="c.popup" rdxAutocompletePopup>
-                    <div [class]="c.list" rdxAutocompleteList aria-label="Tags">
+            <div *rdxAutocompletePortal rdxAutocompletePositioner [class]="c.positioner">
+                <div rdxAutocompletePopup [class]="c.popup">
+                    <div rdxAutocompleteList aria-label="Tags" [class]="c.list">
                         @for (tag of tags; track tag) {
-                            <div [class]="c.item" rdxAutocompleteItem>{{ tag }}</div>
+                            <div rdxAutocompleteItem [class]="c.item">{{ tag }}</div>
                         }
                     </div>
-                    <div [class]="c.empty" rdxAutocompleteEmpty>No tags found.</div>
+                    <div rdxAutocompleteEmpty [class]="c.empty">No tags found.</div>
                     @if (hiddenCount(ac.value()); as hidden) {
                         <div class="text-muted-foreground border-border mt-1 border-t px-2 py-1 text-xs">
                             {{ hidden }} more {{ hidden === 1 ? 'result' : 'results' }} not shown
diff --git a/packages/primitives/autocomplete/stories/autocomplete-reactive-forms.ts b/packages/primitives/autocomplete/stories/autocomplete-reactive-forms.ts
index 4676760b0..bc1bbdc83 100644
--- a/packages/primitives/autocomplete/stories/autocomplete-reactive-forms.ts
+++ b/packages/primitives/autocomplete/stories/autocomplete-reactive-forms.ts
@@ -1,7 +1,7 @@
-import { ChangeDetectionStrategy, Component } from '@angular/core';
-import { FormControl, ReactiveFormsModule } from '@angular/forms';
 import { demoCombobox } from '../../storybook/styles';
 import { _importsAutocomplete } from '../index';
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { FormControl, ReactiveFormsModule } from '@angular/forms';
 
 /**
  * Reactive forms: the form value **is** the input string (typed or selected). Bind `[formControl]`
@@ -13,19 +13,19 @@ import { _importsAutocomplete } from '../index';
     imports: [_importsAutocomplete, ReactiveFormsModule],
     template: `
         <div class="flex flex-col gap-3">
-            <div [formControl]="fruit" rdxAutocompleteRoot>
-                <div [class]="c.control" rdxAutocompleteInputGroup>
-                    <input [class]="c.input" rdxAutocompleteInput placeholder="Search a fruit…" aria-label="Fruit" />
+            <div rdxAutocompleteRoot [formControl]="fruit">
+                <div rdxAutocompleteInputGroup [class]="c.control">
+                    <input rdxAutocompleteInput placeholder="Search a fruit…" aria-label="Fruit" [class]="c.input" />
                 </div>
 
-                <div *rdxAutocompletePortal [class]="c.positioner" rdxAutocompletePositioner>
-                    <div [class]="c.popup" rdxAutocompletePopup>
-                        <div [class]="c.list" rdxAutocompleteList aria-label="Fruits">
+                <div *rdxAutocompletePortal rdxAutocompletePositioner [class]="c.positioner">
+                    <div rdxAutocompletePopup [class]="c.popup">
+                        <div rdxAutocompleteList aria-label="Fruits" [class]="c.list">
                             @for (item of fruits; track item) {
-                                <div [class]="c.item" rdxAutocompleteItem>{{ item }}</div>
+                                <div rdxAutocompleteItem [class]="c.item">{{ item }}</div>
                             }
                         </div>
-                        <div [class]="c.empty" rdxAutocompleteEmpty>No fruit found.</div>
+                        <div rdxAutocompleteEmpty [class]="c.empty">No fruit found.</div>
                     </div>
                 </div>
             </div>
diff --git a/packages/primitives/autocomplete/stories/autocomplete-template-forms.ts b/packages/primitives/autocomplete/stories/autocomplete-template-forms.ts
index 54cfe5759..1d088ee33 100644
--- a/packages/primitives/autocomplete/stories/autocomplete-template-forms.ts
+++ b/packages/primitives/autocomplete/stories/autocomplete-template-forms.ts
@@ -1,7 +1,7 @@
-import { ChangeDetectionStrategy, Component, signal } from '@angular/core';
-import { FormsModule } from '@angular/forms';
 import { demoCombobox } from '../../storybook/styles';
 import { _importsAutocomplete } from '../index';
+import { ChangeDetectionStrategy, Component, signal } from '@angular/core';
+import { FormsModule } from '@angular/forms';
 
 /**
  * Template-driven forms: `[(ngModel)]` binds the input string two-way.
@@ -12,19 +12,19 @@ import { _importsAutocomplete } from '../index';
     imports: [_importsAutocomplete, FormsModule],
     template: `
         <div class="flex flex-col gap-3">
-            <div [(ngModel)]="value" rdxAutocompleteRoot>
-                <div [class]="c.control" rdxAutocompleteInputGroup>
-                    <input [class]="c.input" rdxAutocompleteInput placeholder="Search a fruit…" aria-label="Fruit" />
+            <div rdxAutocompleteRoot [(ngModel)]="value">
+                <div rdxAutocompleteInputGroup [class]="c.control">
+                    <input rdxAutocompleteInput placeholder="Search a fruit…" aria-label="Fruit" [class]="c.input" />
                 </div>
 
-                <div *rdxAutocompletePortal [class]="c.positioner" rdxAutocompletePositioner>
-                    <div [class]="c.popup" rdxAutocompletePopup>
-                        <div [class]="c.list" rdxAutocompleteList aria-label="Fruits">
+                <div *rdxAutocompletePortal rdxAutocompletePositioner [class]="c.positioner">
+                    <div rdxAutocompletePopup [class]="c.popup">
+                        <div rdxAutocompleteList aria-label="Fruits" [class]="c.list">
                             @for (item of fruits; track item) {
-                                <div [class]="c.item" rdxAutocompleteItem>{{ item }}</div>
+                                <div rdxAutocompleteItem [class]="c.item">{{ item }}</div>
                             }
                         </div>
-                        <div [class]="c.empty" rdxAutocompleteEmpty>No fruit found.</div>
+                        <div rdxAutocompleteEmpty [class]="c.empty">No fruit found.</div>
                     </div>
                 </div>
             </div>
diff --git a/packages/primitives/autocomplete/stories/autocomplete-validation.ts b/packages/primitives/autocomplete/stories/autocomplete-validation.ts
index e8311f89d..e4a8644f1 100644
--- a/packages/primitives/autocomplete/stories/autocomplete-validation.ts
+++ b/packages/primitives/autocomplete/stories/autocomplete-validation.ts
@@ -1,7 +1,7 @@
-import { ChangeDetectionStrategy, Component, signal } from '@angular/core';
-import { FormControl, ReactiveFormsModule, Validators } from '@angular/forms';
 import { cn, demoButton, demoCombobox } from '../../storybook/styles';
 import { _importsAutocomplete } from '../index';
+import { ChangeDetectionStrategy, Component, signal } from '@angular/core';
+import { FormControl, ReactiveFormsModule, Validators } from '@angular/forms';
 
 /**
  * Reactive forms with validation. The form value **is** the input string; its validity is bound to the
@@ -14,22 +14,22 @@ import { _importsAutocomplete } from '../index';
     imports: [_importsAutocomplete, ReactiveFormsModule],
     template: `
         <form class="flex flex-col gap-3" (ngSubmit)="onSubmit()">
-            <div [formControl]="fruit" [invalid]="showError()" rdxAutocompleteRoot>
+            <div rdxAutocompleteRoot [formControl]="fruit" [invalid]="showError()">
                 <div
-                    [class]="cn(c.control, showError() && 'border-destructive focus-within:ring-destructive')"
                     rdxAutocompleteInputGroup
+                    [class]="cn(c.control, showError() && 'border-destructive focus-within:ring-destructive')"
                 >
-                    <input [class]="c.input" rdxAutocompleteInput placeholder="Search a fruit…" aria-label="Fruit" />
+                    <input rdxAutocompleteInput placeholder="Search a fruit…" aria-label="Fruit" [class]="c.input" />
                 </div>
 
-                <div *rdxAutocompletePortal [class]="c.positioner" rdxAutocompletePositioner>
-                    <div [class]="c.popup" rdxAutocompletePopup>
-                        <div [class]="c.list" rdxAutocompleteList aria-label="Fruits">
+                <div *rdxAutocompletePortal rdxAutocompletePositioner [class]="c.positioner">
+                    <div rdxAutocompletePopup [class]="c.popup">
+                        <div rdxAutocompleteList aria-label="Fruits" [class]="c.list">
                             @for (item of fruits; track item) {
-                                <div [class]="c.item" rdxAutocompleteItem>{{ item }}</div>
+                                <div rdxAutocompleteItem [class]="c.item">{{ item }}</div>
                             }
                         </div>
-                        <div [class]="c.empty" rdxAutocompleteEmpty>No fruit found.</div>
+                        <div rdxAutocompleteEmpty [class]="c.empty">No fruit found.</div>
                     </div>
                 </div>
             </div>
@@ -38,7 +38,7 @@ import { _importsAutocomplete } from '../index';
                 <p class="text-destructive text-sm">Please enter a fruit.</p>
             }
 
-            <button [class]="cn(b.base, b.primary, b.size.md, 'self-start')" type="submit">Submit</button>
+            <button type="submit" [class]="cn(b.base, b.primary, b.size.md, 'self-start')">Submit</button>
 
             @if (submitted()) {
                 <p class="text-muted-foreground text-sm">Submitted ✓</p>
diff --git a/packages/primitives/autocomplete/stories/autocomplete-virtualized.ts b/packages/primitives/autocomplete/stories/autocomplete-virtualized.ts
index 9b63e2e24..4c05ccc71 100644
--- a/packages/primitives/autocomplete/stories/autocomplete-virtualized.ts
+++ b/packages/primitives/autocomplete/stories/autocomplete-virtualized.ts
@@ -1,7 +1,7 @@
-import { ChangeDetectionStrategy, Component, ElementRef, signal, viewChild } from '@angular/core';
-import { injectVirtualizer } from '@tanstack/angular-virtual';
 import { cn, demoCombobox } from '../../storybook/styles';
 import { _importsAutocomplete, AutocompleteItemHighlightedDetails, RdxAutocompleteRoot } from '../index';
+import { ChangeDetectionStrategy, Component, ElementRef, signal, viewChild } from '@angular/core';
+import { injectVirtualizer } from '@tanstack/angular-virtual';
 
 /**
  * Externally virtualized list of 10,000 items. The autocomplete owns filtering and index navigation
@@ -16,30 +16,30 @@ import { _importsAutocomplete, AutocompleteItemHighlightedDetails, RdxAutocomple
     template: `
         <div
             #ac="rdxAutocompleteRoot"
-            [(value)]="value"
-            [items]="items"
-            (onItemHighlighted)="onHighlight($event)"
             virtualized
             rdxAutocompleteRoot
+            [items]="items"
+            [(value)]="value"
+            (onItemHighlighted)="onHighlight($event)"
         >
-            <div [class]="c.control" rdxAutocompleteInputGroup>
-                <input [class]="c.input" rdxAutocompleteInput placeholder="Search 10,000 items…" aria-label="Item" />
+            <div rdxAutocompleteInputGroup [class]="c.control">
+                <input rdxAutocompleteInput placeholder="Search 10,000 items…" aria-label="Item" [class]="c.input" />
             </div>
 
-            <div *rdxAutocompletePortal [class]="c.positioner" rdxAutocompletePositioner>
-                <div [class]="popup" rdxAutocompletePopup>
-                    <div [class]="c.empty" rdxAutocompleteEmpty>No items found.</div>
-                    <div [class]="c.list" rdxAutocompleteList aria-label="Items">
+            <div *rdxAutocompletePortal rdxAutocompletePositioner [class]="c.positioner">
+                <div rdxAutocompletePopup [class]="popup">
+                    <div rdxAutocompleteEmpty [class]="c.empty">No items found.</div>
+                    <div rdxAutocompleteList aria-label="Items" [class]="c.list">
                         <div #scroll [class]="scroller">
                             <div [class]="spacer" [style.height.px]="virtualizer.getTotalSize()">
                                 @for (row of virtualizer.getVirtualItems(); track row.key) {
                                     <div
+                                        rdxAutocompleteItem
                                         [class]="item"
                                         [value]="ac.filteredItems()[row.index]"
                                         [index]="row.index"
                                         [style.height.px]="row.size"
                                         [style.transform]="'translateY(' + row.start + 'px)'"
-                                        rdxAutocompleteItem
                                     >
                                         {{ ac.filteredItems()[row.index] }}
                                     </div>
diff --git a/packages/primitives/autocomplete/stories/autocomplete.stories.ts b/packages/primitives/autocomplete/stories/autocomplete.stories.ts
index 2a1ba54d8..5a001fa79 100644
--- a/packages/primitives/autocomplete/stories/autocomplete.stories.ts
+++ b/packages/primitives/autocomplete/stories/autocomplete.stories.ts
@@ -1,4 +1,3 @@
-import { Meta, moduleMetadata, StoryObj } from '@storybook/angular';
 import { tailwindDemoDecorator } from '../../storybook/tailwind-demo';
 import { AutocompleteAsync } from './autocomplete-async';
 import asyncSource from './autocomplete-async?raw';
@@ -28,6 +27,7 @@ import { AutocompleteValidation } from './autocomplete-validation';
 import validationSource from './autocomplete-validation?raw';
 import { AutocompleteVirtualizedExample } from './autocomplete-virtualized';
 import virtualizedSource from './autocomplete-virtualized?raw';
+import { Meta, moduleMetadata, StoryObj } from '@storybook/angular';
 
 const html = String.raw;
 
diff --git a/packages/primitives/avatar/__tests__/avatar-fallback.directive.spec.ts b/packages/primitives/avatar/__tests__/avatar-fallback.directive.spec.ts
index 60e25f087..c101cc4db 100644
--- a/packages/primitives/avatar/__tests__/avatar-fallback.directive.spec.ts
+++ b/packages/primitives/avatar/__tests__/avatar-fallback.directive.spec.ts
@@ -1,9 +1,9 @@
+import { RdxAvatarFallbackDirective } from '../src/avatar-fallback.directive';
+import { RdxAvatarRootDirective } from '../src/avatar-root.directive';
 import { ChangeDetectionStrategy, Component, PLATFORM_ID } from '@angular/core';
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { By } from '@angular/platform-browser';
 import { afterEach, vi } from 'vitest';
-import { RdxAvatarFallbackDirective } from '../src/avatar-fallback.directive';
-import { RdxAvatarRootDirective } from '../src/avatar-root.directive';
 
 @Component({
     changeDetection: ChangeDetectionStrategy.Eager,
@@ -12,7 +12,7 @@ import { RdxAvatarRootDirective } from '../src/avatar-root.directive';
     imports: [RdxAvatarFallbackDirective, RdxAvatarRootDirective],
     template: `
         <span rdxAvatarRoot>
-            <span [delayMs]="delay" rdxAvatarFallback>fallback</span>
+            <span rdxAvatarFallback [delayMs]="delay">fallback</span>
             <span rdxAvatarFallback>fallback2</span>
         </span>
     `
diff --git a/packages/primitives/avatar/__tests__/avatar-image.directive.spec.ts b/packages/primitives/avatar/__tests__/avatar-image.directive.spec.ts
index 3946e3da7..fbb7374c9 100644
--- a/packages/primitives/avatar/__tests__/avatar-image.directive.spec.ts
+++ b/packages/primitives/avatar/__tests__/avatar-image.directive.spec.ts
@@ -1,9 +1,9 @@
-import { ChangeDetectionStrategy, Component } from '@angular/core';
-import { ComponentFixture, TestBed } from '@angular/core/testing';
-import { By } from '@angular/platform-browser';
 import { RdxAvatarFallbackDirective } from '../src/avatar-fallback.directive';
 import { RdxAvatarImageDirective } from '../src/avatar-image.directive';
 import { RdxAvatarRootDirective } from '../src/avatar-root.directive';
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { By } from '@angular/platform-browser';
 
 @Component({
     changeDetection: ChangeDetectionStrategy.Eager,
diff --git a/packages/primitives/avatar/index.ts b/packages/primitives/avatar/index.ts
index e040b5a8b..88e33d218 100644
--- a/packages/primitives/avatar/index.ts
+++ b/packages/primitives/avatar/index.ts
@@ -1,13 +1,13 @@
-import { NgModule } from '@angular/core';
 import { RdxAvatarFallbackDirective } from './src/avatar-fallback.directive';
 import { RdxAvatarImageDirective } from './src/avatar-image.directive';
 import { RdxAvatarRootDirective } from './src/avatar-root.directive';
+import { NgModule } from '@angular/core';
 
+export * from './src/avatar.config';
 export * from './src/avatar-context.token';
 export * from './src/avatar-fallback.directive';
 export * from './src/avatar-image.directive';
 export * from './src/avatar-root.directive';
-export * from './src/avatar.config';
 export type { HTMLAttributeReferrerPolicy, RdxImageLoadingStatus } from './src/types';
 
 const _imports = [RdxAvatarRootDirective, RdxAvatarFallbackDirective, RdxAvatarImageDirective];
diff --git a/packages/primitives/avatar/src/avatar-context.token.ts b/packages/primitives/avatar/src/avatar-context.token.ts
index b56e81da1..2e589811d 100644
--- a/packages/primitives/avatar/src/avatar-context.token.ts
+++ b/packages/primitives/avatar/src/avatar-context.token.ts
@@ -1,6 +1,6 @@
+import { RdxImageLoadingStatus } from './types';
 import { WritableSignal } from '@angular/core';
 import { createContext } from '@radix-ng/primitives/core';
-import { RdxImageLoadingStatus } from './types';
 
 export interface AvatarRootContext {
     imageLoadingStatus: WritableSignal<RdxImageLoadingStatus>;
diff --git a/packages/primitives/avatar/src/avatar-fallback.directive.ts b/packages/primitives/avatar/src/avatar-fallback.directive.ts
index e53a3526e..850abc95d 100644
--- a/packages/primitives/avatar/src/avatar-fallback.directive.ts
+++ b/packages/primitives/avatar/src/avatar-fallback.directive.ts
@@ -1,7 +1,7 @@
+import { injectAvatarConfig } from './avatar.config';
+import { injectAvatarRootContext } from './avatar-context.token';
 import { Directive, input, signal } from '@angular/core';
 import { watch } from '@radix-ng/primitives/core';
-import { injectAvatarRootContext } from './avatar-context.token';
-import { injectAvatarConfig } from './avatar.config';
 
 /**
  * @group Components
diff --git a/packages/primitives/avatar/src/avatar-image.directive.ts b/packages/primitives/avatar/src/avatar-image.directive.ts
index 1f5100772..222767565 100644
--- a/packages/primitives/avatar/src/avatar-image.directive.ts
+++ b/packages/primitives/avatar/src/avatar-image.directive.ts
@@ -1,8 +1,8 @@
+import { injectAvatarRootContext } from './avatar-context.token';
+import { HTMLAttributeReferrerPolicy, RdxImageLoadingStatus } from './types';
 import { isPlatformBrowser } from '@angular/common';
 import { Directive, inject, input, output, PLATFORM_ID, signal } from '@angular/core';
 import { watch } from '@radix-ng/primitives/core';
-import { injectAvatarRootContext } from './avatar-context.token';
-import { HTMLAttributeReferrerPolicy, RdxImageLoadingStatus } from './types';
 
 /**
  * @group Components
diff --git a/packages/primitives/avatar/src/avatar-root.directive.ts b/packages/primitives/avatar/src/avatar-root.directive.ts
index fb9eb1c4f..497ee7a90 100644
--- a/packages/primitives/avatar/src/avatar-root.directive.ts
+++ b/packages/primitives/avatar/src/avatar-root.directive.ts
@@ -1,6 +1,6 @@
-import { Directive, inject, signal } from '@angular/core';
 import { AvatarRootContext, provideAvatarRootContext } from './avatar-context.token';
 import { RdxImageLoadingStatus } from './types';
+import { Directive, inject, signal } from '@angular/core';
 
 const rootContext = (): AvatarRootContext => {
     const root = inject(RdxAvatarRootDirective);
diff --git a/packages/primitives/avatar/stories/avatar.stories.ts b/packages/primitives/avatar/stories/avatar.stories.ts
index c7542e677..338d2e443 100644
--- a/packages/primitives/avatar/stories/avatar.stories.ts
+++ b/packages/primitives/avatar/stories/avatar.stories.ts
@@ -1,4 +1,3 @@
-import { Meta, moduleMetadata, StoryObj } from '@storybook/angular';
 import { tailwindDemoDecorator } from '../../storybook/tailwind-demo';
 import { RdxAvatarFallbackDirective } from '../src/avatar-fallback.directive';
 import { RdxAvatarImageDirective } from '../src/avatar-image.directive';
@@ -9,6 +8,7 @@ import {
     RdxAvatarFallbackComponent,
     RdxAvatarSizesComponent
 } from './avatar';
+import { Meta, moduleMetadata, StoryObj } from '@storybook/angular';
 
 const html = String.raw;
 
diff --git a/packages/primitives/avatar/stories/avatar.ts b/packages/primitives/avatar/stories/avatar.ts
index 197b9e815..a4ed0c7e0 100644
--- a/packages/primitives/avatar/stories/avatar.ts
+++ b/packages/primitives/avatar/stories/avatar.ts
@@ -1,8 +1,8 @@
-import { ChangeDetectionStrategy, Component } from '@angular/core';
 import { cn, demoAvatar } from '../../storybook/styles';
 import { RdxAvatarFallbackDirective } from '../src/avatar-fallback.directive';
 import { RdxAvatarImageDirective } from '../src/avatar-image.directive';
 import { RdxAvatarRootDirective } from '../src/avatar-root.directive';
+import { ChangeDetectionStrategy, Component } from '@angular/core';
 
 const IMG_COLM = 'https://images.unsplash.com/photo-1492633423870-43d1cd2775eb?&w=128&h=128&dpr=2&q=80';
 const IMG_PEDRO = 'https://images.unsplash.com/photo-1511485977113-f34c92461ad9?ixlib=rb-1.2.1&w=128&h=128&dpr=2&q=80';
@@ -18,14 +18,14 @@ const AVATAR_DIRECTIVES = [RdxAvatarRootDirective, RdxAvatarImageDirective, RdxA
     imports: AVATAR_DIRECTIVES,
     template: `
         <div class="flex items-center gap-4">
-            <span [class]="cn(a.root, a.size.md)" rdxAvatarRoot>
-                <img [class]="a.image" [src]="imgColm" rdxAvatarImage alt="Colm Tuite" />
-                <span [class]="a.fallback" [delayMs]="600" rdxAvatarFallback>CT</span>
+            <span rdxAvatarRoot [class]="cn(a.root, a.size.md)">
+                <img rdxAvatarImage alt="Colm Tuite" [class]="a.image" [src]="imgColm" />
+                <span rdxAvatarFallback [class]="a.fallback" [delayMs]="600">CT</span>
             </span>
 
-            <span [class]="cn(a.root, a.size.md)" rdxAvatarRoot>
-                <img [class]="a.image" [src]="imgPedro" rdxAvatarImage alt="Pedro Duarte" />
-                <span [class]="a.fallback" [delayMs]="600" rdxAvatarFallback>PD</span>
+            <span rdxAvatarRoot [class]="cn(a.root, a.size.md)">
+                <img rdxAvatarImage alt="Pedro Duarte" [class]="a.image" [src]="imgPedro" />
+                <span rdxAvatarFallback [class]="a.fallback" [delayMs]="600">PD</span>
             </span>
         </div>
     `
@@ -46,17 +46,17 @@ export class RdxAvatarDemoComponent {
     imports: AVATAR_DIRECTIVES,
     template: `
         <div class="flex items-center gap-4">
-            <span [class]="cn(a.root, a.size.sm)" rdxAvatarRoot>
-                <img [class]="a.image" [src]="img" rdxAvatarImage alt="Colm Tuite" />
-                <span [class]="a.fallback" rdxAvatarFallback>CT</span>
+            <span rdxAvatarRoot [class]="cn(a.root, a.size.sm)">
+                <img rdxAvatarImage alt="Colm Tuite" [class]="a.image" [src]="img" />
+                <span rdxAvatarFallback [class]="a.fallback">CT</span>
             </span>
-            <span [class]="cn(a.root, a.size.md)" rdxAvatarRoot>
-                <img [class]="a.image" [src]="img" rdxAvatarImage alt="Colm Tuite" />
-                <span [class]="a.fallback" rdxAvatarFallback>CT</span>
+            <span rdxAvatarRoot [class]="cn(a.root, a.size.md)">
+                <img rdxAvatarImage alt="Colm Tuite" [class]="a.image" [src]="img" />
+                <span rdxAvatarFallback [class]="a.fallback">CT</span>
             </span>
-            <span [class]="cn(a.root, a.size.lg)" rdxAvatarRoot>
-                <img [class]="a.image" [src]="img" rdxAvatarImage alt="Colm Tuite" />
-                <span [class]="a.fallback" rdxAvatarFallback>CT</span>
+            <span rdxAvatarRoot [class]="cn(a.root, a.size.lg)">
+                <img rdxAvatarImage alt="Colm Tuite" [class]="a.image" [src]="img" />
+                <span rdxAvatarFallback [class]="a.fallback">CT</span>
             </span>
         </div>
     `
@@ -77,14 +77,14 @@ export class RdxAvatarSizesComponent {
     template: `
         <div class="flex items-center gap-4">
             <!-- no image at all -->
-            <span [class]="cn(a.root, a.size.md)" rdxAvatarRoot>
-                <span [class]="a.fallback" rdxAvatarFallback>PD</span>
+            <span rdxAvatarRoot [class]="cn(a.root, a.size.md)">
+                <span rdxAvatarFallback [class]="a.fallback">PD</span>
             </span>
 
             <!-- image that fails to load -->
-            <span [class]="cn(a.root, a.size.md)" rdxAvatarRoot>
-                <img [class]="a.image" rdxAvatarImage alt="Broken" src="" />
-                <span [class]="a.fallback" rdxAvatarFallback>JD</span>
+            <span rdxAvatarRoot [class]="cn(a.root, a.size.md)">
+                <img rdxAvatarImage alt="Broken" src="" [class]="a.image" />
+                <span rdxAvatarFallback [class]="a.fallback">JD</span>
             </span>
         </div>
     `
@@ -103,9 +103,9 @@ export class RdxAvatarFallbackComponent {
     selector: 'rdx-avatar-delay',
     imports: AVATAR_DIRECTIVES,
     template: `
-        <span [class]="cn(a.root, a.size.md)" rdxAvatarRoot>
-            <img [class]="a.image" rdxAvatarImage alt="Slow" src="https://invalid.example/none.png" />
-            <span [class]="a.fallback" [delayMs]="600" rdxAvatarFallback>RN</span>
+        <span rdxAvatarRoot [class]="cn(a.root, a.size.md)">
+            <img rdxAvatarImage alt="Slow" src="https://invalid.example/none.png" [class]="a.image" />
+            <span rdxAvatarFallback [class]="a.fallback" [delayMs]="600">RN</span>
         </span>
     `
 })
diff --git a/packages/primitives/button/__tests__/button.directive.spec.ts b/packages/primitives/button/__tests__/button.directive.spec.ts
index 8258b8884..a0a4bf0c3 100644
--- a/packages/primitives/button/__tests__/button.directive.spec.ts
+++ b/packages/primitives/button/__tests__/button.directive.spec.ts
@@ -1,18 +1,18 @@
+import { RdxButtonDirective } from '../src/button.directive';
 import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { By } from '@angular/platform-browser';
-import { RdxButtonDirective } from '../src/button.directive';
 
 @Component({
     changeDetection: ChangeDetectionStrategy.Eager,
     imports: [RdxButtonDirective],
     template: `
         <button
+            rdxButton
             [disabled]="disabled"
             [focusableWhenDisabled]="focusableWhenDisabled"
             [type]="type"
             (click)="onClick()"
-            rdxButton
         >
             Button
         </button>
@@ -33,7 +33,7 @@ class NativeButtonHost {
     imports: [RdxButtonDirective],
     template: `
         <!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events -->
-        <a [disabled]="disabled" (click)="onClick()" rdxButton>Link</a>
+        <a rdxButton [disabled]="disabled" (click)="onClick()">Link</a>
     `
 })
 class AnchorHost {
diff --git a/packages/primitives/button/index.ts b/packages/primitives/button/index.ts
index 241d34d1c..8ec83660e 100644
--- a/packages/primitives/button/index.ts
+++ b/packages/primitives/button/index.ts
@@ -1,3 +1,2 @@
-export * from './src/button.directive';
-
 export type { RdxButtonProps, RdxButtonType } from './src/button.directive';
+export * from './src/button.directive';
diff --git a/packages/primitives/button/stories/button-as-link.ts b/packages/primitives/button/stories/button-as-link.ts
index 71162250e..d76ad3715 100644
--- a/packages/primitives/button/stories/button-as-link.ts
+++ b/packages/primitives/button/stories/button-as-link.ts
@@ -1,6 +1,6 @@
-import { ChangeDetectionStrategy, Component } from '@angular/core';
 import { cn, demoButton } from '../../storybook/styles';
 import { RdxButtonDirective } from '../src/button.directive';
+import { ChangeDetectionStrategy, Component } from '@angular/core';
 
 /**
  * The directive works on any host. Here it renders an `<a>` as a button while
@@ -11,7 +11,7 @@ import { RdxButtonDirective } from '../src/button.directive';
     selector: 'rdx-button-as-link',
     imports: [RdxButtonDirective],
     template: `
-        <a [class]="cn(b.base, b.secondary, b.size.md)" rdxButton href="https://base-ui.com" target="_blank">
+        <a rdxButton href="https://base-ui.com" target="_blank" [class]="cn(b.base, b.secondary, b.size.md)">
             Open Base UI
         </a>
     `
diff --git a/packages/primitives/button/stories/button-disabled.ts b/packages/primitives/button/stories/button-disabled.ts
index 6620a3361..32b8edda0 100644
--- a/packages/primitives/button/stories/button-disabled.ts
+++ b/packages/primitives/button/stories/button-disabled.ts
@@ -1,6 +1,6 @@
-import { ChangeDetectionStrategy, Component } from '@angular/core';
 import { cn, demoButton } from '../../storybook/styles';
 import { RdxButtonDirective } from '../src/button.directive';
+import { ChangeDetectionStrategy, Component } from '@angular/core';
 
 /**
  * Disabled handling. The first button uses the native `disabled` attribute
@@ -13,8 +13,8 @@ import { RdxButtonDirective } from '../src/button.directive';
     imports: [RdxButtonDirective],
     template: `
         <div class="flex flex-wrap items-center gap-3">
-            <button [class]="cn(b.base, b.primary, b.size.md)" rdxButton disabled>Disabled</button>
-            <button [class]="cn(b.base, b.outline, b.size.md)" rdxButton disabled focusableWhenDisabled>
+            <button rdxButton disabled [class]="cn(b.base, b.primary, b.size.md)">Disabled</button>
+            <button rdxButton disabled focusableWhenDisabled [class]="cn(b.base, b.outline, b.size.md)">
                 Disabled (focusable)
             </button>
         </div>
diff --git a/packages/primitives/button/stories/button-loading.ts b/packages/primitives/button/stories/button-loading.ts
index 78923bb07..e859e2f57 100644
--- a/packages/primitives/button/stories/button-loading.ts
+++ b/packages/primitives/button/stories/button-loading.ts
@@ -1,7 +1,7 @@
-import { ChangeDetectionStrategy, Component, signal } from '@angular/core';
-import { LucideDynamicIcon, LucidePlus } from '@lucide/angular';
 import { cn, demoButton } from '../../storybook/styles';
 import { RdxButtonDirective } from '../src/button.directive';
+import { ChangeDetectionStrategy, Component, signal } from '@angular/core';
+import { LucideDynamicIcon, LucidePlus } from '@lucide/angular';
 
 /**
  * Loading state. Following Base UI's guidance, the button becomes `disabled`
@@ -14,18 +14,18 @@ import { RdxButtonDirective } from '../src/button.directive';
     imports: [RdxButtonDirective, LucideDynamicIcon, LucidePlus],
     template: `
         <button
+            rdxButton
+            focusableWhenDisabled
             [disabled]="loading()"
             [attr.aria-busy]="loading() ? 'true' : null"
             [class]="cn(b.base, b.primary, b.size.md)"
             (click)="run()"
-            rdxButton
-            focusableWhenDisabled
         >
             <svg
                 class="flex"
+                size="16"
                 [lucideIcon]="loading() ? 'loader-circle' : 'save'"
                 [class.animate-spin]="loading()"
-                size="16"
             />
             {{ loading() ? 'Saving…' : 'Save' }}
         </button>
diff --git a/packages/primitives/button/stories/button-sizes.ts b/packages/primitives/button/stories/button-sizes.ts
index 9d79d1e88..7d626b259 100644
--- a/packages/primitives/button/stories/button-sizes.ts
+++ b/packages/primitives/button/stories/button-sizes.ts
@@ -1,7 +1,7 @@
-import { ChangeDetectionStrategy, Component } from '@angular/core';
-import { LucideDynamicIcon, LucidePlus } from '@lucide/angular';
 import { cn, demoButton } from '../../storybook/styles';
 import { RdxButtonDirective } from '../src/button.directive';
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { LucideDynamicIcon, LucidePlus } from '@lucide/angular';
 
 /**
  * Sizes, including a square icon button.
@@ -12,10 +12,10 @@ import { RdxButtonDirective } from '../src/button.directive';
     imports: [RdxButtonDirective, LucideDynamicIcon, LucidePlus],
     template: `
         <div class="flex flex-wrap items-center gap-3">
-            <button [class]="cn(b.base, b.primary, b.size.sm)" rdxButton>Small</button>
-            <button [class]="cn(b.base, b.primary, b.size.md)" rdxButton>Medium</button>
-            <button [class]="cn(b.base, b.primary, b.size.lg)" rdxButton>Large</button>
-            <button [class]="cn(b.base, b.primary, b.size.icon)" rdxButton aria-label="Add">
+            <button rdxButton [class]="cn(b.base, b.primary, b.size.sm)">Small</button>
+            <button rdxButton [class]="cn(b.base, b.primary, b.size.md)">Medium</button>
+            <button rdxButton [class]="cn(b.base, b.primary, b.size.lg)">Large</button>
+            <button rdxButton aria-label="Add" [class]="cn(b.base, b.primary, b.size.icon)">
                 <svg class="flex" lucidePlus size="16" />
             </button>
         </div>
diff --git a/packages/primitives/button/stories/button-variants.ts b/packages/primitives/button/stories/button-variants.ts
index 23d5deddf..7a6d87813 100644
--- a/packages/primitives/button/stories/button-variants.ts
+++ b/packages/primitives/button/stories/button-variants.ts
@@ -1,6 +1,6 @@
-import { ChangeDetectionStrategy, Component } from '@angular/core';
 import { cn, demoButton } from '../../storybook/styles';
 import { RdxButtonDirective } from '../src/button.directive';
+import { ChangeDetectionStrategy, Component } from '@angular/core';
 
 /**
  * Visual variants — the recommended `demoButton` styling from the centralized
@@ -12,11 +12,11 @@ import { RdxButtonDirective } from '../src/button.directive';
     imports: [RdxButtonDirective],
     template: `
         <div class="flex flex-wrap items-center gap-3">
-            <button [class]="cn(b.base, b.primary, b.size.md)" rdxButton>Primary</button>
-            <button [class]="cn(b.base, b.secondary, b.size.md)" rdxButton>Secondary</button>
-            <button [class]="cn(b.base, b.outline, b.size.md)" rdxButton>Outline</button>
-            <button [class]="cn(b.base, b.ghost, b.size.md)" rdxButton>Ghost</button>
-            <button [class]="cn(b.base, b.destructive, b.size.md)" rdxButton>Destructive</button>
+            <button rdxButton [class]="cn(b.base, b.primary, b.size.md)">Primary</button>
+            <button rdxButton [class]="cn(b.base, b.secondary, b.size.md)">Secondary</button>
+            <button rdxButton [class]="cn(b.base, b.outline, b.size.md)">Outline</button>
+            <button rdxButton [class]="cn(b.base, b.ghost, b.size.md)">Ghost</button>
+            <button rdxButton [class]="cn(b.base, b.destructive, b.size.md)">Destructive</button>
         </div>
     `
 })
diff --git a/packages/primitives/button/stories/button.stories.ts b/packages/primitives/button/stories/button.stories.ts
index 7138dd91e..0e4665d4d 100644
--- a/packages/primitives/button/stories/button.stories.ts
+++ b/packages/primitives/button/stories/button.stories.ts
@@ -1,19 +1,18 @@
-import { Meta, moduleMetadata, StoryObj } from '@storybook/angular';
 import { cn, demoButton } from '../../storybook/styles';
 import { tailwindDemoDecorator } from '../../storybook/tailwind-demo';
 import { RdxButtonDirective } from '../src/button.directive';
 import { RdxButtonAsLinkComponent } from './button-as-link';
-import { RdxButtonDisabledComponent } from './button-disabled';
-import { RdxButtonLoadingComponent } from './button-loading';
-import { RdxButtonSizesComponent } from './button-sizes';
-import { RdxButtonVariantsComponent } from './button-variants';
-
 // Full component source for the "Show code" panel (Vite `?raw` import).
 import asLinkSource from './button-as-link?raw';
+import { RdxButtonDisabledComponent } from './button-disabled';
 import disabledSource from './button-disabled?raw';
+import { RdxButtonLoadingComponent } from './button-loading';
 import loadingSource from './button-loading?raw';
+import { RdxButtonSizesComponent } from './button-sizes';
 import sizesSource from './button-sizes?raw';
+import { RdxButtonVariantsComponent } from './button-variants';
 import variantsSource from './button-variants?raw';
+import { Meta, moduleMetadata, StoryObj } from '@storybook/angular';
 
 const source = (code: string) => ({
     docs: {
diff --git a/packages/primitives/calendar/__tests__/calendar.spec.ts b/packages/primitives/calendar/__tests__/calendar.spec.ts
index b0ef6093f..e7ec5a99e 100644
--- a/packages/primitives/calendar/__tests__/calendar.spec.ts
+++ b/packages/primitives/calendar/__tests__/calendar.spec.ts
@@ -1,8 +1,8 @@
+import { CalendarDefault } from '../stories/calendar-default';
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { CalendarDate, CalendarDateTime, DateValue, toZoned } from '@internationalized/date';
 import { userEvent } from '@testing-library/user-event';
 import { axe } from 'jest-axe';
-import { CalendarDefault } from '../stories/calendar-default';
 
 type SetupConfig = {
     modelValue?: DateValue;
diff --git a/packages/primitives/calendar/index.ts b/packages/primitives/calendar/index.ts
index 333055d4b..85da8c348 100644
--- a/packages/primitives/calendar/index.ts
+++ b/packages/primitives/calendar/index.ts
@@ -1,11 +1,23 @@
+import { RdxCalendarCellDirective } from './src/calendar-cell.directive';
+import { RdxCalendarCellTriggerDirective } from './src/calendar-cell-trigger.directive';
+import { RdxCalendarGridDirective } from './src/calendar-grid.directive';
+import { RdxCalendarGridBodyDirective } from './src/calendar-grid-body.directive';
+import { RdxCalendarGridHeadDirective } from './src/calendar-grid-head.directive';
+import { RdxCalendarGridRowDirective } from './src/calendar-grid-row.directive';
+import { RdxCalendarHeadCellDirective } from './src/calendar-head-cell.directive';
+import { RdxCalendarHeaderDirective } from './src/calendar-header.directive';
+import { RdxCalendarHeadingDirective } from './src/calendar-heading.directive';
+import { RdxCalendarNextDirective } from './src/calendar-next.directive';
+import { RdxCalendarPrevDirective } from './src/calendar-prev.directive';
+import { RdxCalendarRootDirective } from './src/calendar-root.directive';
 import { NgModule } from '@angular/core';
 
-export { RdxCalendarCellTriggerDirective } from './src/calendar-cell-trigger.directive';
 export { RdxCalendarCellDirective } from './src/calendar-cell.directive';
+export { RdxCalendarCellTriggerDirective } from './src/calendar-cell-trigger.directive';
+export { RdxCalendarGridDirective } from './src/calendar-grid.directive';
 export { RdxCalendarGridBodyDirective } from './src/calendar-grid-body.directive';
 export { RdxCalendarGridHeadDirective } from './src/calendar-grid-head.directive';
 export { RdxCalendarGridRowDirective } from './src/calendar-grid-row.directive';
-export { RdxCalendarGridDirective } from './src/calendar-grid.directive';
 export { RdxCalendarHeadCellDirective } from './src/calendar-head-cell.directive';
 export { RdxCalendarHeaderDirective } from './src/calendar-header.directive';
 export { RdxCalendarHeadingDirective } from './src/calendar-heading.directive';
@@ -13,19 +25,6 @@ export { RdxCalendarNextDirective } from './src/calendar-next.directive';
 export { RdxCalendarPrevDirective } from './src/calendar-prev.directive';
 export { RdxCalendarRootDirective } from './src/calendar-root.directive';
 
-import { RdxCalendarCellTriggerDirective } from './src/calendar-cell-trigger.directive';
-import { RdxCalendarCellDirective } from './src/calendar-cell.directive';
-import { RdxCalendarGridBodyDirective } from './src/calendar-grid-body.directive';
-import { RdxCalendarGridHeadDirective } from './src/calendar-grid-head.directive';
-import { RdxCalendarGridRowDirective } from './src/calendar-grid-row.directive';
-import { RdxCalendarGridDirective } from './src/calendar-grid.directive';
-import { RdxCalendarHeadCellDirective } from './src/calendar-head-cell.directive';
-import { RdxCalendarHeaderDirective } from './src/calendar-header.directive';
-import { RdxCalendarHeadingDirective } from './src/calendar-heading.directive';
-import { RdxCalendarNextDirective } from './src/calendar-next.directive';
-import { RdxCalendarPrevDirective } from './src/calendar-prev.directive';
-import { RdxCalendarRootDirective } from './src/calendar-root.directive';
-
 const _imports = [
     RdxCalendarCellTriggerDirective,
     RdxCalendarCellDirective,
diff --git a/packages/primitives/calendar/src/calendar-cell-trigger.directive.ts b/packages/primitives/calendar/src/calendar-cell-trigger.directive.ts
index 63ba0b76f..101d4ca5d 100644
--- a/packages/primitives/calendar/src/calendar-cell-trigger.directive.ts
+++ b/packages/primitives/calendar/src/calendar-cell-trigger.directive.ts
@@ -1,8 +1,8 @@
+import { injectCalendarRootContext } from './calendar-context.token';
 import { computed, Directive, ElementRef, inject, input } from '@angular/core';
 import { DateValue, getLocalTimeZone, isSameDay, isSameMonth, isToday } from '@internationalized/date';
 import * as kbd from '@radix-ng/primitives/core';
 import { getDaysInMonth, toDate } from '@radix-ng/primitives/core';
-import { injectCalendarRootContext } from './calendar-context.token';
 
 @Directive({
     selector: '[rdxCalendarCellTrigger]',
diff --git a/packages/primitives/calendar/src/calendar-cell.directive.ts b/packages/primitives/calendar/src/calendar-cell.directive.ts
index e082c091d..3d52dd5dc 100644
--- a/packages/primitives/calendar/src/calendar-cell.directive.ts
+++ b/packages/primitives/calendar/src/calendar-cell.directive.ts
@@ -1,6 +1,6 @@
+import { injectCalendarRootContext } from './calendar-context.token';
 import { Directive, input } from '@angular/core';
 import { DateValue } from '@internationalized/date';
-import { injectCalendarRootContext } from './calendar-context.token';
 
 @Directive({
     selector: 'td[rdxCalendarCell]',
diff --git a/packages/primitives/calendar/src/calendar-grid.directive.ts b/packages/primitives/calendar/src/calendar-grid.directive.ts
index 872d11cfc..1e9afd3c3 100644
--- a/packages/primitives/calendar/src/calendar-grid.directive.ts
+++ b/packages/primitives/calendar/src/calendar-grid.directive.ts
@@ -1,5 +1,5 @@
-import { computed, Directive } from '@angular/core';
 import { injectCalendarRootContext } from './calendar-context.token';
+import { computed, Directive } from '@angular/core';
 
 @Directive({
     selector: 'table[rdxCalendarGrid]',
diff --git a/packages/primitives/calendar/src/calendar-heading.directive.ts b/packages/primitives/calendar/src/calendar-heading.directive.ts
index 79ab2bff7..859c65d2d 100644
--- a/packages/primitives/calendar/src/calendar-heading.directive.ts
+++ b/packages/primitives/calendar/src/calendar-heading.directive.ts
@@ -1,5 +1,5 @@
-import { computed, Directive } from '@angular/core';
 import { injectCalendarRootContext } from './calendar-context.token';
+import { computed, Directive } from '@angular/core';
 
 @Directive({
     selector: 'div[rdxCalendarHeading]',
diff --git a/packages/primitives/calendar/src/calendar-next.directive.ts b/packages/primitives/calendar/src/calendar-next.directive.ts
index 62578bd59..a2d14a666 100644
--- a/packages/primitives/calendar/src/calendar-next.directive.ts
+++ b/packages/primitives/calendar/src/calendar-next.directive.ts
@@ -1,6 +1,6 @@
+import { injectCalendarRootContext } from './calendar-context.token';
 import { computed, Directive, input } from '@angular/core';
 import { DateValue } from '@internationalized/date';
-import { injectCalendarRootContext } from './calendar-context.token';
 
 @Directive({
     selector: 'button[rdxCalendarNext]',
diff --git a/packages/primitives/calendar/src/calendar-prev.directive.ts b/packages/primitives/calendar/src/calendar-prev.directive.ts
index 18579c095..388a96467 100644
--- a/packages/primitives/calendar/src/calendar-prev.directive.ts
+++ b/packages/primitives/calendar/src/calendar-prev.directive.ts
@@ -1,6 +1,6 @@
+import { injectCalendarRootContext } from './calendar-context.token';
 import { computed, Directive, input } from '@angular/core';
 import { DateValue } from '@internationalized/date';
-import { injectCalendarRootContext } from './calendar-context.token';
 
 @Directive({
     selector: 'button[rdxCalendarPrev]',
diff --git a/packages/primitives/calendar/src/calendar-root.directive.ts b/packages/primitives/calendar/src/calendar-root.directive.ts
index 2cb4e5732..fc1f98887 100644
--- a/packages/primitives/calendar/src/calendar-root.directive.ts
+++ b/packages/primitives/calendar/src/calendar-root.directive.ts
@@ -1,3 +1,5 @@
+import { calendar, calendarState } from './calendar';
+import { CALENDAR_ROOT_CONTEXT } from './calendar-context.token';
 import {
     booleanAttribute,
     computed,
@@ -21,8 +23,6 @@ import {
     watch
 } from '@radix-ng/primitives/core';
 import { injectDirection } from '@radix-ng/primitives/direction-provider';
-import { calendar, calendarState } from './calendar';
-import { CALENDAR_ROOT_CONTEXT } from './calendar-context.token';
 
 @Directive({
     selector: '[rdxCalendarRoot]',
diff --git a/packages/primitives/calendar/stories/calendar-custom-navigation.ts b/packages/primitives/calendar/stories/calendar-custom-navigation.ts
index 91b803126..50fd7bb97 100644
--- a/packages/primitives/calendar/stories/calendar-custom-navigation.ts
+++ b/packages/primitives/calendar/stories/calendar-custom-navigation.ts
@@ -1,18 +1,18 @@
-import { ChangeDetectionStrategy, Component } from '@angular/core';
-import { CalendarDate, DateValue } from '@internationalized/date';
-import { LucideChevronLeft, LucideChevronRight } from '@lucide/angular';
 import { cn, demoCalendar } from '../../storybook/styles';
-import { RdxCalendarCellTriggerDirective } from '../src/calendar-cell-trigger.directive';
 import { RdxCalendarCellDirective } from '../src/calendar-cell.directive';
+import { RdxCalendarCellTriggerDirective } from '../src/calendar-cell-trigger.directive';
+import { RdxCalendarGridDirective } from '../src/calendar-grid.directive';
 import { RdxCalendarGridBodyDirective } from '../src/calendar-grid-body.directive';
 import { RdxCalendarGridHeadDirective } from '../src/calendar-grid-head.directive';
-import { RdxCalendarGridDirective } from '../src/calendar-grid.directive';
 import { RdxCalendarHeadCellDirective } from '../src/calendar-head-cell.directive';
 import { RdxCalendarHeaderDirective } from '../src/calendar-header.directive';
 import { RdxCalendarHeadingDirective } from '../src/calendar-heading.directive';
 import { RdxCalendarNextDirective } from '../src/calendar-next.directive';
 import { RdxCalendarPrevDirective } from '../src/calendar-prev.directive';
 import { RdxCalendarRootDirective } from '../src/calendar-root.directive';
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { CalendarDate, DateValue } from '@internationalized/date';
+import { LucideChevronLeft, LucideChevronRight } from '@lucide/angular';
 
 @Component({
     changeDetection: ChangeDetectionStrategy.Eager,
@@ -35,43 +35,43 @@ import { RdxCalendarRootDirective } from '../src/calendar-root.directive';
     template: `
         <div
             #root="rdxCalendarRoot"
+            rdxCalendarRoot
+            fixedWeeks
             [class]="c.root"
             [value]="date"
             [propsNextPage]="nextYear"
             [propsPrevPage]="prevYear"
-            rdxCalendarRoot
-            fixedWeeks
         >
-            <div [class]="c.header" rdxCalendarHeader>
-                <button [class]="c.nav" type="button" rdxCalendarPrev>
+            <div rdxCalendarHeader [class]="c.header">
+                <button type="button" rdxCalendarPrev [class]="c.nav">
                     <svg lucideChevronLeft size="16" />
                 </button>
-                <div #head="rdxCalendarHeading" [class]="c.heading" rdxCalendarHeading>{{ head.headingValue() }}</div>
-                <button [class]="c.nav" type="button" rdxCalendarNext>
+                <div #head="rdxCalendarHeading" rdxCalendarHeading [class]="c.heading">{{ head.headingValue() }}</div>
+                <button type="button" rdxCalendarNext [class]="c.nav">
                     <svg lucideChevronRight size="16" />
                 </button>
             </div>
 
-            <table [class]="c.grid" rdxCalendarGrid>
+            <table rdxCalendarGrid [class]="c.grid">
                 @for (month of root.months(); track $index) {
                     <thead rdxCalendarGridHead>
                         <tr [class]="c.headRow">
                             @for (day of root.weekDays(); track $index) {
-                                <th [class]="c.headCell" rdxCalendarHeadCell>{{ day }}</th>
+                                <th rdxCalendarHeadCell [class]="c.headCell">{{ day }}</th>
                             }
                         </tr>
                     </thead>
-                    <tbody [class]="c.body" rdxCalendarGridBody>
+                    <tbody rdxCalendarGridBody [class]="c.body">
                         @for (weekDates of month.weeks; track $index) {
                             <tr [class]="c.weekRow">
                                 @for (weekDate of weekDates; track $index) {
-                                    <td [class]="c.cell" [date]="weekDate" rdxCalendarCell>
+                                    <td rdxCalendarCell [class]="c.cell" [date]="weekDate">
                                         <div
                                             #cell="rdxCalendarCellTrigger"
+                                            rdxCalendarCellTrigger
                                             [class]="c.day"
                                             [day]="weekDate"
                                             [month]="month.value"
-                                            rdxCalendarCellTrigger
                                         >
                                             {{ cell.dayValue() }}
                                         </div>
diff --git a/packages/primitives/calendar/stories/calendar-default.ts b/packages/primitives/calendar/stories/calendar-default.ts
index 64c52101d..7e4a47255 100644
--- a/packages/primitives/calendar/stories/calendar-default.ts
+++ b/packages/primitives/calendar/stories/calendar-default.ts
@@ -1,18 +1,18 @@
-import { ChangeDetectionStrategy, Component } from '@angular/core';
-import { CalendarDate, DateValue } from '@internationalized/date';
-import { LucideChevronLeft, LucideChevronRight } from '@lucide/angular';
 import { cn, demoCalendar } from '../../storybook/styles';
-import { RdxCalendarCellTriggerDirective } from '../src/calendar-cell-trigger.directive';
 import { RdxCalendarCellDirective } from '../src/calendar-cell.directive';
+import { RdxCalendarCellTriggerDirective } from '../src/calendar-cell-trigger.directive';
+import { RdxCalendarGridDirective } from '../src/calendar-grid.directive';
 import { RdxCalendarGridBodyDirective } from '../src/calendar-grid-body.directive';
 import { RdxCalendarGridHeadDirective } from '../src/calendar-grid-head.directive';
-import { RdxCalendarGridDirective } from '../src/calendar-grid.directive';
 import { RdxCalendarHeadCellDirective } from '../src/calendar-head-cell.directive';
 import { RdxCalendarHeaderDirective } from '../src/calendar-header.directive';
 import { RdxCalendarHeadingDirective } from '../src/calendar-heading.directive';
 import { RdxCalendarNextDirective } from '../src/calendar-next.directive';
 import { RdxCalendarPrevDirective } from '../src/calendar-prev.directive';
 import { RdxCalendarRootDirective } from '../src/calendar-root.directive';
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { CalendarDate, DateValue } from '@internationalized/date';
+import { LucideChevronLeft, LucideChevronRight } from '@lucide/angular';
 
 @Component({
     changeDetection: ChangeDetectionStrategy.Eager,
@@ -33,37 +33,37 @@ import { RdxCalendarRootDirective } from '../src/calendar-root.directive';
         LucideChevronRight
     ],
     template: `
-        <div #root="rdxCalendarRoot" [class]="c.root" [value]="date" rdxCalendarRoot fixedWeeks>
-            <div [class]="c.header" rdxCalendarHeader>
-                <button [class]="c.nav" type="button" rdxCalendarPrev>
+        <div #root="rdxCalendarRoot" rdxCalendarRoot fixedWeeks [class]="c.root" [value]="date">
+            <div rdxCalendarHeader [class]="c.header">
+                <button type="button" rdxCalendarPrev [class]="c.nav">
                     <svg lucideChevronLeft size="16" />
                 </button>
-                <div #head="rdxCalendarHeading" [class]="c.heading" rdxCalendarHeading>{{ head.headingValue() }}</div>
-                <button [class]="c.nav" type="button" rdxCalendarNext>
+                <div #head="rdxCalendarHeading" rdxCalendarHeading [class]="c.heading">{{ head.headingValue() }}</div>
+                <button type="button" rdxCalendarNext [class]="c.nav">
                     <svg lucideChevronRight size="16" />
                 </button>
             </div>
 
-            <table [class]="c.grid" rdxCalendarGrid>
+            <table rdxCalendarGrid [class]="c.grid">
                 @for (month of root.months(); track $index) {
                     <thead rdxCalendarGridHead>
                         <tr [class]="c.headRow">
                             @for (day of root.weekDays(); track $index) {
-                                <th [class]="c.headCell" rdxCalendarHeadCell>{{ day }}</th>
+                                <th rdxCalendarHeadCell [class]="c.headCell">{{ day }}</th>
                             }
                         </tr>
                     </thead>
-                    <tbody [class]="c.body" rdxCalendarGridBody>
+                    <tbody rdxCalendarGridBody [class]="c.body">
                         @for (weekDates of month.weeks; track $index) {
                             <tr [class]="c.weekRow">
                                 @for (weekDate of weekDates; track $index) {
-                                    <td [class]="c.cell" [date]="weekDate" rdxCalendarCell>
+                                    <td rdxCalendarCell [class]="c.cell" [date]="weekDate">
                                         <div
                                             #cell="rdxCalendarCellTrigger"
+                                            rdxCalendarCellTrigger
                                             [class]="c.day"
                                             [day]="weekDate"
                                             [month]="month.value"
-                                            rdxCalendarCellTrigger
                                         >
                                             {{ cell.dayValue() }}
                                         </div>
diff --git a/packages/primitives/calendar/stories/calendar-disabled-dates.ts b/packages/primitives/calendar/stories/calendar-disabled-dates.ts
index e05f386ab..b3451f8ec 100644
--- a/packages/primitives/calendar/stories/calendar-disabled-dates.ts
+++ b/packages/primitives/calendar/stories/calendar-disabled-dates.ts
@@ -1,18 +1,18 @@
-import { ChangeDetectionStrategy, Component } from '@angular/core';
-import { CalendarDate, DateValue, isWeekend } from '@internationalized/date';
-import { LucideChevronLeft, LucideChevronRight } from '@lucide/angular';
 import { cn, demoCalendar } from '../../storybook/styles';
-import { RdxCalendarCellTriggerDirective } from '../src/calendar-cell-trigger.directive';
 import { RdxCalendarCellDirective } from '../src/calendar-cell.directive';
+import { RdxCalendarCellTriggerDirective } from '../src/calendar-cell-trigger.directive';
+import { RdxCalendarGridDirective } from '../src/calendar-grid.directive';
 import { RdxCalendarGridBodyDirective } from '../src/calendar-grid-body.directive';
 import { RdxCalendarGridHeadDirective } from '../src/calendar-grid-head.directive';
-import { RdxCalendarGridDirective } from '../src/calendar-grid.directive';
 import { RdxCalendarHeadCellDirective } from '../src/calendar-head-cell.directive';
 import { RdxCalendarHeaderDirective } from '../src/calendar-header.directive';
 import { RdxCalendarHeadingDirective } from '../src/calendar-heading.directive';
 import { RdxCalendarNextDirective } from '../src/calendar-next.directive';
 import { RdxCalendarPrevDirective } from '../src/calendar-prev.directive';
 import { RdxCalendarRootDirective } from '../src/calendar-root.directive';
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { CalendarDate, DateValue, isWeekend } from '@internationalized/date';
+import { LucideChevronLeft, LucideChevronRight } from '@lucide/angular';
 
 @Component({
     changeDetection: ChangeDetectionStrategy.Eager,
@@ -35,42 +35,42 @@ import { RdxCalendarRootDirective } from '../src/calendar-root.directive';
     template: `
         <div
             #root="rdxCalendarRoot"
+            rdxCalendarRoot
+            fixedWeeks
             [class]="c.root"
             [value]="date"
             [isDateDisabled]="isDateDisabled"
-            rdxCalendarRoot
-            fixedWeeks
         >
-            <div [class]="c.header" rdxCalendarHeader>
-                <button [class]="c.nav" type="button" rdxCalendarPrev>
+            <div rdxCalendarHeader [class]="c.header">
+                <button type="button" rdxCalendarPrev [class]="c.nav">
                     <svg lucideChevronLeft size="16" />
                 </button>
-                <div #head="rdxCalendarHeading" [class]="c.heading" rdxCalendarHeading>{{ head.headingValue() }}</div>
-                <button [class]="c.nav" type="button" rdxCalendarNext>
+                <div #head="rdxCalendarHeading" rdxCalendarHeading [class]="c.heading">{{ head.headingValue() }}</div>
+                <button type="button" rdxCalendarNext [class]="c.nav">
                     <svg lucideChevronRight size="16" />
                 </button>
             </div>
 
-            <table [class]="c.grid" rdxCalendarGrid>
+            <table rdxCalendarGrid [class]="c.grid">
                 @for (month of root.months(); track $index) {
                     <thead rdxCalendarGridHead>
                         <tr [class]="c.headRow">
                             @for (day of root.weekDays(); track $index) {
-                                <th [class]="c.headCell" rdxCalendarHeadCell>{{ day }}</th>
+                                <th rdxCalendarHeadCell [class]="c.headCell">{{ day }}</th>
                             }
                         </tr>
                     </thead>
-                    <tbody [class]="c.body" rdxCalendarGridBody>
+                    <tbody rdxCalendarGridBody [class]="c.body">
                         @for (weekDates of month.weeks; track $index) {
                             <tr [class]="c.weekRow">
                                 @for (weekDate of weekDates; track $index) {
-                                    <td [class]="c.cell" [date]="weekDate" rdxCalendarCell>
+                                    <td rdxCalendarCell [class]="c.cell" [date]="weekDate">
                                         <div
                                             #cell="rdxCalendarCellTrigger"
+                                            rdxCalendarCellTrigger
                                             [class]="c.day"
                                             [day]="weekDate"
                                             [month]="month.value"
-                                            rdxCalendarCellTrigger
                                         >
                                             {{ cell.dayValue() }}
                                         </div>
diff --git a/packages/primitives/calendar/stories/calendar-multiple.ts b/packages/primitives/calendar/stories/calendar-multiple.ts
index 8e3ad09ea..60d31db40 100644
--- a/packages/primitives/calendar/stories/calendar-multiple.ts
+++ b/packages/primitives/calendar/stories/calendar-multiple.ts
@@ -1,18 +1,18 @@
-import { ChangeDetectionStrategy, Component, signal } from '@angular/core';
-import { CalendarDate } from '@internationalized/date';
-import { LucideChevronLeft, LucideChevronRight } from '@lucide/angular';
 import { cn, demoCalendar } from '../../storybook/styles';
-import { RdxCalendarCellTriggerDirective } from '../src/calendar-cell-trigger.directive';
 import { RdxCalendarCellDirective } from '../src/calendar-cell.directive';
+import { RdxCalendarCellTriggerDirective } from '../src/calendar-cell-trigger.directive';
+import { RdxCalendarGridDirective } from '../src/calendar-grid.directive';
 import { RdxCalendarGridBodyDirective } from '../src/calendar-grid-body.directive';
 import { RdxCalendarGridHeadDirective } from '../src/calendar-grid-head.directive';
-import { RdxCalendarGridDirective } from '../src/calendar-grid.directive';
 import { RdxCalendarHeadCellDirective } from '../src/calendar-head-cell.directive';
 import { RdxCalendarHeaderDirective } from '../src/calendar-header.directive';
 import { RdxCalendarHeadingDirective } from '../src/calendar-heading.directive';
 import { RdxCalendarNextDirective } from '../src/calendar-next.directive';
 import { RdxCalendarPrevDirective } from '../src/calendar-prev.directive';
 import { RdxCalendarRootDirective } from '../src/calendar-root.directive';
+import { ChangeDetectionStrategy, Component, signal } from '@angular/core';
+import { CalendarDate } from '@internationalized/date';
+import { LucideChevronLeft, LucideChevronRight } from '@lucide/angular';
 
 @Component({
     changeDetection: ChangeDetectionStrategy.Eager,
@@ -33,37 +33,37 @@ import { RdxCalendarRootDirective } from '../src/calendar-root.directive';
         LucideChevronRight
     ],
     template: `
-        <div #root="rdxCalendarRoot" [class]="c.root" [value]="value()" rdxCalendarRoot multiple fixedWeeks>
-            <div [class]="c.header" rdxCalendarHeader>
-                <button [class]="c.nav" type="button" rdxCalendarPrev>
+        <div #root="rdxCalendarRoot" rdxCalendarRoot multiple fixedWeeks [class]="c.root" [value]="value()">
+            <div rdxCalendarHeader [class]="c.header">
+                <button type="button" rdxCalendarPrev [class]="c.nav">
                     <svg lucideChevronLeft size="16" />
                 </button>
-                <div #head="rdxCalendarHeading" [class]="c.heading" rdxCalendarHeading>{{ head.headingValue() }}</div>
-                <button [class]="c.nav" type="button" rdxCalendarNext>
+                <div #head="rdxCalendarHeading" rdxCalendarHeading [class]="c.heading">{{ head.headingValue() }}</div>
+                <button type="button" rdxCalendarNext [class]="c.nav">
                     <svg lucideChevronRight size="16" />
                 </button>
             </div>
 
-            <table [class]="c.grid" rdxCalendarGrid>
+            <table rdxCalendarGrid [class]="c.grid">
                 @for (month of root.months(); track $index) {
                     <thead rdxCalendarGridHead>
                         <tr [class]="c.headRow">
                             @for (day of root.weekDays(); track $index) {
-                                <th [class]="c.headCell" rdxCalendarHeadCell>{{ day }}</th>
+                                <th rdxCalendarHeadCell [class]="c.headCell">{{ day }}</th>
                             }
                         </tr>
                     </thead>
-                    <tbody [class]="c.body" rdxCalendarGridBody>
+                    <tbody rdxCalendarGridBody [class]="c.body">
                         @for (weekDates of month.weeks; track $index) {
                             <tr [class]="c.weekRow">
                                 @for (weekDate of weekDates; track $index) {
-                                    <td [class]="c.cell" [date]="weekDate" rdxCalendarCell>
+                                    <td rdxCalendarCell [class]="c.cell" [date]="weekDate">
                                         <div
                                             #cell="rdxCalendarCellTrigger"
+                                            rdxCalendarCellTrigger
                                             [class]="c.day"
                                             [day]="weekDate"
                                             [month]="month.value"
-                                            rdxCalendarCellTrigger
                                         >
                                             {{ cell.dayValue() }}
                                         </div>
diff --git a/packages/primitives/calendar/stories/calendar-number-of-months.ts b/packages/primitives/calendar/stories/calendar-number-of-months.ts
index 216a7cebe..093f178d5 100644
--- a/packages/primitives/calendar/stories/calendar-number-of-months.ts
+++ b/packages/primitives/calendar/stories/calendar-number-of-months.ts
@@ -1,18 +1,18 @@
-import { ChangeDetectionStrategy, Component } from '@angular/core';
-import { CalendarDate, DateValue } from '@internationalized/date';
-import { LucideChevronLeft, LucideChevronRight } from '@lucide/angular';
 import { cn, demoCalendar } from '../../storybook/styles';
-import { RdxCalendarCellTriggerDirective } from '../src/calendar-cell-trigger.directive';
 import { RdxCalendarCellDirective } from '../src/calendar-cell.directive';
+import { RdxCalendarCellTriggerDirective } from '../src/calendar-cell-trigger.directive';
+import { RdxCalendarGridDirective } from '../src/calendar-grid.directive';
 import { RdxCalendarGridBodyDirective } from '../src/calendar-grid-body.directive';
 import { RdxCalendarGridHeadDirective } from '../src/calendar-grid-head.directive';
-import { RdxCalendarGridDirective } from '../src/calendar-grid.directive';
 import { RdxCalendarHeadCellDirective } from '../src/calendar-head-cell.directive';
 import { RdxCalendarHeaderDirective } from '../src/calendar-header.directive';
 import { RdxCalendarHeadingDirective } from '../src/calendar-heading.directive';
 import { RdxCalendarNextDirective } from '../src/calendar-next.directive';
 import { RdxCalendarPrevDirective } from '../src/calendar-prev.directive';
 import { RdxCalendarRootDirective } from '../src/calendar-root.directive';
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { CalendarDate, DateValue } from '@internationalized/date';
+import { LucideChevronLeft, LucideChevronRight } from '@lucide/angular';
 
 @Component({
     changeDetection: ChangeDetectionStrategy.Eager,
@@ -34,19 +34,19 @@ import { RdxCalendarRootDirective } from '../src/calendar-root.directive';
     ],
     template: `
         <div
-            class="border-border bg-background rounded-xl border p-4 shadow-sm"
             #root="rdxCalendarRoot"
-            [value]="date"
-            [numberOfMonths]="2"
+            class="border-border bg-background rounded-xl border p-4 shadow-sm"
             rdxCalendarRoot
             fixedWeeks
+            [value]="date"
+            [numberOfMonths]="2"
         >
-            <div [class]="c.header" rdxCalendarHeader>
-                <button [class]="c.nav" type="button" rdxCalendarPrev>
+            <div rdxCalendarHeader [class]="c.header">
+                <button type="button" rdxCalendarPrev [class]="c.nav">
                     <svg lucideChevronLeft size="16" />
                 </button>
-                <div #head="rdxCalendarHeading" [class]="c.heading" rdxCalendarHeading>{{ head.headingValue() }}</div>
-                <button [class]="c.nav" type="button" rdxCalendarNext>
+                <div #head="rdxCalendarHeading" rdxCalendarHeading [class]="c.heading">{{ head.headingValue() }}</div>
+                <button type="button" rdxCalendarNext [class]="c.nav">
                     <svg lucideChevronRight size="16" />
                 </button>
             </div>
@@ -57,21 +57,21 @@ import { RdxCalendarRootDirective } from '../src/calendar-root.directive';
                         <thead rdxCalendarGridHead>
                             <tr [class]="c.headRow">
                                 @for (day of root.weekDays(); track $index) {
-                                    <th [class]="c.headCell" rdxCalendarHeadCell>{{ day }}</th>
+                                    <th rdxCalendarHeadCell [class]="c.headCell">{{ day }}</th>
                                 }
                             </tr>
                         </thead>
-                        <tbody [class]="c.body" rdxCalendarGridBody>
+                        <tbody rdxCalendarGridBody [class]="c.body">
                             @for (weekDates of month.weeks; track $index) {
                                 <tr [class]="c.weekRow">
                                     @for (weekDate of weekDates; track $index) {
-                                        <td [class]="c.cell" [date]="weekDate" rdxCalendarCell>
+                                        <td rdxCalendarCell [class]="c.cell" [date]="weekDate">
                                             <div
                                                 #cell="rdxCalendarCellTrigger"
+                                                rdxCalendarCellTrigger
                                                 [class]="c.day"
                                                 [day]="weekDate"
                                                 [month]="month.value"
-                                                rdxCalendarCellTrigger
                                             >
                                                 {{ cell.dayValue() }}
                                             </div>
diff --git a/packages/primitives/calendar/stories/calendar-unavailable-dates.ts b/packages/primitives/calendar/stories/calendar-unavailable-dates.ts
index 9dda70d53..a656b4f3b 100644
--- a/packages/primitives/calendar/stories/calendar-unavailable-dates.ts
+++ b/packages/primitives/calendar/stories/calendar-unavailable-dates.ts
@@ -1,18 +1,18 @@
-import { ChangeDetectionStrategy, Component } from '@angular/core';
-import { CalendarDate, DateValue } from '@internationalized/date';
-import { LucideChevronLeft, LucideChevronRight } from '@lucide/angular';
 import { cn, demoCalendar } from '../../storybook/styles';
-import { RdxCalendarCellTriggerDirective } from '../src/calendar-cell-trigger.directive';
 import { RdxCalendarCellDirective } from '../src/calendar-cell.directive';
+import { RdxCalendarCellTriggerDirective } from '../src/calendar-cell-trigger.directive';
+import { RdxCalendarGridDirective } from '../src/calendar-grid.directive';
 import { RdxCalendarGridBodyDirective } from '../src/calendar-grid-body.directive';
 import { RdxCalendarGridHeadDirective } from '../src/calendar-grid-head.directive';
-import { RdxCalendarGridDirective } from '../src/calendar-grid.directive';
 import { RdxCalendarHeadCellDirective } from '../src/calendar-head-cell.directive';
 import { RdxCalendarHeaderDirective } from '../src/calendar-header.directive';
 import { RdxCalendarHeadingDirective } from '../src/calendar-heading.directive';
 import { RdxCalendarNextDirective } from '../src/calendar-next.directive';
 import { RdxCalendarPrevDirective } from '../src/calendar-prev.directive';
 import { RdxCalendarRootDirective } from '../src/calendar-root.directive';
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { CalendarDate, DateValue } from '@internationalized/date';
+import { LucideChevronLeft, LucideChevronRight } from '@lucide/angular';
 
 @Component({
     changeDetection: ChangeDetectionStrategy.Eager,
@@ -35,42 +35,42 @@ import { RdxCalendarRootDirective } from '../src/calendar-root.directive';
     template: `
         <div
             #root="rdxCalendarRoot"
+            rdxCalendarRoot
+            fixedWeeks
             [class]="c.root"
             [value]="date"
             [isDateUnavailable]="isDateUnavailable"
-            rdxCalendarRoot
-            fixedWeeks
         >
-            <div [class]="c.header" rdxCalendarHeader>
-                <button [class]="c.nav" type="button" rdxCalendarPrev>
+            <div rdxCalendarHeader [class]="c.header">
+                <button type="button" rdxCalendarPrev [class]="c.nav">
                     <svg lucideChevronLeft size="16" />
                 </button>
-                <div #head="rdxCalendarHeading" [class]="c.heading" rdxCalendarHeading>{{ head.headingValue() }}</div>
-                <button [class]="c.nav" type="button" rdxCalendarNext>
+                <div #head="rdxCalendarHeading" rdxCalendarHeading [class]="c.heading">{{ head.headingValue() }}</div>
+                <button type="button" rdxCalendarNext [class]="c.nav">
                     <svg lucideChevronRight size="16" />
                 </button>
             </div>
 
-            <table [class]="c.grid" rdxCalendarGrid>
+            <table rdxCalendarGrid [class]="c.grid">
                 @for (month of root.months(); track $index) {
                     <thead rdxCalendarGridHead>
                         <tr [class]="c.headRow">
                             @for (day of root.weekDays(); track $index) {
-                                <th [class]="c.headCell" rdxCalendarHeadCell>{{ day }}</th>
+                                <th rdxCalendarHeadCell [class]="c.headCell">{{ day }}</th>
                             }
                         </tr>
                     </thead>
-                    <tbody [class]="c.body" rdxCalendarGridBody>
+                    <tbody rdxCalendarGridBody [class]="c.body">
                         @for (weekDates of month.weeks; track $index) {
                             <tr [class]="c.weekRow">
                                 @for (weekDate of weekDates; track $index) {
-                                    <td [class]="c.cell" [date]="weekDate" rdxCalendarCell>
+                                    <td rdxCalendarCell [class]="c.cell" [date]="weekDate">
                                         <div
                                             #cell="rdxCalendarCellTrigger"
+                                            rdxCalendarCellTrigger
                                             [class]="c.day"
                                             [day]="weekDate"
                                             [month]="month.value"
-                                            rdxCalendarCellTrigger
                                         >
                                             {{ cell.dayValue() }}
                                         </div>
diff --git a/packages/primitives/calendar/stories/calendar-week.ts b/packages/primitives/calendar/stories/calendar-week.ts
index f6096fbf9..206ba826c 100644
--- a/packages/primitives/calendar/stories/calendar-week.ts
+++ b/packages/primitives/calendar/stories/calendar-week.ts
@@ -1,19 +1,19 @@
-import { ChangeDetectionStrategy, Component } from '@angular/core';
-import { CalendarDate, DateValue } from '@internationalized/date';
-import { LucideChevronLeft, LucideChevronRight } from '@lucide/angular';
-import { getWeekNumber } from '@radix-ng/primitives/core';
 import { cn, demoCalendar } from '../../storybook/styles';
-import { RdxCalendarCellTriggerDirective } from '../src/calendar-cell-trigger.directive';
 import { RdxCalendarCellDirective } from '../src/calendar-cell.directive';
+import { RdxCalendarCellTriggerDirective } from '../src/calendar-cell-trigger.directive';
+import { RdxCalendarGridDirective } from '../src/calendar-grid.directive';
 import { RdxCalendarGridBodyDirective } from '../src/calendar-grid-body.directive';
 import { RdxCalendarGridHeadDirective } from '../src/calendar-grid-head.directive';
-import { RdxCalendarGridDirective } from '../src/calendar-grid.directive';
 import { RdxCalendarHeadCellDirective } from '../src/calendar-head-cell.directive';
 import { RdxCalendarHeaderDirective } from '../src/calendar-header.directive';
 import { RdxCalendarHeadingDirective } from '../src/calendar-heading.directive';
 import { RdxCalendarNextDirective } from '../src/calendar-next.directive';
 import { RdxCalendarPrevDirective } from '../src/calendar-prev.directive';
 import { RdxCalendarRootDirective } from '../src/calendar-root.directive';
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { CalendarDate, DateValue } from '@internationalized/date';
+import { LucideChevronLeft, LucideChevronRight } from '@lucide/angular';
+import { getWeekNumber } from '@radix-ng/primitives/core';
 
 @Component({
     changeDetection: ChangeDetectionStrategy.Eager,
@@ -34,41 +34,41 @@ import { RdxCalendarRootDirective } from '../src/calendar-root.directive';
         LucideChevronRight
     ],
     template: `
-        <div #root="rdxCalendarRoot" [class]="c.root" [value]="date" rdxCalendarRoot fixedWeeks>
-            <div [class]="c.header" rdxCalendarHeader>
-                <button [class]="c.nav" type="button" rdxCalendarPrev>
+        <div #root="rdxCalendarRoot" rdxCalendarRoot fixedWeeks [class]="c.root" [value]="date">
+            <div rdxCalendarHeader [class]="c.header">
+                <button type="button" rdxCalendarPrev [class]="c.nav">
                     <svg lucideChevronLeft size="16" />
                 </button>
-                <div #head="rdxCalendarHeading" [class]="c.heading" rdxCalendarHeading>{{ head.headingValue() }}</div>
-                <button [class]="c.nav" type="button" rdxCalendarNext>
+                <div #head="rdxCalendarHeading" rdxCalendarHeading [class]="c.heading">{{ head.headingValue() }}</div>
+                <button type="button" rdxCalendarNext [class]="c.nav">
                     <svg lucideChevronRight size="16" />
                 </button>
             </div>
 
-            <table [class]="c.grid" rdxCalendarGrid>
+            <table rdxCalendarGrid [class]="c.grid">
                 @for (month of root.months(); track $index) {
                     <thead rdxCalendarGridHead>
                         <tr class="mt-4 grid w-full grid-cols-8">
-                            <th [class]="c.headCell" rdxCalendarHeadCell>Wk</th>
+                            <th rdxCalendarHeadCell [class]="c.headCell">Wk</th>
                             @for (day of root.weekDays(); track $index) {
-                                <th [class]="c.headCell" rdxCalendarHeadCell>{{ day }}</th>
+                                <th rdxCalendarHeadCell [class]="c.headCell">{{ day }}</th>
                             }
                         </tr>
                     </thead>
-                    <tbody [class]="c.body" rdxCalendarGridBody>
+                    <tbody rdxCalendarGridBody [class]="c.body">
                         @for (weekDates of month.weeks; track $index) {
                             <tr class="grid grid-cols-8">
                                 <div class="text-muted-foreground flex items-center justify-center text-xs">
                                     {{ getWeekNumber(weekDates[0]) }}
                                 </div>
                                 @for (weekDate of weekDates; track $index) {
-                                    <td [class]="c.cell" [date]="weekDate" rdxCalendarCell>
+                                    <td rdxCalendarCell [class]="c.cell" [date]="weekDate">
                                         <div
                                             #cell="rdxCalendarCellTrigger"
+                                            rdxCalendarCellTrigger
                                             [class]="c.day"
                                             [day]="weekDate"
                                             [month]="month.value"
-                                            rdxCalendarCellTrigger
                                         >
                                             {{ cell.dayValue() }}
                                         </div>
diff --git a/packages/primitives/calendar/stories/calendar-with-locale.ts b/packages/primitives/calendar/stories/calendar-with-locale.ts
index ed5535094..7c1d95bbc 100644
--- a/packages/primitives/calendar/stories/calendar-with-locale.ts
+++ b/packages/primitives/calendar/stories/calendar-with-locale.ts
@@ -1,18 +1,18 @@
-import { ChangeDetectionStrategy, Component, computed, signal } from '@angular/core';
-import { CalendarIdentifier, createCalendar, getLocalTimeZone, toCalendar, today } from '@internationalized/date';
-import { LucideChevronLeft, LucideChevronRight } from '@lucide/angular';
 import { cn, demoCalendar, demoInput } from '../../storybook/styles';
-import { RdxCalendarCellTriggerDirective } from '../src/calendar-cell-trigger.directive';
 import { RdxCalendarCellDirective } from '../src/calendar-cell.directive';
+import { RdxCalendarCellTriggerDirective } from '../src/calendar-cell-trigger.directive';
+import { RdxCalendarGridDirective } from '../src/calendar-grid.directive';
 import { RdxCalendarGridBodyDirective } from '../src/calendar-grid-body.directive';
 import { RdxCalendarGridHeadDirective } from '../src/calendar-grid-head.directive';
-import { RdxCalendarGridDirective } from '../src/calendar-grid.directive';
 import { RdxCalendarHeadCellDirective } from '../src/calendar-head-cell.directive';
 import { RdxCalendarHeaderDirective } from '../src/calendar-header.directive';
 import { RdxCalendarHeadingDirective } from '../src/calendar-heading.directive';
 import { RdxCalendarNextDirective } from '../src/calendar-next.directive';
 import { RdxCalendarPrevDirective } from '../src/calendar-prev.directive';
 import { RdxCalendarRootDirective } from '../src/calendar-root.directive';
+import { ChangeDetectionStrategy, Component, computed, signal } from '@angular/core';
+import { CalendarIdentifier, createCalendar, getLocalTimeZone, toCalendar, today } from '@internationalized/date';
+import { LucideChevronLeft, LucideChevronRight } from '@lucide/angular';
 
 @Component({
     changeDetection: ChangeDetectionStrategy.Eager,
@@ -54,44 +54,44 @@ import { RdxCalendarRootDirective } from '../src/calendar-root.directive';
 
             <div
                 #root="rdxCalendarRoot"
+                rdxCalendarRoot
+                fixedWeeks
                 [class]="c.root"
                 [value]="value()"
                 [locale]="locale()"
-                rdxCalendarRoot
-                fixedWeeks
             >
-                <div [class]="c.header" rdxCalendarHeader>
-                    <button [class]="c.nav" type="button" rdxCalendarPrev>
+                <div rdxCalendarHeader [class]="c.header">
+                    <button type="button" rdxCalendarPrev [class]="c.nav">
                         <svg lucideChevronLeft size="16" />
                     </button>
-                    <div #head="rdxCalendarHeading" [class]="c.heading" rdxCalendarHeading>
+                    <div #head="rdxCalendarHeading" rdxCalendarHeading [class]="c.heading">
                         {{ head.headingValue() }}
                     </div>
-                    <button [class]="c.nav" type="button" rdxCalendarNext>
+                    <button type="button" rdxCalendarNext [class]="c.nav">
                         <svg lucideChevronRight size="16" />
                     </button>
                 </div>
 
-                <table [class]="c.grid" rdxCalendarGrid>
+                <table rdxCalendarGrid [class]="c.grid">
                     @for (month of root.months(); track $index) {
                         <thead rdxCalendarGridHead>
                             <tr [class]="c.headRow">
                                 @for (day of root.weekDays(); track $index) {
-                                    <th [class]="c.headCell" rdxCalendarHeadCell>{{ day }}</th>
+                                    <th rdxCalendarHeadCell [class]="c.headCell">{{ day }}</th>
                                 }
                             </tr>
                         </thead>
-                        <tbody [class]="c.body" rdxCalendarGridBody>
+                        <tbody rdxCalendarGridBody [class]="c.body">
                             @for (weekDates of month.weeks; track $index) {
                                 <tr [class]="c.weekRow">
                                     @for (weekDate of weekDates; track $index) {
-                                        <td [class]="c.cell" [date]="weekDate" rdxCalendarCell>
+                                        <td rdxCalendarCell [class]="c.cell" [date]="weekDate">
                                             <div
                                                 #cell="rdxCalendarCellTrigger"
+                                                rdxCalendarCellTrigger
                                                 [class]="c.day"
                                                 [day]="weekDate"
                                                 [month]="month.value"
-                                                rdxCalendarCellTrigger
                                             >
                                                 {{ cell.dayValue() }}
                                             </div>
diff --git a/packages/primitives/calendar/stories/calendar.stories.ts b/packages/primitives/calendar/stories/calendar.stories.ts
index 564cea5fe..aac7f0c1e 100644
--- a/packages/primitives/calendar/stories/calendar.stories.ts
+++ b/packages/primitives/calendar/stories/calendar.stories.ts
@@ -1,4 +1,3 @@
-import { Meta, moduleMetadata, StoryObj } from '@storybook/angular';
 import { tailwindDemoDecorator } from '../../storybook/tailwind-demo';
 import { CalendarCustomNavigation } from './calendar-custom-navigation';
 import customNavigationSource from './calendar-custom-navigation?raw';
@@ -16,6 +15,7 @@ import { CalendarWeek } from './calendar-week';
 import weekSource from './calendar-week?raw';
 import { CalendarWithLocale } from './calendar-with-locale';
 import withLocaleSource from './calendar-with-locale?raw';
+import { Meta, moduleMetadata, StoryObj } from '@storybook/angular';
 
 const source = (code: string) => ({ docs: { source: { code, language: 'typescript' } } });
 const html = String.raw;
diff --git a/packages/primitives/checkbox/__tests__/checkbox-group.spec.ts b/packages/primitives/checkbox/__tests__/checkbox-group.spec.ts
index 50796c663..58b7b10a2 100644
--- a/packages/primitives/checkbox/__tests__/checkbox-group.spec.ts
+++ b/packages/primitives/checkbox/__tests__/checkbox-group.spec.ts
@@ -1,19 +1,19 @@
+import { RdxCheckboxModule } from '../index';
 import { ChangeDetectionStrategy, Component, signal } from '@angular/core';
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { form, FormField } from '@angular/forms/signals';
 import { By } from '@angular/platform-browser';
-import { RdxCheckboxModule } from '../index';
 
 @Component({
     changeDetection: ChangeDetectionStrategy.Eager,
     imports: [RdxCheckboxModule],
     template: `
         <div
-            [(value)]="value"
+            rdxCheckboxGroup
             [allValues]="all"
             [disabled]="disabled"
+            [(value)]="value"
             (onValueChange)="onValueChange($event)"
-            rdxCheckboxGroup
         >
             <div parent rdxCheckboxRoot>
                 <button rdxCheckboxButton><span rdxCheckboxIndicator></span></button>
@@ -47,14 +47,14 @@ class GroupHost {
     changeDetection: ChangeDetectionStrategy.Eager,
     imports: [RdxCheckboxModule],
     template: `
-        <div [(value)]="value" [allValues]="all" rdxCheckboxGroup>
+        <div rdxCheckboxGroup [allValues]="all" [(value)]="value">
             <div parent rdxCheckboxRoot>
                 <button rdxCheckboxButton><span rdxCheckboxIndicator></span></button>
             </div>
             <div name="a" rdxCheckboxRoot>
                 <button rdxCheckboxButton><span rdxCheckboxIndicator></span></button>
             </div>
-            <div [disabled]="true" name="b" rdxCheckboxRoot>
+            <div name="b" rdxCheckboxRoot [disabled]="true">
                 <button rdxCheckboxButton><span rdxCheckboxIndicator></span></button>
             </div>
         </div>
@@ -248,7 +248,7 @@ describe('RdxCheckboxGroup', () => {
     changeDetection: ChangeDetectionStrategy.Eager,
     imports: [RdxCheckboxModule],
     template: `
-        <div [invalid]="invalid()" [errors]="errors()" [dirty]="dirty()" [allValues]="all" rdxCheckboxGroup>
+        <div rdxCheckboxGroup [invalid]="invalid()" [errors]="errors()" [dirty]="dirty()" [allValues]="all">
             <div name="a" rdxCheckboxRoot>
                 <button rdxCheckboxButton><span rdxCheckboxIndicator></span></button>
             </div>
@@ -319,7 +319,7 @@ describe('RdxCheckboxGroup validation state', () => {
     changeDetection: ChangeDetectionStrategy.Eager,
     imports: [RdxCheckboxModule, FormField],
     template: `
-        <div [formField]="picks" [allValues]="all" rdxCheckboxGroup>
+        <div rdxCheckboxGroup [formField]="picks" [allValues]="all">
             <div name="a" rdxCheckboxRoot>
                 <button rdxCheckboxButton><span rdxCheckboxIndicator></span></button>
             </div>
diff --git a/packages/primitives/checkbox/__tests__/checkbox-root.directive.spec.ts b/packages/primitives/checkbox/__tests__/checkbox-root.directive.spec.ts
index aa3c3cb83..bb67f0408 100644
--- a/packages/primitives/checkbox/__tests__/checkbox-root.directive.spec.ts
+++ b/packages/primitives/checkbox/__tests__/checkbox-root.directive.spec.ts
@@ -1,7 +1,3 @@
-import { ChangeDetectionStrategy, Component, signal } from '@angular/core';
-import { ComponentFixture, TestBed } from '@angular/core/testing';
-import { form, FormField } from '@angular/forms/signals';
-import { By } from '@angular/platform-browser';
 import { RdxCheckboxButtonDirective } from '../src/checkbox-button';
 import { RdxCheckboxIndicatorDirective } from '../src/checkbox-indicator';
 import { RdxCheckboxInputDirective } from '../src/checkbox-input';
@@ -11,19 +7,23 @@ import {
     RdxCheckboxCheckedChangeEvent,
     RdxCheckboxRootDirective
 } from '../src/checkbox-root';
+import { ChangeDetectionStrategy, Component, signal } from '@angular/core';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { form, FormField } from '@angular/forms/signals';
+import { By } from '@angular/platform-browser';
 
 @Component({
     changeDetection: ChangeDetectionStrategy.Eager,
     imports: [RdxCheckboxRootDirective, RdxCheckboxButtonDirective, RdxCheckboxIndicatorDirective],
     template: `
         <div
+            rdxCheckboxRoot
             [checked]="checked"
             [indeterminate]="indeterminate"
             [disabled]="disabled"
             [readOnly]="readonly"
             [required]="required"
             (onCheckedChange)="onChange($event)"
-            rdxCheckboxRoot
         >
             <button rdxCheckboxButton>
                 <span rdxCheckboxIndicator></span>
@@ -60,12 +60,12 @@ class CheckboxHost {
     template: `
         <form>
             <div
-                [checked]="checked"
-                (onCheckedChange)="checked = $event.checked"
                 name="terms"
                 value="yes"
                 uncheckedValue="no"
                 rdxCheckboxRoot
+                [checked]="checked"
+                (onCheckedChange)="checked = $event.checked"
             >
                 <button rdxCheckboxButton>
                     <span rdxCheckboxIndicator></span>
@@ -297,10 +297,10 @@ describe('RdxCheckbox', () => {
     imports: [RdxCheckboxRootDirective, RdxCheckboxButtonDirective, RdxCheckboxInputDirective],
     template: `
         <div
+            rdxCheckboxRoot
             [checked]="checked"
             [indeterminate]="indeterminate"
             (onCheckedChange)="checked = $event.checked; indeterminate = false"
-            rdxCheckboxRoot
         >
             <button rdxCheckboxButton><span>x</span></button>
             <input rdxCheckboxInput />
@@ -398,7 +398,7 @@ describe('RdxCheckboxRoot uncheckedValue', () => {
     changeDetection: ChangeDetectionStrategy.Eager,
     imports: [RdxCheckboxRootDirective, RdxCheckboxButtonDirective, RdxCheckboxIndicatorDirective],
     template: `
-        <div [invalid]="invalid()" [errors]="errors()" rdxCheckboxRoot>
+        <div rdxCheckboxRoot [invalid]="invalid()" [errors]="errors()">
             <button rdxCheckboxButton>
                 <span rdxCheckboxIndicator></span>
             </button>
@@ -461,7 +461,7 @@ describe('RdxCheckboxRoot validation state (batch #4)', () => {
     changeDetection: ChangeDetectionStrategy.Eager,
     imports: [FormField, RdxCheckboxRootDirective, RdxCheckboxButtonDirective, RdxCheckboxIndicatorDirective],
     template: `
-        <div [formField]="terms" rdxCheckboxRoot>
+        <div rdxCheckboxRoot [formField]="terms">
             <button rdxCheckboxButton>
                 <span rdxCheckboxIndicator></span>
             </button>
diff --git a/packages/primitives/checkbox/index.ts b/packages/primitives/checkbox/index.ts
index ea86f2377..273da90c0 100644
--- a/packages/primitives/checkbox/index.ts
+++ b/packages/primitives/checkbox/index.ts
@@ -1,16 +1,16 @@
-import { NgModule } from '@angular/core';
 import { RdxCheckboxButtonDirective } from './src/checkbox-button';
 import { RdxCheckboxGroupDirective } from './src/checkbox-group';
 import { RdxCheckboxIndicatorDirective } from './src/checkbox-indicator';
 import { RdxCheckboxInputDirective } from './src/checkbox-input';
 import { RdxCheckboxRootDirective } from './src/checkbox-root';
+import { NgModule } from '@angular/core';
 
 export * from './src/checkbox-button';
 export * from './src/checkbox-group';
 export * from './src/checkbox-indicator';
 export * from './src/checkbox-input';
-export * from './src/checkbox-root';
 export type { CheckedState } from './src/checkbox-root';
+export * from './src/checkbox-root';
 
 export const checkboxImports = [
     RdxCheckboxInputDirective,
diff --git a/packages/primitives/checkbox/src/checkbox-button.ts b/packages/primitives/checkbox/src/checkbox-button.ts
index aa1880b6b..6c9d9ac5a 100644
--- a/packages/primitives/checkbox/src/checkbox-button.ts
+++ b/packages/primitives/checkbox/src/checkbox-button.ts
@@ -1,6 +1,6 @@
-import { computed, Directive, effect, ElementRef, inject } from '@angular/core';
 import { injectCheckboxGroupContext } from './checkbox-group';
 import { injectCheckboxRootContext } from './checkbox-root';
+import { computed, Directive, effect, ElementRef, inject } from '@angular/core';
 
 /**
  * Directive: rdxCheckboxButton
diff --git a/packages/primitives/checkbox/src/checkbox-group.ts b/packages/primitives/checkbox/src/checkbox-group.ts
index 4f2fa8f56..97a53fc86 100644
--- a/packages/primitives/checkbox/src/checkbox-group.ts
+++ b/packages/primitives/checkbox/src/checkbox-group.ts
@@ -1,3 +1,4 @@
+import type { CheckedState } from './checkbox-root';
 import {
     booleanAttribute,
     computed,
@@ -7,8 +8,8 @@ import {
     input,
     model,
     output,
-    signal,
-    Signal
+    Signal,
+    signal
 } from '@angular/core';
 import { ControlValueAccessor } from '@angular/forms';
 import {
@@ -23,7 +24,6 @@ import {
     RdxFormUiTouchTarget,
     RdxFormValueControl
 } from '@radix-ng/primitives/core';
-import type { CheckedState } from './checkbox-root';
 
 export type RdxCheckboxGroupValueChangeReason = 'none';
 export type RdxCheckboxGroupValueChangeEventDetails =
diff --git a/packages/primitives/checkbox/src/checkbox-indicator.ts b/packages/primitives/checkbox/src/checkbox-indicator.ts
index 83263f2a0..6185f25b7 100644
--- a/packages/primitives/checkbox/src/checkbox-indicator.ts
+++ b/packages/primitives/checkbox/src/checkbox-indicator.ts
@@ -1,6 +1,6 @@
+import { injectCheckboxRootContext } from './checkbox-root';
 import { booleanAttribute, computed, Directive, input } from '@angular/core';
 import { BooleanInput } from '@radix-ng/primitives/core';
-import { injectCheckboxRootContext } from './checkbox-root';
 
 @Directive({
     selector: '[rdxCheckboxIndicator]',
diff --git a/packages/primitives/checkbox/src/checkbox-input.ts b/packages/primitives/checkbox/src/checkbox-input.ts
index 830ecd872..7e0678b30 100644
--- a/packages/primitives/checkbox/src/checkbox-input.ts
+++ b/packages/primitives/checkbox/src/checkbox-input.ts
@@ -1,5 +1,5 @@
-import { Directive, effect, ElementRef, inject } from '@angular/core';
 import { injectCheckboxRootContext } from './checkbox-root';
+import { Directive, effect, ElementRef, inject } from '@angular/core';
 
 @Directive({
     selector: 'input[rdxCheckboxInput]',
diff --git a/packages/primitives/checkbox/src/checkbox-root.ts b/packages/primitives/checkbox/src/checkbox-root.ts
index b28843441..2431fe7f0 100644
--- a/packages/primitives/checkbox/src/checkbox-root.ts
+++ b/packages/primitives/checkbox/src/checkbox-root.ts
@@ -1,3 +1,4 @@
+import { injectCheckboxGroupContext } from './checkbox-group';
 import {
     booleanAttribute,
     computed,
@@ -10,8 +11,8 @@ import {
     model,
     output,
     Renderer2,
-    signal,
-    Signal
+    Signal,
+    signal
 } from '@angular/core';
 import {
     BooleanInput,
@@ -22,7 +23,6 @@ import {
     RdxFormCheckboxControl,
     RdxValidationError
 } from '@radix-ng/primitives/core';
-import { injectCheckboxGroupContext } from './checkbox-group';
 
 /**
  * Internal tri-state used only for the derived `parent` (select-all) state in
diff --git a/packages/primitives/checkbox/stories/checkbox-forms.ts b/packages/primitives/checkbox/stories/checkbox-forms.ts
index bd663bf72..c024b0289 100644
--- a/packages/primitives/checkbox/stories/checkbox-forms.ts
+++ b/packages/primitives/checkbox/stories/checkbox-forms.ts
@@ -1,13 +1,13 @@
+import { cn, demoButton, demoCheckbox } from '../../storybook/styles';
+import { RdxCheckboxIndicatorDirective } from '../src/checkbox-indicator';
+import { RdxCheckboxInputDirective } from '../src/checkbox-input';
+import { RdxCheckboxRootDirective } from '../src/checkbox-root';
 import { JsonPipe } from '@angular/common';
 import { ChangeDetectionStrategy, Component, inject } from '@angular/core';
 import { FormBuilder, FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { LucideCheck } from '@lucide/angular';
 import { RdxCheckboxButtonDirective } from '@radix-ng/primitives/checkbox';
 import { RdxLabelDirective } from '@radix-ng/primitives/label';
-import { cn, demoButton, demoCheckbox } from '../../storybook/styles';
-import { RdxCheckboxIndicatorDirective } from '../src/checkbox-indicator';
-import { RdxCheckboxInputDirective } from '../src/checkbox-input';
-import { RdxCheckboxRootDirective } from '../src/checkbox-root';
 
 @Component({
     changeDetection: ChangeDetectionStrategy.Eager,
@@ -16,8 +16,8 @@ import { RdxCheckboxRootDirective } from '../src/checkbox-root';
         <section [formGroup]="personality">
             <div class="flex items-center gap-3 pb-3">
                 <div rdxCheckboxRoot formControlName="fun">
-                    <button id="r1" [class]="c.button" rdxCheckboxButton>
-                        <svg [class]="c.indicator" rdxCheckboxIndicator size="16" lucideCheck />
+                    <button id="r1" rdxCheckboxButton [class]="c.button">
+                        <svg rdxCheckboxIndicator size="16" lucideCheck [class]="c.indicator" />
                     </button>
                     <input rdxCheckboxInput />
                 </div>
@@ -26,8 +26,8 @@ import { RdxCheckboxRootDirective } from '../src/checkbox-root';
 
             <div class="flex items-center gap-3 pb-3">
                 <div rdxCheckboxRoot formControlName="serious">
-                    <button id="r2" [class]="c.button" rdxCheckboxButton>
-                        <svg [class]="c.indicator" rdxCheckboxIndicator size="16" lucideCheck />
+                    <button id="r2" rdxCheckboxButton [class]="c.button">
+                        <svg rdxCheckboxIndicator size="16" lucideCheck [class]="c.indicator" />
                     </button>
                     <input rdxCheckboxInput />
                 </div>
@@ -38,8 +38,8 @@ import { RdxCheckboxRootDirective } from '../src/checkbox-root';
 
             <div class="flex items-center gap-3 pb-3">
                 <div rdxCheckboxRoot formControlName="smart" form="smart">
-                    <button id="r3" [class]="c.button" rdxCheckboxButton>
-                        <svg [class]="c.indicator" rdxCheckboxIndicator size="16" lucideCheck />
+                    <button id="r3" rdxCheckboxButton [class]="c.button">
+                        <svg rdxCheckboxIndicator size="16" lucideCheck [class]="c.indicator" />
                     </button>
                     <input rdxCheckboxInput />
                 </div>
@@ -52,7 +52,7 @@ import { RdxCheckboxRootDirective } from '../src/checkbox-root';
             {{ personality.value | json }}
         </section>
 
-        <button [class]="cn(b.base, b.primary, b.size.md)" (click)="toggleDisable()" type="button">
+        <button type="button" [class]="cn(b.base, b.primary, b.size.md)" (click)="toggleDisable()">
             Toggle disabled state
         </button>
     `,
diff --git a/packages/primitives/checkbox/stories/checkbox-group.ts b/packages/primitives/checkbox/stories/checkbox-group.ts
index 545b1e9f8..b06db330b 100644
--- a/packages/primitives/checkbox/stories/checkbox-group.ts
+++ b/packages/primitives/checkbox/stories/checkbox-group.ts
@@ -1,11 +1,11 @@
-import { ChangeDetectionStrategy, Component, signal } from '@angular/core';
-import { LucideCheck, LucideDynamicIcon } from '@lucide/angular';
-import { RdxLabelDirective } from '@radix-ng/primitives/label';
 import { demoCheckbox } from '../../storybook/styles';
 import { RdxCheckboxButtonDirective } from '../src/checkbox-button';
 import { RdxCheckboxGroupDirective } from '../src/checkbox-group';
 import { RdxCheckboxIndicatorDirective } from '../src/checkbox-indicator';
 import { RdxCheckboxRootDirective } from '../src/checkbox-root';
+import { ChangeDetectionStrategy, Component, signal } from '@angular/core';
+import { LucideCheck, LucideDynamicIcon } from '@lucide/angular';
+import { RdxLabelDirective } from '@radix-ng/primitives/label';
 
 /**
  * `rdxCheckboxGroup` holds the array of checked names. Each child participates by its `name`, and
@@ -28,15 +28,15 @@ import { RdxCheckboxRootDirective } from '../src/checkbox-root';
         LucideCheck
     ],
     template: `
-        <div class="flex flex-col gap-3" #group="rdxCheckboxGroup" [(value)]="value" [allValues]="all" rdxCheckboxGroup>
+        <div #group="rdxCheckboxGroup" class="flex flex-col gap-3" rdxCheckboxGroup [allValues]="all" [(value)]="value">
             <div class="flex items-center gap-3">
                 <div parent rdxCheckboxRoot>
-                    <button id="all" [class]="c.button" rdxCheckboxButton>
+                    <button id="all" rdxCheckboxButton [class]="c.button">
                         <svg
-                            [class]="c.indicator"
-                            [lucideIcon]="group.parentState() === 'indeterminate' ? 'minus' : 'check'"
                             rdxCheckboxIndicator
                             size="16"
+                            [class]="c.indicator"
+                            [lucideIcon]="group.parentState() === 'indeterminate' ? 'minus' : 'check'"
                         />
                     </button>
                 </div>
@@ -46,12 +46,12 @@ import { RdxCheckboxRootDirective } from '../src/checkbox-root';
             <div class="ml-6 flex flex-col gap-3">
                 @for (item of items; track item.name) {
                     <div class="flex items-center gap-3">
-                        <div [name]="item.name" rdxCheckboxRoot>
-                            <button [class]="c.button" [id]="item.name" rdxCheckboxButton>
-                                <svg [class]="c.indicator" rdxCheckboxIndicator size="16" lucideCheck />
+                        <div rdxCheckboxRoot [name]="item.name">
+                            <button rdxCheckboxButton [class]="c.button" [id]="item.name">
+                                <svg rdxCheckboxIndicator size="16" lucideCheck [class]="c.indicator" />
                             </button>
                         </div>
-                        <label class="text-foreground text-sm font-medium" [htmlFor]="item.name" rdxLabel>
+                        <label class="text-foreground text-sm font-medium" rdxLabel [htmlFor]="item.name">
                             {{ item.label }}
                         </label>
                     </div>
diff --git a/packages/primitives/checkbox/stories/checkbox-indeterminate.ts b/packages/primitives/checkbox/stories/checkbox-indeterminate.ts
index 008248224..a1da21bbb 100644
--- a/packages/primitives/checkbox/stories/checkbox-indeterminate.ts
+++ b/packages/primitives/checkbox/stories/checkbox-indeterminate.ts
@@ -1,12 +1,12 @@
+import { cn, demoButton, demoCheckbox } from '../../storybook/styles';
+import { RdxCheckboxIndicatorDirective } from '../src/checkbox-indicator';
+import { RdxCheckboxInputDirective } from '../src/checkbox-input';
+import { RdxCheckboxRootDirective } from '../src/checkbox-root';
 import { JsonPipe } from '@angular/common';
 import { ChangeDetectionStrategy, Component, computed, model } from '@angular/core';
 import { LucideDynamicIcon } from '@lucide/angular';
 import { RdxCheckboxButtonDirective } from '@radix-ng/primitives/checkbox';
 import { RdxLabelDirective } from '@radix-ng/primitives/label';
-import { cn, demoButton, demoCheckbox } from '../../storybook/styles';
-import { RdxCheckboxIndicatorDirective } from '../src/checkbox-indicator';
-import { RdxCheckboxInputDirective } from '../src/checkbox-input';
-import { RdxCheckboxRootDirective } from '../src/checkbox-root';
 
 @Component({
     changeDetection: ChangeDetectionStrategy.Eager,
@@ -23,13 +23,13 @@ import { RdxCheckboxRootDirective } from '../src/checkbox-root';
     template: `
         <div class="flex items-center gap-3">
             <div
+                rdxCheckboxRoot
                 [checked]="checked()"
                 [indeterminate]="indeterminate()"
                 (onCheckedChange)="checked.set($event.checked); indeterminate.set(false)"
-                rdxCheckboxRoot
             >
-                <button id="r1" [class]="c.button" rdxCheckboxButton>
-                    <svg [class]="c.indicator" [lucideIcon]="iconName()" rdxCheckboxIndicator size="16" />
+                <button id="r1" rdxCheckboxButton [class]="c.button">
+                    <svg rdxCheckboxIndicator size="16" [class]="c.indicator" [lucideIcon]="iconName()" />
                 </button>
                 <input rdxCheckboxInput />
             </div>
@@ -43,7 +43,7 @@ import { RdxCheckboxRootDirective } from '../src/checkbox-root';
             <p>indeterminate:&nbsp;{{ indeterminate() | json }}</p>
         </section>
 
-        <button [class]="cn(b.base, b.primary, b.size.md, 'mt-3')" (click)="toggleIndeterminate()" type="button">
+        <button type="button" [class]="cn(b.base, b.primary, b.size.md, 'mt-3')" (click)="toggleIndeterminate()">
             Toggle Indeterminate state
         </button>
     `
diff --git a/packages/primitives/checkbox/stories/checkbox-ngmodel.ts b/packages/primitives/checkbox/stories/checkbox-ngmodel.ts
index 602cdf607..b338f421b 100644
--- a/packages/primitives/checkbox/stories/checkbox-ngmodel.ts
+++ b/packages/primitives/checkbox/stories/checkbox-ngmodel.ts
@@ -1,12 +1,12 @@
-import { ChangeDetectionStrategy, Component } from '@angular/core';
-import { FormsModule } from '@angular/forms';
-import { LucideCheck } from '@lucide/angular';
-import { RdxLabelDirective } from '@radix-ng/primitives/label';
 import { demoCheckbox } from '../../storybook/styles';
 import { RdxCheckboxButtonDirective } from '../src/checkbox-button';
 import { RdxCheckboxIndicatorDirective } from '../src/checkbox-indicator';
 import { RdxCheckboxInputDirective } from '../src/checkbox-input';
 import { RdxCheckboxRootDirective } from '../src/checkbox-root';
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { FormsModule } from '@angular/forms';
+import { LucideCheck } from '@lucide/angular';
+import { RdxLabelDirective } from '@radix-ng/primitives/label';
 
 /**
  * Template-driven forms: two-way bind the root with `[(ngModel)]`.
@@ -25,9 +25,9 @@ import { RdxCheckboxRootDirective } from '../src/checkbox-root';
     ],
     template: `
         <div class="flex items-center gap-3">
-            <div [(ngModel)]="subscribed" rdxCheckboxRoot>
-                <button id="sub" [class]="c.button" rdxCheckboxButton>
-                    <svg [class]="c.indicator" rdxCheckboxIndicator size="16" lucideCheck />
+            <div rdxCheckboxRoot [(ngModel)]="subscribed">
+                <button id="sub" rdxCheckboxButton [class]="c.button">
+                    <svg rdxCheckboxIndicator size="16" lucideCheck [class]="c.indicator" />
                 </button>
                 <input rdxCheckboxInput />
             </div>
diff --git a/packages/primitives/checkbox/stories/checkbox-presence.ts b/packages/primitives/checkbox/stories/checkbox-presence.ts
index 72c29d4b3..075456273 100644
--- a/packages/primitives/checkbox/stories/checkbox-presence.ts
+++ b/packages/primitives/checkbox/stories/checkbox-presence.ts
@@ -1,12 +1,12 @@
+import { demoCheckbox } from '../../storybook/styles';
+import { RdxCheckboxIndicatorDirective } from '../src/checkbox-indicator';
+import { RdxCheckboxInputDirective } from '../src/checkbox-input';
+import { RdxCheckboxRootDirective } from '../src/checkbox-root';
 import { JsonPipe } from '@angular/common';
 import { ChangeDetectionStrategy, Component, model } from '@angular/core';
 import { LucideCheck as Check, LucideDynamicIcon } from '@lucide/angular';
 import { RdxCheckboxButtonDirective } from '@radix-ng/primitives/checkbox';
 import { RdxLabelDirective } from '@radix-ng/primitives/label';
-import { demoCheckbox } from '../../storybook/styles';
-import { RdxCheckboxIndicatorDirective } from '../src/checkbox-indicator';
-import { RdxCheckboxInputDirective } from '../src/checkbox-input';
-import { RdxCheckboxRootDirective } from '../src/checkbox-root';
 
 @Component({
     changeDetection: ChangeDetectionStrategy.Eager,
@@ -22,9 +22,9 @@ import { RdxCheckboxRootDirective } from '../src/checkbox-root';
     ],
     template: `
         <div class="flex items-center gap-3">
-            <div [checked]="checked()" (onCheckedChange)="checked.set($event.checked)" rdxCheckboxRoot>
-                <button id="r1" [class]="c.button" rdxCheckboxButton>
-                    <svg [class]="c.indicator" [lucideIcon]="Check" keepMounted rdxCheckboxIndicator size="16" />
+            <div rdxCheckboxRoot [checked]="checked()" (onCheckedChange)="checked.set($event.checked)">
+                <button id="r1" rdxCheckboxButton [class]="c.button">
+                    <svg keepMounted rdxCheckboxIndicator size="16" [class]="c.indicator" [lucideIcon]="Check" />
                 </button>
                 <input rdxCheckboxInput />
             </div>
diff --git a/packages/primitives/checkbox/stories/checkbox-select-all.ts b/packages/primitives/checkbox/stories/checkbox-select-all.ts
index 63eef776b..aea666914 100644
--- a/packages/primitives/checkbox/stories/checkbox-select-all.ts
+++ b/packages/primitives/checkbox/stories/checkbox-select-all.ts
@@ -1,11 +1,11 @@
-import { ChangeDetectionStrategy, Component, computed, signal } from '@angular/core';
-import { LucideCheck, LucideDynamicIcon } from '@lucide/angular';
-import { RdxLabelDirective } from '@radix-ng/primitives/label';
 import { demoCheckbox } from '../../storybook/styles';
 import { RdxCheckboxButtonDirective } from '../src/checkbox-button';
 import { RdxCheckboxIndicatorDirective } from '../src/checkbox-indicator';
 import { RdxCheckboxInputDirective } from '../src/checkbox-input';
 import { CheckedState, RdxCheckboxRootDirective } from '../src/checkbox-root';
+import { ChangeDetectionStrategy, Component, computed, signal } from '@angular/core';
+import { LucideCheck, LucideDynamicIcon } from '@lucide/angular';
+import { RdxLabelDirective } from '@radix-ng/primitives/label';
 
 interface Item {
     id: string;
@@ -33,17 +33,17 @@ interface Item {
         <div class="flex flex-col gap-3">
             <div class="flex items-center gap-3">
                 <div
+                    rdxCheckboxRoot
                     [checked]="parentState() === true"
                     [indeterminate]="parentState() === 'indeterminate'"
                     (onCheckedChange)="toggleAll($event)"
-                    rdxCheckboxRoot
                 >
-                    <button id="all" [class]="c.button" rdxCheckboxButton>
+                    <button id="all" rdxCheckboxButton [class]="c.button">
                         <svg
-                            [class]="c.indicator"
-                            [lucideIcon]="parentState() === 'indeterminate' ? 'minus' : 'check'"
                             rdxCheckboxIndicator
                             size="16"
+                            [class]="c.indicator"
+                            [lucideIcon]="parentState() === 'indeterminate' ? 'minus' : 'check'"
                         />
                     </button>
                     <input rdxCheckboxInput />
@@ -54,13 +54,13 @@ interface Item {
             <div class="ml-6 flex flex-col gap-3">
                 @for (item of items(); track item.id) {
                     <div class="flex items-center gap-3">
-                        <div [checked]="item.checked" (onCheckedChange)="toggleItem(item.id, $event)" rdxCheckboxRoot>
-                            <button [class]="c.button" [id]="item.id" rdxCheckboxButton>
-                                <svg [class]="c.indicator" rdxCheckboxIndicator size="16" lucideCheck />
+                        <div rdxCheckboxRoot [checked]="item.checked" (onCheckedChange)="toggleItem(item.id, $event)">
+                            <button rdxCheckboxButton [class]="c.button" [id]="item.id">
+                                <svg rdxCheckboxIndicator size="16" lucideCheck [class]="c.indicator" />
                             </button>
                             <input rdxCheckboxInput />
                         </div>
-                        <label class="text-foreground text-sm font-medium" [htmlFor]="item.id" rdxLabel>
+                        <label class="text-foreground text-sm font-medium" rdxLabel [htmlFor]="item.id">
                             {{ item.label }}
                         </label>
                     </div>
diff --git a/packages/primitives/checkbox/stories/checkbox-validation.ts b/packages/primitives/checkbox/stories/checkbox-validation.ts
index d5cd8e812..b4a699bc0 100644
--- a/packages/primitives/checkbox/stories/checkbox-validation.ts
+++ b/packages/primitives/checkbox/stories/checkbox-validation.ts
@@ -1,12 +1,12 @@
-import { ChangeDetectionStrategy, Component, inject, signal } from '@angular/core';
-import { FormBuilder, ReactiveFormsModule, Validators } from '@angular/forms';
-import { LucideCheck } from '@lucide/angular';
-import { RdxLabelDirective } from '@radix-ng/primitives/label';
 import { cn, demoButton, demoCheckbox } from '../../storybook/styles';
 import { RdxCheckboxButtonDirective } from '../src/checkbox-button';
 import { RdxCheckboxIndicatorDirective } from '../src/checkbox-indicator';
 import { RdxCheckboxInputDirective } from '../src/checkbox-input';
 import { RdxCheckboxRootDirective } from '../src/checkbox-root';
+import { ChangeDetectionStrategy, Component, inject, signal } from '@angular/core';
+import { FormBuilder, ReactiveFormsModule, Validators } from '@angular/forms';
+import { LucideCheck } from '@lucide/angular';
+import { RdxLabelDirective } from '@radix-ng/primitives/label';
 
 /**
  * Reactive forms with validation: `Validators.requiredTrue` forces the box to be
@@ -28,8 +28,8 @@ import { RdxCheckboxRootDirective } from '../src/checkbox-root';
         <form class="flex flex-col gap-3" [formGroup]="form" (ngSubmit)="onSubmit()">
             <div class="flex items-center gap-3">
                 <div rdxCheckboxRoot formControlName="terms">
-                    <button id="terms" [class]="c.button" rdxCheckboxButton>
-                        <svg [class]="c.indicator" rdxCheckboxIndicator size="16" lucideCheck />
+                    <button id="terms" rdxCheckboxButton [class]="c.button">
+                        <svg rdxCheckboxIndicator size="16" lucideCheck [class]="c.indicator" />
                     </button>
                     <input rdxCheckboxInput />
                 </div>
@@ -42,7 +42,7 @@ import { RdxCheckboxRootDirective } from '../src/checkbox-root';
                 <p class="text-destructive text-sm">You must accept the terms to continue.</p>
             }
 
-            <button [class]="cn(b.base, b.primary, b.size.md, 'self-start')" type="submit">Submit</button>
+            <button type="submit" [class]="cn(b.base, b.primary, b.size.md, 'self-start')">Submit</button>
 
             @if (submitted()) {
                 <p class="text-muted-foreground text-sm">Submitted ✓</p>
diff --git a/packages/primitives/checkbox/stories/checkbox.stories.ts b/packages/primitives/checkbox/stories/checkbox.stories.ts
index 8e1600f2f..ec2935943 100644
--- a/packages/primitives/checkbox/stories/checkbox.stories.ts
+++ b/packages/primitives/checkbox/stories/checkbox.stories.ts
@@ -1,6 +1,3 @@
-import { LucideCheck } from '@lucide/angular';
-import { argsToTemplate, Meta, moduleMetadata, StoryObj } from '@storybook/angular';
-import { expect } from 'storybook/test';
 import { RdxLabelDirective } from '../../label';
 import { demoCheckbox } from '../../storybook/styles';
 import { tailwindDemoDecorator } from '../../storybook/tailwind-demo';
@@ -9,21 +6,23 @@ import { RdxCheckboxIndicatorDirective } from '../src/checkbox-indicator';
 import { RdxCheckboxInputDirective } from '../src/checkbox-input';
 import { RdxCheckboxRootDirective } from '../src/checkbox-root';
 import { CheckboxReactiveFormsExampleComponent } from './checkbox-forms';
-import { CheckboxGroupExample } from './checkbox-group';
-import { CheckboxIndeterminate } from './checkbox-indeterminate';
-import { CheckboxNgModelExample } from './checkbox-ngmodel';
-import { CheckboxKeepMountedExample } from './checkbox-presence';
-import { CheckboxSelectAllExample } from './checkbox-select-all';
-import { CheckboxValidationExample } from './checkbox-validation';
-
 // Full component source for the "Show code" panel (Vite `?raw` import).
 import formsSource from './checkbox-forms?raw';
+import { CheckboxGroupExample } from './checkbox-group';
 import groupSource from './checkbox-group?raw';
+import { CheckboxIndeterminate } from './checkbox-indeterminate';
 import indeterminateSource from './checkbox-indeterminate?raw';
+import { CheckboxNgModelExample } from './checkbox-ngmodel';
 import ngModelSource from './checkbox-ngmodel?raw';
+import { CheckboxKeepMountedExample } from './checkbox-presence';
 import presenceSource from './checkbox-presence?raw';
+import { CheckboxSelectAllExample } from './checkbox-select-all';
 import selectAllSource from './checkbox-select-all?raw';
+import { CheckboxValidationExample } from './checkbox-validation';
 import validationSource from './checkbox-validation?raw';
+import { LucideCheck } from '@lucide/angular';
+import { argsToTemplate, Meta, moduleMetadata, StoryObj } from '@storybook/angular';
+import { expect } from 'storybook/test';
 
 const source = (code: string) => ({
     docs: {
diff --git a/packages/primitives/collapsible/__tests__/collapsible-panel-animation.spec.ts b/packages/primitives/collapsible/__tests__/collapsible-panel-animation.spec.ts
index 4a7c67aeb..ed51d984f 100644
--- a/packages/primitives/collapsible/__tests__/collapsible-panel-animation.spec.ts
+++ b/packages/primitives/collapsible/__tests__/collapsible-panel-animation.spec.ts
@@ -1,16 +1,16 @@
+import { RdxCollapsiblePanelDirective } from '../src/collapsible-panel.directive';
+import { RdxCollapsibleRootDirective } from '../src/collapsible-root.directive';
 import { ChangeDetectionStrategy, Component, signal } from '@angular/core';
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { By } from '@angular/platform-browser';
 import { afterEach, vi } from 'vitest';
-import { RdxCollapsiblePanelDirective } from '../src/collapsible-panel.directive';
-import { RdxCollapsibleRootDirective } from '../src/collapsible-root.directive';
 
 @Component({
     changeDetection: ChangeDetectionStrategy.Eager,
     imports: [RdxCollapsibleRootDirective, RdxCollapsiblePanelDirective],
     template: `
-        <div [open]="open()" rdxCollapsibleRoot>
-            <div [hiddenUntilFound]="hiddenUntilFound()" [keepMounted]="keepMounted()" rdxCollapsiblePanel>Panel</div>
+        <div rdxCollapsibleRoot [open]="open()">
+            <div rdxCollapsiblePanel [hiddenUntilFound]="hiddenUntilFound()" [keepMounted]="keepMounted()">Panel</div>
         </div>
     `
 })
diff --git a/packages/primitives/collapsible/__tests__/collapsible-panel.directive.spec.ts b/packages/primitives/collapsible/__tests__/collapsible-panel.directive.spec.ts
index 4bc5ce3fc..f7432acd1 100644
--- a/packages/primitives/collapsible/__tests__/collapsible-panel.directive.spec.ts
+++ b/packages/primitives/collapsible/__tests__/collapsible-panel.directive.spec.ts
@@ -1,7 +1,7 @@
-import { ChangeDetectionStrategy, Component } from '@angular/core';
-import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { RdxCollapsiblePanelDirective } from '../src/collapsible-panel.directive';
 import { RdxCollapsibleRootDirective } from '../src/collapsible-root.directive';
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
 
 @Component({
     changeDetection: ChangeDetectionStrategy.Eager,
diff --git a/packages/primitives/collapsible/__tests__/collapsible-root.directive.spec.ts b/packages/primitives/collapsible/__tests__/collapsible-root.directive.spec.ts
index a2967bf65..b02d067cd 100644
--- a/packages/primitives/collapsible/__tests__/collapsible-root.directive.spec.ts
+++ b/packages/primitives/collapsible/__tests__/collapsible-root.directive.spec.ts
@@ -1,21 +1,21 @@
-import { ChangeDetectionStrategy, Component, signal } from '@angular/core';
-import { ComponentFixture, TestBed } from '@angular/core/testing';
-import { By } from '@angular/platform-browser';
 import { RdxCollapsiblePanelDirective } from '../src/collapsible-panel.directive';
 import { RdxCollapsibleOpenChangeEvent, RdxCollapsibleRootDirective } from '../src/collapsible-root.directive';
 import { RdxCollapsibleTriggerDirective } from '../src/collapsible-trigger.directive';
+import { ChangeDetectionStrategy, Component, signal } from '@angular/core';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { By } from '@angular/platform-browser';
 
 @Component({
     changeDetection: ChangeDetectionStrategy.Eager,
     imports: [RdxCollapsibleRootDirective, RdxCollapsibleTriggerDirective, RdxCollapsiblePanelDirective],
     template: `
-        <div [disabled]="disabled()" [open]="open()" (onOpenChange)="handleOpenChange($event)" rdxCollapsibleRoot>
+        <div rdxCollapsibleRoot [disabled]="disabled()" [open]="open()" (onOpenChange)="handleOpenChange($event)">
             <button rdxCollapsibleTrigger>Trigger</button>
             <div
+                rdxCollapsiblePanel
                 [hiddenUntilFound]="hiddenUntilFound()"
                 [id]="panelId()"
                 [keepMounted]="keepMounted()"
-                rdxCollapsiblePanel
             >
                 Panel
             </div>
diff --git a/packages/primitives/collapsible/__tests__/collapsible-trigger.directive.spec.ts b/packages/primitives/collapsible/__tests__/collapsible-trigger.directive.spec.ts
index 19d2f2231..ebcfd1a2f 100644
--- a/packages/primitives/collapsible/__tests__/collapsible-trigger.directive.spec.ts
+++ b/packages/primitives/collapsible/__tests__/collapsible-trigger.directive.spec.ts
@@ -1,7 +1,7 @@
-import { ChangeDetectionStrategy, Component } from '@angular/core';
-import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { RdxCollapsibleRootDirective } from '../src/collapsible-root.directive';
 import { RdxCollapsibleTriggerDirective } from '../src/collapsible-trigger.directive';
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
 
 @Component({
     changeDetection: ChangeDetectionStrategy.Eager,
diff --git a/packages/primitives/collapsible/index.ts b/packages/primitives/collapsible/index.ts
index 18790b095..5c83009b6 100644
--- a/packages/primitives/collapsible/index.ts
+++ b/packages/primitives/collapsible/index.ts
@@ -1,7 +1,7 @@
-import { NgModule } from '@angular/core';
 import { RdxCollapsiblePanelDirective } from './src/collapsible-panel.directive';
 import { RdxCollapsibleRootDirective } from './src/collapsible-root.directive';
 import { RdxCollapsibleTriggerDirective } from './src/collapsible-trigger.directive';
+import { NgModule } from '@angular/core';
 
 export * from './src/collapsible-panel.directive';
 export * from './src/collapsible-root.directive';
diff --git a/packages/primitives/collapsible/src/collapsible-panel.directive.ts b/packages/primitives/collapsible/src/collapsible-panel.directive.ts
index 302c761b1..92f2c3bb2 100644
--- a/packages/primitives/collapsible/src/collapsible-panel.directive.ts
+++ b/packages/primitives/collapsible/src/collapsible-panel.directive.ts
@@ -1,3 +1,4 @@
+import { injectCollapsibleRootContext } from './collapsible-root.directive';
 import {
     afterRenderEffect,
     booleanAttribute,
@@ -13,7 +14,6 @@ import {
     untracked
 } from '@angular/core';
 import { BooleanInput } from '@radix-ng/primitives/core';
-import { injectCollapsibleRootContext } from './collapsible-root.directive';
 
 /**
  * Coerces a collapsible boolean input that distinguishes "not set" (`undefined`) from `false`,
diff --git a/packages/primitives/collapsible/src/collapsible-root.directive.ts b/packages/primitives/collapsible/src/collapsible-root.directive.ts
index 826300e73..acfd254cc 100644
--- a/packages/primitives/collapsible/src/collapsible-root.directive.ts
+++ b/packages/primitives/collapsible/src/collapsible-root.directive.ts
@@ -8,8 +8,8 @@ import {
     model,
     ModelSignal,
     output,
-    signal,
     Signal,
+    signal,
     untracked,
     WritableSignal
 } from '@angular/core';
diff --git a/packages/primitives/collapsible/src/collapsible-trigger.directive.ts b/packages/primitives/collapsible/src/collapsible-trigger.directive.ts
index d40c1a1ec..c812f16ec 100644
--- a/packages/primitives/collapsible/src/collapsible-trigger.directive.ts
+++ b/packages/primitives/collapsible/src/collapsible-trigger.directive.ts
@@ -1,5 +1,5 @@
-import { Directive, ElementRef, inject } from '@angular/core';
 import { injectCollapsibleRootContext } from './collapsible-root.directive';
+import { Directive, ElementRef, inject } from '@angular/core';
 
 /**
  * A button that opens and closes the collapsible panel.
diff --git a/packages/primitives/collapsible/stories/collapsible-animation.component.ts b/packages/primitives/collapsible/stories/collapsible-animation.component.ts
index f0f0f4f67..7f5c2d6e7 100644
--- a/packages/primitives/collapsible/stories/collapsible-animation.component.ts
+++ b/packages/primitives/collapsible/stories/collapsible-animation.component.ts
@@ -1,8 +1,8 @@
-import { ChangeDetectionStrategy, Component, signal } from '@angular/core';
-import { LucideUnfoldVertical, LucideX } from '@lucide/angular';
 import { RdxCollapsiblePanelDirective } from '../src/collapsible-panel.directive';
 import { RdxCollapsibleRootDirective } from '../src/collapsible-root.directive';
 import { RdxCollapsibleTriggerDirective } from '../src/collapsible-trigger.directive';
+import { ChangeDetectionStrategy, Component, signal } from '@angular/core';
+import { LucideUnfoldVertical, LucideX } from '@lucide/angular';
 
 @Component({
     changeDetection: ChangeDetectionStrategy.Eager,
@@ -15,7 +15,7 @@ import { RdxCollapsibleTriggerDirective } from '../src/collapsible-trigger.direc
         LucideUnfoldVertical
     ],
     template: `
-        <div class="w-full max-w-sm" [open]="open()" (onOpenChange)="open.set($event.open)" rdxCollapsibleRoot>
+        <div class="w-full max-w-sm" rdxCollapsibleRoot [open]="open()" (onOpenChange)="open.set($event.open)">
             <div class="flex items-center justify-between gap-3">
                 <span class="text-foreground text-sm font-medium">&#64;peduarte starred 3 repositories</span>
                 <button
@@ -42,8 +42,8 @@ import { RdxCollapsibleTriggerDirective } from '../src/collapsible-trigger.direc
             -->
             <div
                 class="h-[var(--collapsible-panel-height)] overflow-hidden opacity-100 transition-[height,opacity] duration-300 ease-out data-[closed]:h-0 data-[closed]:opacity-0 data-[starting-style]:h-0 data-[starting-style]:opacity-0"
-                [keepMounted]="true"
                 rdxCollapsiblePanel
+                [keepMounted]="true"
             >
                 <div class="bg-card text-card-foreground border-border my-3 rounded-md border px-3 py-2 shadow-sm">
                     <span class="text-sm">&#64;radix-ui/colors</span>
diff --git a/packages/primitives/collapsible/stories/collapsible-external-triggering.component.ts b/packages/primitives/collapsible/stories/collapsible-external-triggering.component.ts
index b23760d68..609c0e986 100644
--- a/packages/primitives/collapsible/stories/collapsible-external-triggering.component.ts
+++ b/packages/primitives/collapsible/stories/collapsible-external-triggering.component.ts
@@ -1,7 +1,6 @@
-import { ChangeDetectionStrategy, Component, signal } from '@angular/core';
-
 import { RdxCollapsiblePanelDirective } from '../src/collapsible-panel.directive';
 import { RdxCollapsibleRootDirective } from '../src/collapsible-root.directive';
+import { ChangeDetectionStrategy, Component, signal } from '@angular/core';
 
 @Component({
     changeDetection: ChangeDetectionStrategy.Eager,
@@ -10,13 +9,13 @@ import { RdxCollapsibleRootDirective } from '../src/collapsible-root.directive';
     template: `
         <button
             class="bg-muted text-primary hover:bg-muted/80 focus-visible:ring-ring border-border mb-3 inline-flex h-8 items-center rounded-md border px-3 text-sm font-medium shadow-sm transition-colors outline-none focus-visible:ring-2"
-            (click)="open.set(!open())"
             type="button"
+            (click)="open.set(!open())"
         >
             External Trigger
         </button>
 
-        <div class="w-full max-w-sm" [open]="open()" rdxCollapsibleRoot>
+        <div class="w-full max-w-sm" rdxCollapsibleRoot [open]="open()">
             <div class="flex items-center justify-between gap-3">
                 <span class="text-foreground text-sm font-medium">&#64;peduarte starred 3 repositories</span>
             </div>
@@ -27,8 +26,8 @@ import { RdxCollapsibleRootDirective } from '../src/collapsible-root.directive';
 
             <div
                 class="h-[var(--collapsible-panel-height)] overflow-hidden opacity-100 transition-[height,opacity] duration-300 ease-out data-[closed]:h-0 data-[closed]:opacity-0 data-[starting-style]:h-0 data-[starting-style]:opacity-0"
-                [keepMounted]="true"
                 rdxCollapsiblePanel
+                [keepMounted]="true"
             >
                 <div class="bg-card text-card-foreground border-border my-3 rounded-md border px-3 py-2 shadow-sm">
                     <span class="text-sm">&#64;radix-ui/colors</span>
diff --git a/packages/primitives/collapsible/stories/collapsible.stories.ts b/packages/primitives/collapsible/stories/collapsible.stories.ts
index 583caa790..7b7eb9d76 100644
--- a/packages/primitives/collapsible/stories/collapsible.stories.ts
+++ b/packages/primitives/collapsible/stories/collapsible.stories.ts
@@ -1,11 +1,11 @@
-import { LucideUnfoldVertical, LucideX } from '@lucide/angular';
-import { Meta, moduleMetadata, StoryObj } from '@storybook/angular';
 import { tailwindDemoDecorator } from '../../storybook/tailwind-demo';
 import { RdxCollapsiblePanelDirective } from '../src/collapsible-panel.directive';
 import { RdxCollapsibleRootDirective } from '../src/collapsible-root.directive';
 import { RdxCollapsibleTriggerDirective } from '../src/collapsible-trigger.directive';
 import { RdxCollapsibleAnimationComponent } from './collapsible-animation.component';
 import { RdxCollapsibleExternalTriggeringComponent } from './collapsible-external-triggering.component';
+import { LucideUnfoldVertical, LucideX } from '@lucide/angular';
+import { Meta, moduleMetadata, StoryObj } from '@storybook/angular';
 
 const html = String.raw;
 
diff --git a/packages/primitives/combobox/__tests__/combobox-aria-parts.spec.ts b/packages/primitives/combobox/__tests__/combobox-aria-parts.spec.ts
index ff6c9c95a..791c6c31b 100644
--- a/packages/primitives/combobox/__tests__/combobox-aria-parts.spec.ts
+++ b/packages/primitives/combobox/__tests__/combobox-aria-parts.spec.ts
@@ -1,7 +1,7 @@
+import { _importsCombobox } from '../index';
 import { ChangeDetectionStrategy, Component, signal } from '@angular/core';
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { beforeEach, describe, expect, it } from 'vitest';
-import { _importsCombobox } from '../index';
 
 /**
  * ARIA / part-parity regressions (ADR 0014 review batch 2): list is a programmatic focus target that
@@ -12,7 +12,7 @@ import { _importsCombobox } from '../index';
     changeDetection: ChangeDetectionStrategy.Eager,
     imports: [_importsCombobox],
     template: `
-        <div [(value)]="value" [(open)]="open" [readOnly]="readOnly()" modal rdxComboboxRoot>
+        <div modal rdxComboboxRoot [readOnly]="readOnly()" [(value)]="value" [(open)]="open">
             <input rdxComboboxInput aria-label="Fruit" />
             <div *rdxComboboxPortal rdxComboboxPositioner>
                 <div rdxComboboxBackdrop></div>
@@ -23,8 +23,8 @@ import { _importsCombobox } from '../index';
                             @if (showLabel()) {
                                 <div rdxComboboxGroupLabel>Fruits</div>
                             }
-                            <div [value]="'apple'" rdxComboboxItem>apple</div>
-                            <div [value]="'banana'" rdxComboboxItem>banana</div>
+                            <div rdxComboboxItem [value]="'apple'">apple</div>
+                            <div rdxComboboxItem [value]="'banana'">banana</div>
                         </div>
                     </div>
                 </div>
diff --git a/packages/primitives/combobox/__tests__/combobox-chips.spec.ts b/packages/primitives/combobox/__tests__/combobox-chips.spec.ts
index a5be251e1..9272114af 100644
--- a/packages/primitives/combobox/__tests__/combobox-chips.spec.ts
+++ b/packages/primitives/combobox/__tests__/combobox-chips.spec.ts
@@ -1,17 +1,17 @@
+import { _importsCombobox } from '../index';
 import { ChangeDetectionStrategy, Component, signal } from '@angular/core';
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { beforeEach, describe, expect, it } from 'vitest';
-import { _importsCombobox } from '../index';
 
 @Component({
     changeDetection: ChangeDetectionStrategy.Eager,
     imports: [_importsCombobox],
     template: `
-        <div [(value)]="value" [(open)]="open" [dir]="dir()" multiple rdxComboboxRoot>
+        <div multiple rdxComboboxRoot [dir]="dir()" [(value)]="value" [(open)]="open">
             <div rdxComboboxAnchor>
                 <div rdxComboboxChips>
                     @for (v of value(); track v) {
-                        <span [value]="v" rdxComboboxChip>
+                        <span rdxComboboxChip [value]="v">
                             {{ v }}
                             <button rdxComboboxChipRemove aria-label="Remove">×</button>
                         </span>
@@ -24,7 +24,7 @@ import { _importsCombobox } from '../index';
                 <div rdxComboboxPopup>
                     <div rdxComboboxList aria-label="Fruits">
                         @for (f of fruits; track f) {
-                            <div [value]="f" rdxComboboxItem>{{ f }}</div>
+                            <div rdxComboboxItem [value]="f">{{ f }}</div>
                         }
                     </div>
                 </div>
diff --git a/packages/primitives/combobox/__tests__/combobox-clear-on-empty.spec.ts b/packages/primitives/combobox/__tests__/combobox-clear-on-empty.spec.ts
index fc9029bf3..9145565a4 100644
--- a/packages/primitives/combobox/__tests__/combobox-clear-on-empty.spec.ts
+++ b/packages/primitives/combobox/__tests__/combobox-clear-on-empty.spec.ts
@@ -1,7 +1,7 @@
+import { _importsCombobox } from '../index';
 import { ChangeDetectionStrategy, Component, signal } from '@angular/core';
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { beforeEach, describe, expect, it } from 'vitest';
-import { _importsCombobox } from '../index';
 
 /**
  * Regression (ADR 0014, Finding 2 / P1c): emptying the input deselects a single value, and when
@@ -12,18 +12,18 @@ import { _importsCombobox } from '../index';
     imports: [_importsCombobox],
     template: `
         <div
-            [(value)]="value"
-            [(open)]="open"
+            rdxComboboxRoot
             [multiple]="multiple()"
             [openOnInputClick]="openOnInputClick()"
-            rdxComboboxRoot
+            [(value)]="value"
+            [(open)]="open"
         >
             <input rdxComboboxInput aria-label="Fruit" />
             <div *rdxComboboxPortal rdxComboboxPositioner>
                 <div rdxComboboxPopup>
                     <div rdxComboboxList aria-label="Fruits">
                         @for (fruit of fruits; track fruit) {
-                            <div [value]="fruit" rdxComboboxItem>{{ fruit }}</div>
+                            <div rdxComboboxItem [value]="fruit">{{ fruit }}</div>
                         }
                     </div>
                 </div>
diff --git a/packages/primitives/combobox/__tests__/combobox-empty-and-selection.spec.ts b/packages/primitives/combobox/__tests__/combobox-empty-and-selection.spec.ts
index 4678d2131..4e5ebb731 100644
--- a/packages/primitives/combobox/__tests__/combobox-empty-and-selection.spec.ts
+++ b/packages/primitives/combobox/__tests__/combobox-empty-and-selection.spec.ts
@@ -1,7 +1,7 @@
+import { _importsCombobox } from '../index';
 import { ChangeDetectionStrategy, Component, signal } from '@angular/core';
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { beforeEach, describe, expect, it } from 'vitest';
-import { _importsCombobox } from '../index';
 
 /**
  * Regressions from the ADR 0014 Base-UI parity review:
@@ -15,13 +15,13 @@ import { _importsCombobox } from '../index';
     changeDetection: ChangeDetectionStrategy.Eager,
     imports: [_importsCombobox],
     template: `
-        <div [(value)]="value" [(open)]="open" [selectionMode]="selectionMode()" rdxComboboxRoot>
+        <div rdxComboboxRoot [selectionMode]="selectionMode()" [(value)]="value" [(open)]="open">
             <input rdxComboboxInput aria-label="Fruit" />
             <div *rdxComboboxPortal rdxComboboxPositioner>
                 <div rdxComboboxPopup>
                     <div rdxComboboxList aria-label="Fruits">
                         @for (fruit of fruits; track fruit) {
-                            <div [value]="fruit" rdxComboboxItem>{{ fruit }}</div>
+                            <div rdxComboboxItem [value]="fruit">{{ fruit }}</div>
                         }
                     </div>
                     <div rdxComboboxEmpty>No results</div>
diff --git a/packages/primitives/combobox/__tests__/combobox-engine-contract.spec.ts b/packages/primitives/combobox/__tests__/combobox-engine-contract.spec.ts
index 90efad4ce..4b90033df 100644
--- a/packages/primitives/combobox/__tests__/combobox-engine-contract.spec.ts
+++ b/packages/primitives/combobox/__tests__/combobox-engine-contract.spec.ts
@@ -1,21 +1,21 @@
+import { _importsCombobox } from '../index';
+import { ComboboxFilter, RdxComboboxRoot } from '../src/combobox-root';
 import { ChangeDetectionStrategy, Component, signal } from '@angular/core';
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { By } from '@angular/platform-browser';
 import { beforeEach, describe, expect, it } from 'vitest';
-import { _importsCombobox } from '../index';
-import { ComboboxFilter, RdxComboboxRoot } from '../src/combobox-root';
 
 @Component({
     changeDetection: ChangeDetectionStrategy.Eager,
     imports: [_importsCombobox],
     template: `
-        <div [(value)]="value" [(open)]="open" [filter]="filter()" rdxComboboxRoot>
+        <div rdxComboboxRoot [filter]="filter()" [(value)]="value" [(open)]="open">
             <input rdxComboboxInput aria-label="Fruit" />
             <div *rdxComboboxPortal rdxComboboxPositioner>
                 <div rdxComboboxPopup>
                     <div rdxComboboxList aria-label="Fruits">
                         @for (fruit of fruits(); track fruit) {
-                            <div [value]="fruit" rdxComboboxItem>{{ fruit }}</div>
+                            <div rdxComboboxItem [value]="fruit">{{ fruit }}</div>
                         }
                     </div>
                 </div>
diff --git a/packages/primitives/combobox/__tests__/combobox-events.spec.ts b/packages/primitives/combobox/__tests__/combobox-events.spec.ts
index 04b4c8add..98ec63b9d 100644
--- a/packages/primitives/combobox/__tests__/combobox-events.spec.ts
+++ b/packages/primitives/combobox/__tests__/combobox-events.spec.ts
@@ -1,21 +1,21 @@
+import { _importsCombobox } from '../index';
+import { RdxComboboxOpenChange } from '../src/combobox-root';
 import { ChangeDetectionStrategy, Component, signal } from '@angular/core';
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { beforeEach, describe, expect, it, vi } from 'vitest';
-import { _importsCombobox } from '../index';
-import { RdxComboboxOpenChange } from '../src/combobox-root';
 
 @Component({
     changeDetection: ChangeDetectionStrategy.Eager,
     imports: [_importsCombobox],
     template: `
         <form>
-            <div [(open)]="open" submitOnItemClick rdxComboboxRoot>
+            <div submitOnItemClick rdxComboboxRoot [(open)]="open">
                 <input rdxComboboxInput aria-label="Fruit" />
                 <div *rdxComboboxPortal rdxComboboxPositioner>
                     <div rdxComboboxPopup>
                         <div rdxComboboxList aria-label="Fruits">
                             @for (fruit of fruits; track fruit) {
-                                <div [value]="fruit" rdxComboboxItem>{{ fruit }}</div>
+                                <div rdxComboboxItem [value]="fruit">{{ fruit }}</div>
                             }
                         </div>
                     </div>
@@ -33,13 +33,13 @@ class SubmitHost {
     changeDetection: ChangeDetectionStrategy.Eager,
     imports: [_importsCombobox],
     template: `
-        <div [(open)]="open" (onOpenChangeComplete)="completed.set($event)" rdxComboboxRoot>
+        <div rdxComboboxRoot [(open)]="open" (onOpenChangeComplete)="completed.set($event)">
             <input rdxComboboxInput aria-label="Fruit" />
             <div *rdxComboboxPortal rdxComboboxPositioner>
                 <div rdxComboboxPopup>
                     <div rdxComboboxList aria-label="Fruits">
                         @for (fruit of fruits; track fruit) {
-                            <div [value]="fruit" rdxComboboxItem>{{ fruit }}</div>
+                            <div rdxComboboxItem [value]="fruit">{{ fruit }}</div>
                         }
                     </div>
                 </div>
@@ -57,14 +57,14 @@ class CompleteHost {
     changeDetection: ChangeDetectionStrategy.Eager,
     imports: [_importsCombobox],
     template: `
-        <div [(open)]="open" (onOpenChange)="handleOpenChange($event)" rdxComboboxRoot>
+        <div rdxComboboxRoot [(open)]="open" (onOpenChange)="handleOpenChange($event)">
             <input rdxComboboxInput aria-label="Fruit" />
             <button rdxComboboxTrigger>Toggle</button>
             <div *rdxComboboxPortal rdxComboboxPositioner>
                 <div rdxComboboxPopup>
                     <div rdxComboboxList aria-label="Fruits">
                         @for (fruit of fruits; track fruit) {
-                            <div [value]="fruit" rdxComboboxItem>{{ fruit }}</div>
+                            <div rdxComboboxItem [value]="fruit">{{ fruit }}</div>
                         }
                     </div>
                 </div>
diff --git a/packages/primitives/combobox/__tests__/combobox-focus-restore.spec.ts b/packages/primitives/combobox/__tests__/combobox-focus-restore.spec.ts
index 77225b085..6fdfd90ea 100644
--- a/packages/primitives/combobox/__tests__/combobox-focus-restore.spec.ts
+++ b/packages/primitives/combobox/__tests__/combobox-focus-restore.spec.ts
@@ -1,7 +1,7 @@
+import { _importsCombobox } from '../index';
 import { ChangeDetectionStrategy, Component, signal } from '@angular/core';
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { describe, expect, it } from 'vitest';
-import { _importsCombobox } from '../index';
 
 /**
  * Focus restoration after a selection (ADR 0014 review): the primitive restores focus to the input
@@ -13,13 +13,13 @@ import { _importsCombobox } from '../index';
     imports: [_importsCombobox],
     template: `
         <button id="external" type="button">external</button>
-        <div [(value)]="value" [(open)]="open" (onValueChange)="onChange()" rdxComboboxRoot>
+        <div rdxComboboxRoot [(value)]="value" [(open)]="open" (onValueChange)="onChange()">
             <input rdxComboboxInput aria-label="Fruit" />
             <div *rdxComboboxPortal rdxComboboxPositioner>
                 <div rdxComboboxPopup>
                     <div rdxComboboxList aria-label="Fruits">
                         @for (fruit of fruits; track fruit) {
-                            <div [value]="fruit" rdxComboboxItem>{{ fruit }}</div>
+                            <div rdxComboboxItem [value]="fruit">{{ fruit }}</div>
                         }
                     </div>
                 </div>
@@ -43,14 +43,14 @@ class OutsideHost {
     changeDetection: ChangeDetectionStrategy.Eager,
     imports: [_importsCombobox],
     template: `
-        <div [(value)]="value" [(open)]="open" rdxComboboxRoot>
+        <div rdxComboboxRoot [(value)]="value" [(open)]="open">
             <button rdxComboboxTrigger rdxComboboxAnchor>open</button>
             <div *rdxComboboxPortal rdxComboboxPositioner>
                 <div rdxComboboxPopup>
                     <input rdxComboboxInput aria-label="Search" />
                     <div rdxComboboxList aria-label="Fruits">
                         @for (fruit of fruits; track fruit) {
-                            <div [value]="fruit" rdxComboboxItem>{{ fruit }}</div>
+                            <div rdxComboboxItem [value]="fruit">{{ fruit }}</div>
                         }
                     </div>
                 </div>
diff --git a/packages/primitives/combobox/__tests__/combobox-forms.spec.ts b/packages/primitives/combobox/__tests__/combobox-forms.spec.ts
index 4eedaee70..f78ab5290 100644
--- a/packages/primitives/combobox/__tests__/combobox-forms.spec.ts
+++ b/packages/primitives/combobox/__tests__/combobox-forms.spec.ts
@@ -1,3 +1,4 @@
+import { _importsCombobox } from '../index';
 import { ChangeDetectionStrategy, Component, signal } from '@angular/core';
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { FormControl, ReactiveFormsModule } from '@angular/forms';
@@ -5,7 +6,6 @@ import { form, FormField } from '@angular/forms/signals';
 import { RdxFieldRoot } from '@radix-ng/primitives/field';
 import { RdxLabelDirective } from '@radix-ng/primitives/label';
 import { beforeEach, describe, expect, it } from 'vitest';
-import { _importsCombobox } from '../index';
 
 interface Fruit {
     label: string;
@@ -21,13 +21,13 @@ const FRUITS: Fruit[] = [
     changeDetection: ChangeDetectionStrategy.Eager,
     imports: [_importsCombobox, ReactiveFormsModule],
     template: `
-        <div [(open)]="open" [formControl]="control" rdxComboboxRoot>
+        <div rdxComboboxRoot [formControl]="control" [(open)]="open">
             <input rdxComboboxInput aria-label="Fruit" />
             <div *rdxComboboxPortal rdxComboboxPositioner>
                 <div rdxComboboxPopup>
                     <div rdxComboboxList aria-label="Fruits">
                         @for (fruit of fruits; track fruit.value) {
-                            <div [value]="fruit.value" rdxComboboxItem>{{ fruit.label }}</div>
+                            <div rdxComboboxItem [value]="fruit.value">{{ fruit.label }}</div>
                         }
                     </div>
                 </div>
@@ -45,7 +45,7 @@ class ReactiveHost {
     changeDetection: ChangeDetectionStrategy.Eager,
     imports: [_importsCombobox, RdxFieldRoot, RdxLabelDirective],
     template: `
-        <div [invalid]="invalid()" [required]="required()" rdxFieldRoot>
+        <div rdxFieldRoot [invalid]="invalid()" [required]="required()">
             <label rdxLabel>Fruit</label>
             <div rdxComboboxRoot>
                 <input rdxComboboxInput />
@@ -146,13 +146,13 @@ describe('Combobox forms integration', () => {
     changeDetection: ChangeDetectionStrategy.Eager,
     imports: [_importsCombobox],
     template: `
-        <div [(open)]="open" [invalid]="invalid()" [errors]="errors()" [dirty]="dirty()" rdxComboboxRoot>
+        <div rdxComboboxRoot [invalid]="invalid()" [errors]="errors()" [dirty]="dirty()" [(open)]="open">
             <input rdxComboboxInput aria-label="Fruit" />
             <div *rdxComboboxPortal rdxComboboxPositioner>
                 <div rdxComboboxPopup>
                     <div rdxComboboxList aria-label="Fruits">
                         @for (fruit of fruits; track fruit.value) {
-                            <div [value]="fruit.value" rdxComboboxItem>{{ fruit.label }}</div>
+                            <div rdxComboboxItem [value]="fruit.value">{{ fruit.label }}</div>
                         }
                     </div>
                 </div>
@@ -172,13 +172,13 @@ class ComboboxValidationHost {
     changeDetection: ChangeDetectionStrategy.Eager,
     imports: [_importsCombobox, FormField],
     template: `
-        <div [(open)]="open" [formField]="fruit" rdxComboboxRoot>
+        <div rdxComboboxRoot [formField]="fruit" [(open)]="open">
             <input rdxComboboxInput aria-label="Fruit" />
             <div *rdxComboboxPortal rdxComboboxPositioner>
                 <div rdxComboboxPopup>
                     <div rdxComboboxList aria-label="Fruits">
                         @for (fruit of fruits; track fruit.value) {
-                            <div [value]="fruit.value" rdxComboboxItem>{{ fruit.label }}</div>
+                            <div rdxComboboxItem [value]="fruit.value">{{ fruit.label }}</div>
                         }
                     </div>
                 </div>
diff --git a/packages/primitives/combobox/__tests__/combobox-grid.spec.ts b/packages/primitives/combobox/__tests__/combobox-grid.spec.ts
index 3889056a8..cdef39aaf 100644
--- a/packages/primitives/combobox/__tests__/combobox-grid.spec.ts
+++ b/packages/primitives/combobox/__tests__/combobox-grid.spec.ts
@@ -1,7 +1,7 @@
+import { _importsCombobox } from '../index';
 import { ChangeDetectionStrategy, Component, signal } from '@angular/core';
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { beforeEach, describe, expect, it } from 'vitest';
-import { _importsCombobox } from '../index';
 
 /**
  * P2 (ADR 0014): grid navigation is a Combobox engine feature. ArrowUp/Down move between rows keeping
@@ -11,7 +11,7 @@ import { _importsCombobox } from '../index';
     changeDetection: ChangeDetectionStrategy.Eager,
     imports: [_importsCombobox],
     template: `
-        <div [(value)]="value" [(open)]="open" grid rdxComboboxRoot>
+        <div grid rdxComboboxRoot [(value)]="value" [(open)]="open">
             <input rdxComboboxInput aria-label="Color" />
             <div *rdxComboboxPortal rdxComboboxPositioner>
                 <div rdxComboboxPopup>
@@ -19,7 +19,7 @@ import { _importsCombobox } from '../index';
                         @for (row of rows(); track $index) {
                             <div rdxComboboxRow>
                                 @for (cell of row; track cell) {
-                                    <div [value]="cell" rdxComboboxItem>{{ cell }}</div>
+                                    <div rdxComboboxItem [value]="cell">{{ cell }}</div>
                                 }
                             </div>
                         }
@@ -168,7 +168,7 @@ describe('Combobox grid', () => {
     changeDetection: ChangeDetectionStrategy.Eager,
     imports: [_importsCombobox],
     template: `
-        <div [(open)]="open" grid rdxComboboxRoot>
+        <div grid rdxComboboxRoot [(open)]="open">
             <input rdxComboboxInput aria-label="X" />
             <div *rdxComboboxPortal rdxComboboxPositioner>
                 <div rdxComboboxPopup>
diff --git a/packages/primitives/combobox/__tests__/combobox-group.spec.ts b/packages/primitives/combobox/__tests__/combobox-group.spec.ts
index 551bde4bc..cae6539fe 100644
--- a/packages/primitives/combobox/__tests__/combobox-group.spec.ts
+++ b/packages/primitives/combobox/__tests__/combobox-group.spec.ts
@@ -1,25 +1,25 @@
+import { _importsCombobox } from '../index';
 import { ChangeDetectionStrategy, Component, signal } from '@angular/core';
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { beforeEach, describe, expect, it } from 'vitest';
-import { _importsCombobox } from '../index';
 
 @Component({
     changeDetection: ChangeDetectionStrategy.Eager,
     imports: [_importsCombobox],
     template: `
-        <div [(open)]="open" rdxComboboxRoot>
+        <div rdxComboboxRoot [(open)]="open">
             <input rdxComboboxInput aria-label="Produce" />
             <div *rdxComboboxPortal rdxComboboxPositioner>
                 <div rdxComboboxPopup>
                     <div rdxComboboxList aria-label="Produce">
                         <div data-group="fruits" rdxComboboxGroup>
                             <div rdxComboboxGroupLabel>Fruits</div>
-                            <div [value]="'apple'" rdxComboboxItem>Apple</div>
-                            <div [value]="'grape'" rdxComboboxItem>Grape</div>
+                            <div rdxComboboxItem [value]="'apple'">Apple</div>
+                            <div rdxComboboxItem [value]="'grape'">Grape</div>
                         </div>
                         <div data-group="veg" rdxComboboxGroup>
                             <div rdxComboboxGroupLabel>Vegetables</div>
-                            <div [value]="'carrot'" rdxComboboxItem>Carrot</div>
+                            <div rdxComboboxItem [value]="'carrot'">Carrot</div>
                         </div>
                     </div>
                 </div>
diff --git a/packages/primitives/combobox/__tests__/combobox-highlight-reason.spec.ts b/packages/primitives/combobox/__tests__/combobox-highlight-reason.spec.ts
index 10571b08d..de192c994 100644
--- a/packages/primitives/combobox/__tests__/combobox-highlight-reason.spec.ts
+++ b/packages/primitives/combobox/__tests__/combobox-highlight-reason.spec.ts
@@ -1,22 +1,22 @@
+import { _importsCombobox } from '../index';
+import { ComboboxItemHighlightedDetails, RdxComboboxRoot } from '../src/combobox-root';
 import { ChangeDetectionStrategy, Component, signal } from '@angular/core';
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { By } from '@angular/platform-browser';
 import { describe, expect, it } from 'vitest';
-import { _importsCombobox } from '../index';
-import { ComboboxItemHighlightedDetails, RdxComboboxRoot } from '../src/combobox-root';
 
 // --- #1: non-virtualized programmatic highlight reports reason 'none', not a stale 'keyboard' ---
 @Component({
     changeDetection: ChangeDetectionStrategy.Eager,
     imports: [_importsCombobox],
     template: `
-        <div [(open)]="open" (onItemHighlighted)="events.push($event)" autoHighlight="input-change" rdxComboboxRoot>
+        <div autoHighlight="input-change" rdxComboboxRoot [(open)]="open" (onItemHighlighted)="events.push($event)">
             <input rdxComboboxInput aria-label="Fruit" />
             <div *rdxComboboxPortal rdxComboboxPositioner>
                 <div rdxComboboxPopup>
                     <div rdxComboboxList aria-label="Fruits">
                         @for (fruit of fruits; track fruit) {
-                            <div [value]="fruit" rdxComboboxItem>{{ fruit }}</div>
+                            <div rdxComboboxItem [value]="fruit">{{ fruit }}</div>
                         }
                     </div>
                 </div>
@@ -37,19 +37,19 @@ class ReasonHost {
     template: `
         <div
             #cmb="rdxComboboxRoot"
-            [(open)]="open"
-            [items]="items"
-            [limit]="limit()"
             virtualized
             autoHighlight="always"
             rdxComboboxRoot
+            [items]="items"
+            [limit]="limit()"
+            [(open)]="open"
         >
             <input rdxComboboxInput aria-label="Item" />
             <div *rdxComboboxPortal rdxComboboxPositioner>
                 <div rdxComboboxPopup>
                     <div rdxComboboxList aria-label="Items">
                         @for (i of windowIndexes; track i) {
-                            <div [value]="cmb.filteredItems()[i]" [index]="i" rdxComboboxItem></div>
+                            <div rdxComboboxItem [value]="cmb.filteredItems()[i]" [index]="i"></div>
                         }
                     </div>
                 </div>
@@ -71,13 +71,13 @@ class VirtualAlwaysHost {
     changeDetection: ChangeDetectionStrategy.Eager,
     imports: [_importsCombobox],
     template: `
-        <div [(open)]="open" (onItemHighlighted)="events.push($event)" rdxComboboxRoot>
+        <div rdxComboboxRoot [(open)]="open" (onItemHighlighted)="events.push($event)">
             <input rdxComboboxInput aria-label="Fruit" />
             <div *rdxComboboxPortal rdxComboboxPositioner>
                 <div rdxComboboxPopup>
                     <div rdxComboboxList aria-label="Fruits">
                         @for (fruit of fruits; track fruit) {
-                            <div [value]="fruit" rdxComboboxItem>{{ fruit }}</div>
+                            <div rdxComboboxItem [value]="fruit">{{ fruit }}</div>
                         }
                     </div>
                 </div>
diff --git a/packages/primitives/combobox/__tests__/combobox-hover.spec.ts b/packages/primitives/combobox/__tests__/combobox-hover.spec.ts
index f67a7beb5..a9f32215d 100644
--- a/packages/primitives/combobox/__tests__/combobox-hover.spec.ts
+++ b/packages/primitives/combobox/__tests__/combobox-hover.spec.ts
@@ -1,21 +1,21 @@
+import { _importsCombobox } from '../index';
+import { RdxComboboxRoot } from '../src/combobox-root';
 import { ChangeDetectionStrategy, Component, signal } from '@angular/core';
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { By } from '@angular/platform-browser';
 import { beforeEach, describe, expect, it } from 'vitest';
-import { _importsCombobox } from '../index';
-import { RdxComboboxRoot } from '../src/combobox-root';
 
 @Component({
     changeDetection: ChangeDetectionStrategy.Eager,
     imports: [_importsCombobox],
     template: `
-        <div [(open)]="open" [highlightItemOnHover]="hover()" [keepHighlight]="keep()" rdxComboboxRoot>
+        <div rdxComboboxRoot [highlightItemOnHover]="hover()" [keepHighlight]="keep()" [(open)]="open">
             <input rdxComboboxInput aria-label="Fruit" />
             <div *rdxComboboxPortal rdxComboboxPositioner>
                 <div rdxComboboxPopup>
                     <div rdxComboboxList aria-label="Fruits">
                         @for (fruit of fruits; track fruit) {
-                            <div [value]="fruit" rdxComboboxItem>{{ fruit }}</div>
+                            <div rdxComboboxItem [value]="fruit">{{ fruit }}</div>
                         }
                     </div>
                 </div>
diff --git a/packages/primitives/combobox/__tests__/combobox-limit-hover.spec.ts b/packages/primitives/combobox/__tests__/combobox-limit-hover.spec.ts
index 6c2befe68..898a80ae0 100644
--- a/packages/primitives/combobox/__tests__/combobox-limit-hover.spec.ts
+++ b/packages/primitives/combobox/__tests__/combobox-limit-hover.spec.ts
@@ -1,21 +1,21 @@
+import { _importsCombobox } from '../index';
+import { RdxComboboxRoot } from '../src/combobox-root';
 import { ChangeDetectionStrategy, Component, signal } from '@angular/core';
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { By } from '@angular/platform-browser';
 import { beforeEach, describe, expect, it } from 'vitest';
-import { _importsCombobox } from '../index';
-import { RdxComboboxRoot } from '../src/combobox-root';
 
 @Component({
     changeDetection: ChangeDetectionStrategy.Eager,
     imports: [_importsCombobox],
     template: `
-        <div [(open)]="open" [limit]="limit()" rdxComboboxRoot>
+        <div rdxComboboxRoot [limit]="limit()" [(open)]="open">
             <input rdxComboboxInput aria-label="Fruit" />
             <div *rdxComboboxPortal rdxComboboxPositioner>
                 <div rdxComboboxPopup>
                     <div rdxComboboxList aria-label="Fruits">
                         @for (fruit of fruits; track fruit) {
-                            <div [value]="fruit" rdxComboboxItem>{{ fruit }}</div>
+                            <div rdxComboboxItem [value]="fruit">{{ fruit }}</div>
                         }
                     </div>
                 </div>
diff --git a/packages/primitives/combobox/__tests__/combobox-modal.spec.ts b/packages/primitives/combobox/__tests__/combobox-modal.spec.ts
index 10beec325..63699d5c5 100644
--- a/packages/primitives/combobox/__tests__/combobox-modal.spec.ts
+++ b/packages/primitives/combobox/__tests__/combobox-modal.spec.ts
@@ -1,13 +1,13 @@
+import { _importsCombobox } from '../index';
 import { ChangeDetectionStrategy, Component, signal } from '@angular/core';
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { beforeEach, describe, expect, it } from 'vitest';
-import { _importsCombobox } from '../index';
 
 @Component({
     changeDetection: ChangeDetectionStrategy.Eager,
     imports: [_importsCombobox],
     template: `
-        <div [(open)]="open" [modal]="modal()" rdxComboboxRoot>
+        <div rdxComboboxRoot [modal]="modal()" [(open)]="open">
             <input rdxComboboxInput aria-label="Fruit" />
             <ng-template rdxComboboxPortal>
                 <div data-testid="backdrop" rdxComboboxBackdrop></div>
@@ -15,7 +15,7 @@ import { _importsCombobox } from '../index';
                     <div rdxComboboxPopup>
                         <div rdxComboboxList aria-label="Fruits">
                             @for (fruit of fruits; track fruit) {
-                                <div [value]="fruit" rdxComboboxItem>{{ fruit }}</div>
+                                <div rdxComboboxItem [value]="fruit">{{ fruit }}</div>
                             }
                         </div>
                     </div>
diff --git a/packages/primitives/combobox/__tests__/combobox-modes.spec.ts b/packages/primitives/combobox/__tests__/combobox-modes.spec.ts
index 12c118473..488d45dfc 100644
--- a/packages/primitives/combobox/__tests__/combobox-modes.spec.ts
+++ b/packages/primitives/combobox/__tests__/combobox-modes.spec.ts
@@ -1,28 +1,28 @@
+import { _importsCombobox } from '../index';
+import { RdxComboboxRoot } from '../src/combobox-root';
 import { ChangeDetectionStrategy, Component, signal } from '@angular/core';
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { By } from '@angular/platform-browser';
 import { beforeEach, describe, expect, it } from 'vitest';
-import { _importsCombobox } from '../index';
-import { RdxComboboxRoot } from '../src/combobox-root';
 
 @Component({
     changeDetection: ChangeDetectionStrategy.Eager,
     imports: [_importsCombobox],
     template: `
         <div
-            [(value)]="value"
-            [(open)]="open"
+            rdxComboboxRoot
             [selectionMode]="selectionMode()"
             [fillInputOnItemPress]="fillInput()"
             [autoHighlight]="autoHighlight()"
-            rdxComboboxRoot
+            [(value)]="value"
+            [(open)]="open"
         >
             <input rdxComboboxInput aria-label="Fruit" />
             <div *rdxComboboxPortal rdxComboboxPositioner>
                 <div rdxComboboxPopup>
                     <div rdxComboboxList aria-label="Fruits">
                         @for (fruit of fruits; track fruit) {
-                            <div [value]="fruit" rdxComboboxItem>{{ fruit }}</div>
+                            <div rdxComboboxItem [value]="fruit">{{ fruit }}</div>
                         }
                     </div>
                 </div>
diff --git a/packages/primitives/combobox/__tests__/combobox-navigation.spec.ts b/packages/primitives/combobox/__tests__/combobox-navigation.spec.ts
index 997dbf93d..28fd70bf7 100644
--- a/packages/primitives/combobox/__tests__/combobox-navigation.spec.ts
+++ b/packages/primitives/combobox/__tests__/combobox-navigation.spec.ts
@@ -1,9 +1,9 @@
+import { _importsCombobox } from '../index';
+import { RdxComboboxRoot } from '../src/combobox-root';
 import { ChangeDetectionStrategy, Component, signal } from '@angular/core';
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { By } from '@angular/platform-browser';
 import { beforeEach, describe, expect, it } from 'vitest';
-import { _importsCombobox } from '../index';
-import { RdxComboboxRoot } from '../src/combobox-root';
 
 /**
  * Characterization tests (ADR 0014, Phase 0): pin the engine's keyboard-navigation edges before the
@@ -13,13 +13,13 @@ import { RdxComboboxRoot } from '../src/combobox-root';
     changeDetection: ChangeDetectionStrategy.Eager,
     imports: [_importsCombobox],
     template: `
-        <div [(value)]="value" [(open)]="open" [loopFocus]="loop()" rdxComboboxRoot>
+        <div rdxComboboxRoot [loopFocus]="loop()" [(value)]="value" [(open)]="open">
             <input rdxComboboxInput aria-label="Fruit" />
             <div *rdxComboboxPortal rdxComboboxPositioner>
                 <div rdxComboboxPopup>
                     <div rdxComboboxList aria-label="Fruits">
                         @for (fruit of fruits; track fruit) {
-                            <div [value]="fruit" rdxComboboxItem>{{ fruit }}</div>
+                            <div rdxComboboxItem [value]="fruit">{{ fruit }}</div>
                         }
                     </div>
                 </div>
diff --git a/packages/primitives/combobox/__tests__/combobox-parts-p5.spec.ts b/packages/primitives/combobox/__tests__/combobox-parts-p5.spec.ts
index 1a4d4e57b..6ef16949e 100644
--- a/packages/primitives/combobox/__tests__/combobox-parts-p5.spec.ts
+++ b/packages/primitives/combobox/__tests__/combobox-parts-p5.spec.ts
@@ -1,23 +1,23 @@
+import { _importsCombobox } from '../index';
 import { ChangeDetectionStrategy, Component, signal } from '@angular/core';
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { beforeEach, describe, expect, it } from 'vitest';
-import { _importsCombobox } from '../index';
 
 @Component({
     changeDetection: ChangeDetectionStrategy.Eager,
     imports: [_importsCombobox],
     template: `
-        <div [(value)]="value" [(open)]="open" [disabled]="disabled()" rdxComboboxRoot>
+        <div rdxComboboxRoot [disabled]="disabled()" [(value)]="value" [(open)]="open">
             <div rdxComboboxInputGroup>
                 <input rdxComboboxInput aria-label="Fruit" />
-                <button [disabled]="clearDisabled()" rdxComboboxClear>clear</button>
+                <button rdxComboboxClear [disabled]="clearDisabled()">clear</button>
             </div>
             <div *rdxComboboxPortal rdxComboboxPositioner>
                 <div rdxComboboxPopup>
                     <div rdxComboboxList aria-label="Fruits">
-                        <div [value]="'apple'" rdxComboboxItem>Apple</div>
+                        <div rdxComboboxItem [value]="'apple'">Apple</div>
                         <div rdxComboboxSeparator></div>
-                        <div [value]="'banana'" rdxComboboxItem>Banana</div>
+                        <div rdxComboboxItem [value]="'banana'">Banana</div>
                     </div>
                     <div rdxComboboxEmpty>No results</div>
                     <div rdxComboboxStatus>1 result</div>
diff --git a/packages/primitives/combobox/__tests__/combobox-parts.spec.ts b/packages/primitives/combobox/__tests__/combobox-parts.spec.ts
index 9b4052863..5e62a1f42 100644
--- a/packages/primitives/combobox/__tests__/combobox-parts.spec.ts
+++ b/packages/primitives/combobox/__tests__/combobox-parts.spec.ts
@@ -1,15 +1,15 @@
+import { _importsCombobox } from '../index';
+import { RdxComboboxRoot } from '../src/combobox-root';
 import { ChangeDetectionStrategy, Component, signal } from '@angular/core';
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { By } from '@angular/platform-browser';
 import { beforeEach, describe, expect, it } from 'vitest';
-import { _importsCombobox } from '../index';
-import { RdxComboboxRoot } from '../src/combobox-root';
 
 @Component({
     changeDetection: ChangeDetectionStrategy.Eager,
     imports: [_importsCombobox],
     template: `
-        <div [(value)]="value" [(open)]="open" (onItemHighlighted)="highlighted.set($event)" rdxComboboxRoot>
+        <div rdxComboboxRoot [(value)]="value" [(open)]="open" (onItemHighlighted)="highlighted.set($event)">
             <span rdxComboboxLabel>Fruit</span>
             <button rdxComboboxTrigger>
                 <span #v="rdxComboboxValue" rdxComboboxValue placeholder="Pick one">{{ v.slotText() }}</span>
@@ -19,7 +19,7 @@ import { RdxComboboxRoot } from '../src/combobox-root';
                 <div rdxComboboxPopup>
                     <div rdxComboboxList aria-label="Fruits">
                         @for (fruit of fruits; track fruit) {
-                            <div [value]="fruit" rdxComboboxItem>{{ fruit }}</div>
+                            <div rdxComboboxItem [value]="fruit">{{ fruit }}</div>
                         }
                     </div>
                 </div>
diff --git a/packages/primitives/combobox/__tests__/combobox-popup-input.spec.ts b/packages/primitives/combobox/__tests__/combobox-popup-input.spec.ts
index 16a1e2966..5ea93611c 100644
--- a/packages/primitives/combobox/__tests__/combobox-popup-input.spec.ts
+++ b/packages/primitives/combobox/__tests__/combobox-popup-input.spec.ts
@@ -1,13 +1,13 @@
+import { _importsCombobox } from '../index';
 import { ChangeDetectionStrategy, Component, signal } from '@angular/core';
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { beforeEach, describe, expect, it } from 'vitest';
-import { _importsCombobox } from '../index';
 
 @Component({
     changeDetection: ChangeDetectionStrategy.Eager,
     imports: [_importsCombobox],
     template: `
-        <div [(value)]="value" rdxComboboxRoot>
+        <div rdxComboboxRoot [(value)]="value">
             <button rdxComboboxTrigger rdxComboboxAnchor>{{ value() ?? 'Select' }}</button>
 
             <div *rdxComboboxPortal rdxComboboxPositioner>
@@ -15,7 +15,7 @@ import { _importsCombobox } from '../index';
                     <input rdxComboboxInput aria-label="Search" />
                     <div rdxComboboxList aria-label="Fruits">
                         @for (fruit of fruits; track fruit) {
-                            <div [value]="fruit" rdxComboboxItem>{{ fruit }}</div>
+                            <div rdxComboboxItem [value]="fruit">{{ fruit }}</div>
                         }
                     </div>
                 </div>
diff --git a/packages/primitives/combobox/__tests__/combobox-readonly.spec.ts b/packages/primitives/combobox/__tests__/combobox-readonly.spec.ts
index 428023365..8b5ecbaf2 100644
--- a/packages/primitives/combobox/__tests__/combobox-readonly.spec.ts
+++ b/packages/primitives/combobox/__tests__/combobox-readonly.spec.ts
@@ -1,7 +1,7 @@
+import { _importsCombobox } from '../index';
 import { ChangeDetectionStrategy, Component, signal } from '@angular/core';
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { beforeEach, describe, expect, it } from 'vitest';
-import { _importsCombobox } from '../index';
 
 /**
  * Regression (ADR 0014, Finding 1): a read-only / disabled combobox must not be user-mutable — Clear,
@@ -12,11 +12,11 @@ import { _importsCombobox } from '../index';
     changeDetection: ChangeDetectionStrategy.Eager,
     imports: [_importsCombobox],
     template: `
-        <div [(value)]="value" [readOnly]="readOnly()" [disabled]="disabled()" multiple rdxComboboxRoot>
+        <div multiple rdxComboboxRoot [readOnly]="readOnly()" [disabled]="disabled()" [(value)]="value">
             <div rdxComboboxAnchor>
                 <div rdxComboboxChips>
                     @for (fruit of value(); track fruit) {
-                        <span [value]="fruit" rdxComboboxChip>
+                        <span rdxComboboxChip [value]="fruit">
                             {{ fruit }}
                             <button rdxComboboxChipRemove aria-label="Remove">×</button>
                         </span>
@@ -30,7 +30,7 @@ import { _importsCombobox } from '../index';
                 <div rdxComboboxPopup>
                     <div rdxComboboxList aria-label="Fruits">
                         @for (fruit of fruits; track fruit) {
-                            <div [value]="fruit" rdxComboboxItem>{{ fruit }}</div>
+                            <div rdxComboboxItem [value]="fruit">{{ fruit }}</div>
                         }
                     </div>
                 </div>
diff --git a/packages/primitives/combobox/__tests__/combobox-trigger.spec.ts b/packages/primitives/combobox/__tests__/combobox-trigger.spec.ts
index 028885658..2cad6f98c 100644
--- a/packages/primitives/combobox/__tests__/combobox-trigger.spec.ts
+++ b/packages/primitives/combobox/__tests__/combobox-trigger.spec.ts
@@ -1,7 +1,7 @@
+import { _importsCombobox } from '../index';
 import { ChangeDetectionStrategy, Component, signal } from '@angular/core';
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { beforeEach, describe, expect, it } from 'vitest';
-import { _importsCombobox } from '../index';
 
 /**
  * Trigger parity (ADR 0014 review): the trigger's role depends on the layout (Base UI's
@@ -14,14 +14,14 @@ import { _importsCombobox } from '../index';
     changeDetection: ChangeDetectionStrategy.Eager,
     imports: [_importsCombobox],
     template: `
-        <div [(value)]="value" [(open)]="open" [required]="required()" rdxComboboxRoot>
+        <div rdxComboboxRoot [required]="required()" [(value)]="value" [(open)]="open">
             <input rdxComboboxInput aria-label="Fruit" />
             <button rdxComboboxTrigger>open</button>
             <div *rdxComboboxPortal rdxComboboxPositioner>
                 <div rdxComboboxPopup>
                     <div rdxComboboxList aria-label="Fruits">
                         @for (fruit of fruits; track fruit) {
-                            <div [value]="fruit" rdxComboboxItem>{{ fruit }}</div>
+                            <div rdxComboboxItem [value]="fruit">{{ fruit }}</div>
                         }
                     </div>
                 </div>
@@ -40,14 +40,14 @@ class OutsideHost {
     changeDetection: ChangeDetectionStrategy.Eager,
     imports: [_importsCombobox],
     template: `
-        <div [(value)]="value" [(open)]="open" [required]="required()" rdxComboboxRoot>
+        <div rdxComboboxRoot [required]="required()" [(value)]="value" [(open)]="open">
             <button rdxComboboxTrigger rdxComboboxAnchor>open</button>
             <div *rdxComboboxPortal rdxComboboxPositioner>
                 <div rdxComboboxPopup>
                     <input rdxComboboxInput aria-label="Search" />
                     <div rdxComboboxList aria-label="Fruits">
                         @for (fruit of fruits; track fruit) {
-                            <div [value]="fruit" rdxComboboxItem>{{ fruit }}</div>
+                            <div rdxComboboxItem [value]="fruit">{{ fruit }}</div>
                         }
                     </div>
                 </div>
diff --git a/packages/primitives/combobox/__tests__/combobox-virtualized.spec.ts b/packages/primitives/combobox/__tests__/combobox-virtualized.spec.ts
index e51901fc7..3c4483621 100644
--- a/packages/primitives/combobox/__tests__/combobox-virtualized.spec.ts
+++ b/packages/primitives/combobox/__tests__/combobox-virtualized.spec.ts
@@ -1,9 +1,9 @@
+import { _importsCombobox } from '../index';
+import { ComboboxItemHighlightedDetails, RdxComboboxRoot } from '../src/combobox-root';
 import { ChangeDetectionStrategy, Component, signal } from '@angular/core';
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { By } from '@angular/platform-browser';
 import { beforeEach, describe, expect, it } from 'vitest';
-import { _importsCombobox } from '../index';
-import { ComboboxItemHighlightedDetails, RdxComboboxRoot } from '../src/combobox-root';
 
 // Only a 5-item window is ever rendered, so any assertion about navigation past index 4 proves the
 // root drives highlight/selection from `items` data by index rather than from mounted DOM elements.
@@ -13,19 +13,19 @@ import { ComboboxItemHighlightedDetails, RdxComboboxRoot } from '../src/combobox
     template: `
         <div
             #cmb="rdxComboboxRoot"
+            virtualized
+            rdxComboboxRoot
+            [items]="items"
             [(value)]="value"
             [(open)]="open"
-            [items]="items"
             (onItemHighlighted)="events.push($event)"
-            virtualized
-            rdxComboboxRoot
         >
             <input rdxComboboxInput aria-label="Item" />
             <div *rdxComboboxPortal rdxComboboxPositioner>
                 <div rdxComboboxPopup>
                     <div rdxComboboxList aria-label="Items">
                         @for (i of windowIndexes; track i) {
-                            <div [value]="cmb.filteredItems()[i]" [index]="i" rdxComboboxItem>
+                            <div rdxComboboxItem [value]="cmb.filteredItems()[i]" [index]="i">
                                 {{ cmb.filteredItems()[i] }}
                             </div>
                         }
diff --git a/packages/primitives/combobox/__tests__/combobox.spec.ts b/packages/primitives/combobox/__tests__/combobox.spec.ts
index f163f25fc..81ae66dfa 100644
--- a/packages/primitives/combobox/__tests__/combobox.spec.ts
+++ b/packages/primitives/combobox/__tests__/combobox.spec.ts
@@ -1,10 +1,10 @@
+import { _importsCombobox } from '../index';
+import { ComboboxFilter, RdxComboboxRoot } from '../src/combobox-root';
 import { ChangeDetectionStrategy, Component, signal } from '@angular/core';
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { By } from '@angular/platform-browser';
 import { axe } from 'jest-axe';
 import { beforeEach, describe, expect, it } from 'vitest';
-import { _importsCombobox } from '../index';
-import { ComboboxFilter, RdxComboboxRoot } from '../src/combobox-root';
 
 interface Fruit {
     label: string;
@@ -16,12 +16,12 @@ interface Fruit {
     imports: [_importsCombobox],
     template: `
         <div
-            [(value)]="value"
-            [(open)]="open"
+            rdxComboboxRoot
             [multiple]="multiple()"
             [filter]="filter()"
             [autoHighlight]="autoHighlight()"
-            rdxComboboxRoot
+            [(value)]="value"
+            [(open)]="open"
         >
             <label [attr.for]="'cb'">Fruit</label>
             <input id="cb" rdxComboboxInput />
@@ -32,7 +32,7 @@ interface Fruit {
                 <div rdxComboboxPopup>
                     <div rdxComboboxList aria-label="Fruits">
                         @for (fruit of fruits(); track fruit.value) {
-                            <div [value]="fruit.value" rdxComboboxItem>
+                            <div rdxComboboxItem [value]="fruit.value">
                                 {{ fruit.label }}
                                 <span rdxComboboxItemIndicator>✓</span>
                             </div>
diff --git a/packages/primitives/combobox/index.ts b/packages/primitives/combobox/index.ts
index ba42bed26..63dc086e0 100644
--- a/packages/primitives/combobox/index.ts
+++ b/packages/primitives/combobox/index.ts
@@ -1,4 +1,3 @@
-import { NgModule } from '@angular/core';
 import { RdxComboboxAnchor } from './src/combobox-anchor';
 import { RdxComboboxArrow } from './src/combobox-arrow';
 import { RdxComboboxBackdrop } from './src/combobox-backdrop';
@@ -25,6 +24,7 @@ import { RdxComboboxSeparator } from './src/combobox-separator';
 import { RdxComboboxStatus } from './src/combobox-status';
 import { RdxComboboxTrigger } from './src/combobox-trigger';
 import { RdxComboboxValue } from './src/combobox-value';
+import { NgModule } from '@angular/core';
 
 export * from './src/combobox-anchor';
 export * from './src/combobox-arrow';
diff --git a/packages/primitives/combobox/src/combobox-backdrop.ts b/packages/primitives/combobox/src/combobox-backdrop.ts
index bf287ae20..832b5e0b9 100644
--- a/packages/primitives/combobox/src/combobox-backdrop.ts
+++ b/packages/primitives/combobox/src/combobox-backdrop.ts
@@ -1,5 +1,5 @@
-import { Directive } from '@angular/core';
 import { injectComboboxRootContext } from './combobox-root';
+import { Directive } from '@angular/core';
 
 /**
  * An overlay rendered beneath the popup in `modal` mode. Place it inside the portal/presence; style
diff --git a/packages/primitives/combobox/src/combobox-chip-remove.ts b/packages/primitives/combobox/src/combobox-chip-remove.ts
index e68198c9c..99131d7fb 100644
--- a/packages/primitives/combobox/src/combobox-chip-remove.ts
+++ b/packages/primitives/combobox/src/combobox-chip-remove.ts
@@ -1,6 +1,6 @@
-import { Directive } from '@angular/core';
 import { injectComboboxChipContext } from './combobox-chip';
 import { injectComboboxRootContext } from './combobox-root';
+import { Directive } from '@angular/core';
 
 /**
  * Removes its chip's value from the selection, keeping focus in the input.
diff --git a/packages/primitives/combobox/src/combobox-chip.ts b/packages/primitives/combobox/src/combobox-chip.ts
index 5c7b8f5e4..f9f49f5ed 100644
--- a/packages/primitives/combobox/src/combobox-chip.ts
+++ b/packages/primitives/combobox/src/combobox-chip.ts
@@ -1,7 +1,7 @@
-import { Directive, ElementRef, inject, input } from '@angular/core';
-import { AcceptableValue, createContext } from '@radix-ng/primitives/core';
 import { RdxComboboxChips } from './combobox-chips';
 import { injectComboboxRootContext } from './combobox-root';
+import { Directive, ElementRef, inject, input } from '@angular/core';
+import { AcceptableValue, createContext } from '@radix-ng/primitives/core';
 
 const chipContext = () => {
     const chip = inject(RdxComboboxChip);
diff --git a/packages/primitives/combobox/src/combobox-chips.ts b/packages/primitives/combobox/src/combobox-chips.ts
index dae061f38..991022515 100644
--- a/packages/primitives/combobox/src/combobox-chips.ts
+++ b/packages/primitives/combobox/src/combobox-chips.ts
@@ -1,6 +1,6 @@
+import { injectComboboxRootContext } from './combobox-root';
 import { DestroyRef, Directive, ElementRef, inject } from '@angular/core';
 import { RdxFloatingInsideElement } from '@radix-ng/primitives/dismissable-layer';
-import { injectComboboxRootContext } from './combobox-root';
 
 /**
  * Container for the selected-value chips in `multiple` mode. Sits before the input and coordinates
diff --git a/packages/primitives/combobox/src/combobox-clear.ts b/packages/primitives/combobox/src/combobox-clear.ts
index 2325e4116..dc38335f9 100644
--- a/packages/primitives/combobox/src/combobox-clear.ts
+++ b/packages/primitives/combobox/src/combobox-clear.ts
@@ -1,6 +1,6 @@
+import { injectComboboxRootContext } from './combobox-root';
 import { booleanAttribute, computed, Directive, input } from '@angular/core';
 import { RdxFloatingInsideElement } from '@radix-ng/primitives/dismissable-layer';
-import { injectComboboxRootContext } from './combobox-root';
 
 /**
  * Clears the current selection and the input text. Hidden when there is nothing to clear.
diff --git a/packages/primitives/combobox/src/combobox-empty.ts b/packages/primitives/combobox/src/combobox-empty.ts
index 25dd24166..f36bf158c 100644
--- a/packages/primitives/combobox/src/combobox-empty.ts
+++ b/packages/primitives/combobox/src/combobox-empty.ts
@@ -1,5 +1,5 @@
-import { ChangeDetectionStrategy, Component, computed } from '@angular/core';
 import { injectComboboxRootContext } from './combobox-root';
+import { ChangeDetectionStrategy, Component, computed } from '@angular/core';
 
 /**
  * A polite, atomic live region announcing the "no results" message. Mirrors Base UI: the element
diff --git a/packages/primitives/combobox/src/combobox-group-label.ts b/packages/primitives/combobox/src/combobox-group-label.ts
index 8a3fd6288..3f4e98009 100644
--- a/packages/primitives/combobox/src/combobox-group-label.ts
+++ b/packages/primitives/combobox/src/combobox-group-label.ts
@@ -1,6 +1,6 @@
+import { injectComboboxGroupContext } from './combobox-group';
 import { DestroyRef, Directive, inject } from '@angular/core';
 import { injectId } from '@radix-ng/primitives/core';
-import { injectComboboxGroupContext } from './combobox-group';
 
 /**
  * Accessible label for a {@link RdxComboboxGroup}. Wires itself up via `aria-labelledby`.
diff --git a/packages/primitives/combobox/src/combobox-group.ts b/packages/primitives/combobox/src/combobox-group.ts
index ed706a633..7daf9c284 100644
--- a/packages/primitives/combobox/src/combobox-group.ts
+++ b/packages/primitives/combobox/src/combobox-group.ts
@@ -1,6 +1,6 @@
+import { ComboboxItemRef, injectComboboxRootContext } from './combobox-root';
 import { computed, Directive, inject, signal } from '@angular/core';
 import { createContext } from '@radix-ng/primitives/core';
-import { ComboboxItemRef, injectComboboxRootContext } from './combobox-root';
 
 const groupContext = () => {
     const group = inject(RdxComboboxGroup);
diff --git a/packages/primitives/combobox/src/combobox-input-group.ts b/packages/primitives/combobox/src/combobox-input-group.ts
index aa2ff5015..18e1272ca 100644
--- a/packages/primitives/combobox/src/combobox-input-group.ts
+++ b/packages/primitives/combobox/src/combobox-input-group.ts
@@ -1,5 +1,5 @@
-import { computed, Directive } from '@angular/core';
 import { injectComboboxRootContext } from './combobox-root';
+import { computed, Directive } from '@angular/core';
 
 const attr = (value: boolean) => (value ? '' : undefined);
 
diff --git a/packages/primitives/combobox/src/combobox-input.ts b/packages/primitives/combobox/src/combobox-input.ts
index aa132d68f..cb088863b 100644
--- a/packages/primitives/combobox/src/combobox-input.ts
+++ b/packages/primitives/combobox/src/combobox-input.ts
@@ -1,3 +1,5 @@
+import { RdxComboboxPositioner } from './combobox-positioner';
+import { injectComboboxRootContext } from './combobox-root';
 import {
     afterNextRender,
     booleanAttribute,
@@ -12,8 +14,6 @@ import { BooleanInput, injectId } from '@radix-ng/primitives/core';
 import { RdxFloatingInsideElement } from '@radix-ng/primitives/dismissable-layer';
 import { injectFieldRootContext } from '@radix-ng/primitives/field';
 import { RdxPopperAnchor } from '@radix-ng/primitives/popper';
-import { RdxComboboxPositioner } from './combobox-positioner';
-import { injectComboboxRootContext } from './combobox-root';
 
 const attr = (value: boolean) => (value ? '' : undefined);
 
diff --git a/packages/primitives/combobox/src/combobox-item-indicator.ts b/packages/primitives/combobox/src/combobox-item-indicator.ts
index 641b0cd04..3300477b3 100644
--- a/packages/primitives/combobox/src/combobox-item-indicator.ts
+++ b/packages/primitives/combobox/src/combobox-item-indicator.ts
@@ -1,5 +1,5 @@
-import { Directive } from '@angular/core';
 import { injectComboboxItemContext } from './combobox-item';
+import { Directive } from '@angular/core';
 
 /**
  * Renders only when its item is selected (e.g. a checkmark).
diff --git a/packages/primitives/combobox/src/combobox-item.ts b/packages/primitives/combobox/src/combobox-item.ts
index 21daa2844..203a7d45e 100644
--- a/packages/primitives/combobox/src/combobox-item.ts
+++ b/packages/primitives/combobox/src/combobox-item.ts
@@ -1,3 +1,6 @@
+import { injectComboboxGroupContext } from './combobox-group';
+import { ComboboxItemRef, injectComboboxRootContext } from './combobox-root';
+import { RdxComboboxRow } from './combobox-row';
 import {
     afterNextRender,
     afterRenderEffect,
@@ -9,13 +12,10 @@ import {
     ElementRef,
     inject,
     input,
-    signal,
-    Signal
+    Signal,
+    signal
 } from '@angular/core';
 import { AcceptableValue, createContext, injectId } from '@radix-ng/primitives/core';
-import { injectComboboxGroupContext } from './combobox-group';
-import { ComboboxItemRef, injectComboboxRootContext } from './combobox-root';
-import { RdxComboboxRow } from './combobox-row';
 
 const itemContext = () => {
     const item = inject(RdxComboboxItem);
diff --git a/packages/primitives/combobox/src/combobox-label.ts b/packages/primitives/combobox/src/combobox-label.ts
index 1ca3bec58..f0fb500ad 100644
--- a/packages/primitives/combobox/src/combobox-label.ts
+++ b/packages/primitives/combobox/src/combobox-label.ts
@@ -1,6 +1,6 @@
+import { injectComboboxRootContext } from './combobox-root';
 import { DestroyRef, Directive, inject } from '@angular/core';
 import { injectId } from '@radix-ng/primitives/core';
-import { injectComboboxRootContext } from './combobox-root';
 
 /**
  * An accessible label for the combobox. Registers its id so the input (and trigger) reference it via
diff --git a/packages/primitives/combobox/src/combobox-list.ts b/packages/primitives/combobox/src/combobox-list.ts
index 3ea7b51ff..ca0c27d2e 100644
--- a/packages/primitives/combobox/src/combobox-list.ts
+++ b/packages/primitives/combobox/src/combobox-list.ts
@@ -1,5 +1,5 @@
-import { Directive } from '@angular/core';
 import { injectComboboxRootContext } from './combobox-root';
+import { Directive } from '@angular/core';
 
 /**
  * The listbox container for options. Carries the id referenced by the input's `aria-controls`, exposes
diff --git a/packages/primitives/combobox/src/combobox-popup.ts b/packages/primitives/combobox/src/combobox-popup.ts
index 6b9b97051..dd3b3f60e 100644
--- a/packages/primitives/combobox/src/combobox-popup.ts
+++ b/packages/primitives/combobox/src/combobox-popup.ts
@@ -1,3 +1,4 @@
+import { injectComboboxRootContext } from './combobox-root';
 import { afterRenderEffect, computed, DestroyRef, Directive, ElementRef, inject } from '@angular/core';
 import {
     RDX_FLOATING_REGISTRATION,
@@ -7,7 +8,6 @@ import {
 } from '@radix-ng/primitives/core';
 import { RdxDismiss } from '@radix-ng/primitives/dismissable-layer';
 import { injectPopperContentWrapperContext, RdxPopperContent } from '@radix-ng/primitives/popper';
-import { injectComboboxRootContext } from './combobox-root';
 
 /**
  * The popup surface. Composes the popper content (for `data-side` / `data-align`) and a dismissable
diff --git a/packages/primitives/combobox/src/combobox-portal.ts b/packages/primitives/combobox/src/combobox-portal.ts
index c4582f6aa..50f96d5bf 100644
--- a/packages/primitives/combobox/src/combobox-portal.ts
+++ b/packages/primitives/combobox/src/combobox-portal.ts
@@ -1,8 +1,8 @@
+import { injectComboboxRootContext } from './combobox-root';
 import { Directive, input, isDevMode } from '@angular/core';
 import { rdxDevError } from '@radix-ng/primitives/core';
 import { RdxPortalContainer, RdxPortalPresence } from '@radix-ng/primitives/portal';
 import { provideRdxPresenceContext } from '@radix-ng/primitives/presence';
-import { injectComboboxRootContext } from './combobox-root';
 
 /**
  * Structural directive that teleports the combobox popup into a container (default `document.body`)
diff --git a/packages/primitives/combobox/src/combobox-positioner.ts b/packages/primitives/combobox/src/combobox-positioner.ts
index 23ccdd0fa..7a009eaa9 100644
--- a/packages/primitives/combobox/src/combobox-positioner.ts
+++ b/packages/primitives/combobox/src/combobox-positioner.ts
@@ -1,3 +1,4 @@
+import { injectComboboxRootContext } from './combobox-root';
 import { afterNextRender, Directive, ElementRef, inject, Injector } from '@angular/core';
 import { setupInternalBackdrop } from '@radix-ng/primitives/core';
 import {
@@ -5,7 +6,6 @@ import {
     provideRdxPopperContentWrapper,
     RdxPopperContentWrapper
 } from '@radix-ng/primitives/popper';
-import { injectComboboxRootContext } from './combobox-root';
 
 /**
  * Positions the combobox popup relative to the input anchor using the popper engine.
diff --git a/packages/primitives/combobox/src/combobox-root.ts b/packages/primitives/combobox/src/combobox-root.ts
index 83c392b46..033d84567 100644
--- a/packages/primitives/combobox/src/combobox-root.ts
+++ b/packages/primitives/combobox/src/combobox-root.ts
@@ -1,3 +1,12 @@
+import {
+    ComboboxEngine,
+    ComboboxFilter,
+    ComboboxHighlightReason,
+    ComboboxInputLayout,
+    ComboboxItemHighlightedDetails,
+    ComboboxItemRef,
+    useComboboxEngine
+} from './combobox-engine';
 import {
     booleanAttribute,
     computed,
@@ -21,10 +30,10 @@ import {
     createCancelableChangeEventDetails,
     createContext,
     createFloatingRootContext,
-    itemToStringLabel as defaultItemToStringLabel,
     Direction,
-    isNullish,
     isItemEqualToValue as itemsEqual,
+    isNullish,
+    itemToStringLabel as defaultItemToStringLabel,
     ItemValueComparator,
     provideFloatingRootContext,
     provideFloatingTree,
@@ -36,15 +45,6 @@ import {
 } from '@radix-ng/primitives/core';
 import { injectDirection } from '@radix-ng/primitives/direction-provider';
 import { RdxPopper } from '@radix-ng/primitives/popper';
-import {
-    ComboboxEngine,
-    ComboboxFilter,
-    ComboboxHighlightReason,
-    ComboboxInputLayout,
-    ComboboxItemHighlightedDetails,
-    ComboboxItemRef,
-    useComboboxEngine
-} from './combobox-engine';
 
 /** The value a combobox can hold: a single value, an array (multiple mode), or nothing. */
 export type ComboboxValue = AcceptableValue | AcceptableValue[];
diff --git a/packages/primitives/combobox/src/combobox-trigger.ts b/packages/primitives/combobox/src/combobox-trigger.ts
index e6f43e4b5..b71d4833d 100644
--- a/packages/primitives/combobox/src/combobox-trigger.ts
+++ b/packages/primitives/combobox/src/combobox-trigger.ts
@@ -1,6 +1,6 @@
+import { injectComboboxRootContext } from './combobox-root';
 import { DestroyRef, Directive, ElementRef, inject, signal } from '@angular/core';
 import { RdxFloatingInsideElement } from '@radix-ng/primitives/dismissable-layer';
-import { injectComboboxRootContext } from './combobox-root';
 
 /**
  * Toggles the combobox popup. Its semantics depend on the layout (Base UI's `inputInsidePopup`):
diff --git a/packages/primitives/combobox/src/combobox-value.ts b/packages/primitives/combobox/src/combobox-value.ts
index 1b158c5ca..b5ae06adb 100644
--- a/packages/primitives/combobox/src/combobox-value.ts
+++ b/packages/primitives/combobox/src/combobox-value.ts
@@ -1,6 +1,6 @@
+import { injectComboboxRootContext } from './combobox-root';
 import { computed, Directive, input } from '@angular/core';
 import { AcceptableValue, isNullish } from '@radix-ng/primitives/core';
-import { injectComboboxRootContext } from './combobox-root';
 
 /**
  * Renders the current selection's label(s) — typically inside a {@link RdxComboboxTrigger} for a
diff --git a/packages/primitives/combobox/stories/combobox-async-multiple.ts b/packages/primitives/combobox/stories/combobox-async-multiple.ts
index 3670de60a..494473afe 100644
--- a/packages/primitives/combobox/stories/combobox-async-multiple.ts
+++ b/packages/primitives/combobox/stories/combobox-async-multiple.ts
@@ -1,7 +1,7 @@
-import { ChangeDetectionStrategy, Component, computed, signal } from '@angular/core';
-import { LucideCheck, LucideX } from '@lucide/angular';
 import { cn, demoCombobox } from '../../storybook/styles';
 import { _importsCombobox } from '../index';
+import { ChangeDetectionStrategy, Component, computed, signal } from '@angular/core';
+import { LucideCheck, LucideX } from '@lucide/angular';
 
 interface DirectoryUser {
     id: string;
@@ -23,25 +23,25 @@ interface DirectoryUser {
     imports: [_importsCombobox, LucideCheck, LucideX],
     template: `
         <div
-            [(value)]="value"
+            multiple
+            rdxComboboxRoot
             [items]="items()"
             [itemToStringLabel]="labelOf"
             [filter]="null"
+            [(value)]="value"
             (onValueChange)="onValueChange($event.value)"
             (onInputValueChange)="search($event.value)"
             (onOpenChangeComplete)="onOpenChangeComplete($event)"
-            multiple
-            rdxComboboxRoot
         >
             <div class="flex flex-col gap-1">
                 <label class="text-foreground text-sm font-medium" for="async-reviewers">Assign reviewers</label>
-                <div [class]="control" rdxComboboxAnchor>
+                <div rdxComboboxAnchor [class]="control">
                     @if (value().length) {
-                        <div [class]="c.chips" rdxComboboxChips>
+                        <div rdxComboboxChips [class]="c.chips">
                             @for (user of value(); track user.id) {
-                                <span [class]="c.chip" [value]="user" rdxComboboxChip>
+                                <span rdxComboboxChip [class]="c.chip" [value]="user">
                                     {{ user.name }}
-                                    <button [class]="c.chipRemove" rdxComboboxChipRemove aria-label="Remove">
+                                    <button rdxComboboxChipRemove aria-label="Remove" [class]="c.chipRemove">
                                         <svg lucideX size="12"></svg>
                                     </button>
                                 </span>
@@ -50,15 +50,15 @@ interface DirectoryUser {
                     }
                     <input
                         id="async-reviewers"
+                        rdxComboboxInput
                         [class]="c.inputInline"
                         [placeholder]="value().length ? '' : 'e.g. Michael'"
-                        rdxComboboxInput
                     />
                 </div>
             </div>
 
-            <div *rdxComboboxPortal [class]="c.positioner" rdxComboboxPositioner>
-                <div [class]="c.popup" [attr.aria-busy]="loading() ? 'true' : null" rdxComboboxPopup>
+            <div *rdxComboboxPortal rdxComboboxPositioner [class]="c.positioner">
+                <div rdxComboboxPopup [class]="c.popup" [attr.aria-busy]="loading() ? 'true' : null">
                     <div rdxComboboxStatus>
                         @if (loading()) {
                             <div class="text-muted-foreground flex items-center gap-2 px-2 py-1.5 text-sm">
@@ -74,12 +74,12 @@ interface DirectoryUser {
                     </div>
 
                     @if (emptyMessage(); as message) {
-                        <div [class]="c.empty" rdxComboboxEmpty>{{ message }}</div>
+                        <div rdxComboboxEmpty [class]="c.empty">{{ message }}</div>
                     }
 
-                    <div [class]="c.list" rdxComboboxList aria-label="People">
+                    <div rdxComboboxList aria-label="People" [class]="c.list">
                         @for (user of items(); track user.id) {
-                            <div [class]="item" [value]="user" [textValue]="user.name" rdxComboboxItem>
+                            <div rdxComboboxItem [class]="item" [value]="user" [textValue]="user.name">
                                 <span
                                     class="col-start-1 mt-0.5 flex size-3.5 items-center justify-center"
                                     rdxComboboxItemIndicator
diff --git a/packages/primitives/combobox/stories/combobox-async.ts b/packages/primitives/combobox/stories/combobox-async.ts
index b5ed92647..6f4fac873 100644
--- a/packages/primitives/combobox/stories/combobox-async.ts
+++ b/packages/primitives/combobox/stories/combobox-async.ts
@@ -1,7 +1,7 @@
-import { ChangeDetectionStrategy, Component, computed, signal } from '@angular/core';
-import { LucideCheck, LucideChevronDown, LucideX } from '@lucide/angular';
 import { cn, demoCombobox } from '../../storybook/styles';
 import { _importsCombobox } from '../index';
+import { ChangeDetectionStrategy, Component, computed, signal } from '@angular/core';
+import { LucideCheck, LucideChevronDown, LucideX } from '@lucide/angular';
 
 interface DirectoryUser {
     id: string;
@@ -23,33 +23,33 @@ interface DirectoryUser {
     imports: [_importsCombobox, LucideChevronDown, LucideCheck, LucideX],
     template: `
         <div
-            [(value)]="value"
+            isItemEqualToValue="id"
+            rdxComboboxRoot
             [items]="items()"
             [itemToStringLabel]="labelOf"
             [filter]="null"
+            [(value)]="value"
             (onValueChange)="onValueChange()"
             (onInputValueChange)="search($event.value)"
             (onOpenChangeComplete)="onOpenChangeComplete($event)"
-            isItemEqualToValue="id"
-            rdxComboboxRoot
         >
             <div class="flex flex-col gap-1">
                 <label class="text-foreground text-sm font-medium" for="async-reviewer">Assign reviewer</label>
                 <div [class]="c.control">
-                    <input id="async-reviewer" [class]="input" rdxComboboxInput placeholder="e.g. Michael" />
+                    <input id="async-reviewer" rdxComboboxInput placeholder="e.g. Michael" [class]="input" />
                     @if (value()) {
-                        <button [class]="c.clear" rdxComboboxClear aria-label="Clear selection">
+                        <button rdxComboboxClear aria-label="Clear selection" [class]="c.clear">
                             <svg lucideX size="14"></svg>
                         </button>
                     }
-                    <button [class]="c.trigger" rdxComboboxTrigger aria-label="Open">
+                    <button rdxComboboxTrigger aria-label="Open" [class]="c.trigger">
                         <svg lucideChevronDown size="16"></svg>
                     </button>
                 </div>
             </div>
 
-            <div *rdxComboboxPortal [class]="c.positioner" rdxComboboxPositioner>
-                <div [class]="c.popup" [attr.aria-busy]="loading() ? 'true' : null" rdxComboboxPopup>
+            <div *rdxComboboxPortal rdxComboboxPositioner [class]="c.positioner">
+                <div rdxComboboxPopup [class]="c.popup" [attr.aria-busy]="loading() ? 'true' : null">
                     <div rdxComboboxStatus>
                         @if (loading()) {
                             <div class="text-muted-foreground flex items-center gap-2 px-2 py-1.5 text-sm">
@@ -65,12 +65,12 @@ interface DirectoryUser {
                     </div>
 
                     @if (emptyMessage(); as message) {
-                        <div [class]="c.empty" rdxComboboxEmpty>{{ message }}</div>
+                        <div rdxComboboxEmpty [class]="c.empty">{{ message }}</div>
                     }
 
-                    <div [class]="c.list" rdxComboboxList aria-label="People">
+                    <div rdxComboboxList aria-label="People" [class]="c.list">
                         @for (user of items(); track user.id) {
-                            <div [class]="item" [value]="user" [textValue]="user.name" rdxComboboxItem>
+                            <div rdxComboboxItem [class]="item" [value]="user" [textValue]="user.name">
                                 <span
                                     class="col-start-1 mt-0.5 flex size-3.5 items-center justify-center"
                                     rdxComboboxItemIndicator
diff --git a/packages/primitives/combobox/stories/combobox-command.ts b/packages/primitives/combobox/stories/combobox-command.ts
index 17b77b672..a10e8bb82 100644
--- a/packages/primitives/combobox/stories/combobox-command.ts
+++ b/packages/primitives/combobox/stories/combobox-command.ts
@@ -1,7 +1,7 @@
-import { ChangeDetectionStrategy, Component, signal } from '@angular/core';
-import { LucideArrowRight } from '@lucide/angular';
 import { demoCombobox } from '../../storybook/styles';
 import { _importsCombobox } from '../index';
+import { ChangeDetectionStrategy, Component, signal } from '@angular/core';
+import { LucideArrowRight } from '@lucide/angular';
 
 /**
  * A command/search palette: `selectionMode="none"` (no value is committed — it filters and runs an
@@ -14,20 +14,20 @@ import { _importsCombobox } from '../index';
     template: `
         <div
             class="flex w-64 flex-col gap-2"
-            (onValueChange)="run($event.value)"
             selectionMode="none"
             autoHighlight="always"
             rdxComboboxRoot
+            (onValueChange)="run($event.value)"
         >
             <div [class]="c.control">
-                <input [class]="c.input" rdxComboboxInput placeholder="Run a command…" aria-label="Command" />
+                <input rdxComboboxInput placeholder="Run a command…" aria-label="Command" [class]="c.input" />
             </div>
 
-            <div *rdxComboboxPortal [class]="c.positioner" rdxComboboxPositioner>
-                <div [class]="c.popup" rdxComboboxPopup>
-                    <div [class]="c.list" rdxComboboxList aria-label="Commands">
+            <div *rdxComboboxPortal rdxComboboxPositioner [class]="c.positioner">
+                <div rdxComboboxPopup [class]="c.popup">
+                    <div rdxComboboxList aria-label="Commands" [class]="c.list">
                         @for (command of commands; track command) {
-                            <div [class]="c.item" [value]="command" rdxComboboxItem>
+                            <div rdxComboboxItem [class]="c.item" [value]="command">
                                 <span [class]="c.itemIndicator">
                                     <svg lucideArrowRight size="14"></svg>
                                 </span>
@@ -35,7 +35,7 @@ import { _importsCombobox } from '../index';
                             </div>
                         }
                     </div>
-                    <div [class]="c.empty" rdxComboboxEmpty>No commands.</div>
+                    <div rdxComboboxEmpty [class]="c.empty">No commands.</div>
                 </div>
             </div>
 
diff --git a/packages/primitives/combobox/stories/combobox-creatable.ts b/packages/primitives/combobox/stories/combobox-creatable.ts
index 4a4a2791b..98921af94 100644
--- a/packages/primitives/combobox/stories/combobox-creatable.ts
+++ b/packages/primitives/combobox/stories/combobox-creatable.ts
@@ -1,8 +1,8 @@
+import { cn, demoButton, demoCombobox, demoDialog } from '../../storybook/styles';
+import { _importsCombobox } from '../index';
 import { ChangeDetectionStrategy, Component, computed, signal } from '@angular/core';
 import { LucideCheck, LucideChevronDown, LucidePlus, LucideX } from '@lucide/angular';
 import { dialogImports } from '@radix-ng/primitives/dialog';
-import { cn, demoButton, demoCombobox, demoDialog } from '../../storybook/styles';
-import { _importsCombobox } from '../index';
 
 /** Sentinel value for the "create" row, intercepted in `onValueChange`. */
 const CREATE = '__rdx_create__';
@@ -18,20 +18,20 @@ const CREATE = '__rdx_create__';
     imports: [_importsCombobox, ...dialogImports, LucideChevronDown, LucideCheck, LucidePlus, LucideX],
     template: `
         <div
+            multiple
+            rdxComboboxRoot
             [(value)]="value"
             [(open)]="open"
             (onInputValueChange)="query.set($event.value)"
             (onValueChange)="onValueChange($event.value)"
-            multiple
-            rdxComboboxRoot
         >
-            <div [class]="control" rdxComboboxAnchor>
+            <div rdxComboboxAnchor [class]="control">
                 @if (value().length) {
-                    <div [class]="c.chips" rdxComboboxChips>
+                    <div rdxComboboxChips [class]="c.chips">
                         @for (label of value(); track label) {
-                            <span [class]="c.chip" [value]="label" rdxComboboxChip>
+                            <span rdxComboboxChip [class]="c.chip" [value]="label">
                                 {{ label }}
-                                <button [class]="c.chipRemove" rdxComboboxChipRemove aria-label="Remove">
+                                <button rdxComboboxChipRemove aria-label="Remove" [class]="c.chipRemove">
                                     <svg lucideX size="12"></svg>
                                 </button>
                             </span>
@@ -39,29 +39,29 @@ const CREATE = '__rdx_create__';
                     </div>
                 }
                 <input
-                    [class]="c.inputInline"
-                    [placeholder]="value().length ? '' : 'e.g. bug'"
                     rdxComboboxInput
                     aria-label="Labels"
+                    [class]="c.inputInline"
+                    [placeholder]="value().length ? '' : 'e.g. bug'"
                 />
-                <button [class]="c.trigger" rdxComboboxTrigger aria-label="Open">
+                <button rdxComboboxTrigger aria-label="Open" [class]="c.trigger">
                     <svg lucideChevronDown size="16"></svg>
                 </button>
             </div>
 
-            <div *rdxComboboxPortal [class]="c.positioner" rdxComboboxPositioner>
-                <div [class]="c.popup" rdxComboboxPopup>
-                    <div [class]="c.list" rdxComboboxList aria-label="Labels">
+            <div *rdxComboboxPortal rdxComboboxPositioner [class]="c.positioner">
+                <div rdxComboboxPopup [class]="c.popup">
+                    <div rdxComboboxList aria-label="Labels" [class]="c.list">
                         @for (label of options(); track label) {
-                            <div [class]="c.item" [value]="label" rdxComboboxItem>
-                                <span [class]="c.itemIndicator" rdxComboboxItemIndicator>
+                            <div rdxComboboxItem [class]="c.item" [value]="label">
+                                <span rdxComboboxItemIndicator [class]="c.itemIndicator">
                                     <svg lucideCheck size="14"></svg>
                                 </span>
                                 {{ label }}
                             </div>
                         }
                         @if (showCreate()) {
-                            <div [class]="c.item" [value]="CREATE" [textValue]="query()" rdxComboboxItem>
+                            <div rdxComboboxItem [class]="c.item" [value]="CREATE" [textValue]="query()">
                                 <span [class]="c.itemIndicator">
                                     <svg lucidePlus size="14"></svg>
                                 </span>
@@ -69,30 +69,30 @@ const CREATE = '__rdx_create__';
                             </div>
                         }
                     </div>
-                    <div [class]="c.empty" rdxComboboxEmpty>No labels found.</div>
+                    <div rdxComboboxEmpty [class]="c.empty">No labels found.</div>
                 </div>
             </div>
         </div>
 
-        <div [(open)]="dialogOpen" rdxDialogRoot>
+        <div rdxDialogRoot [(open)]="dialogOpen">
             <ng-template rdxDialogPortal>
-                <div [class]="cn(d.backdrop, d.backdropAnimated)" rdxDialogBackdrop></div>
-                <div [class]="cn(d.popup, d.popupAnimated)" rdxDialogPopup>
-                    <h2 [class]="d.title" rdxDialogTitle>Create new label</h2>
-                    <p [class]="d.description" rdxDialogDescription>Add a new label to select.</p>
+                <div rdxDialogBackdrop [class]="cn(d.backdrop, d.backdropAnimated)"></div>
+                <div rdxDialogPopup [class]="cn(d.popup, d.popupAnimated)">
+                    <h2 rdxDialogTitle [class]="d.title">Create new label</h2>
+                    <p rdxDialogDescription [class]="d.description">Add a new label to select.</p>
                     <form (submit)="confirmCreate($event)">
                         <input
+                            placeholder="Label name"
+                            aria-label="Label name"
                             [class]="dialogInput"
                             [value]="newLabel()"
                             (input)="newLabel.set($any($event.target).value)"
-                            placeholder="Label name"
-                            aria-label="Label name"
                         />
                         <div [class]="d.footer">
-                            <button [class]="cn(b.base, b.outline, b.size.sm)" type="button" rdxDialogClose>
+                            <button type="button" rdxDialogClose [class]="cn(b.base, b.outline, b.size.sm)">
                                 Cancel
                             </button>
-                            <button [class]="cn(b.base, b.primary, b.size.sm)" type="submit">Create</button>
+                            <button type="submit" [class]="cn(b.base, b.primary, b.size.sm)">Create</button>
                         </div>
                     </form>
                 </div>
diff --git a/packages/primitives/combobox/stories/combobox-default.ts b/packages/primitives/combobox/stories/combobox-default.ts
index fe8c2fd8f..e0cb215d4 100644
--- a/packages/primitives/combobox/stories/combobox-default.ts
+++ b/packages/primitives/combobox/stories/combobox-default.ts
@@ -1,34 +1,34 @@
-import { ChangeDetectionStrategy, Component, signal } from '@angular/core';
-import { LucideCheck, LucideChevronDown } from '@lucide/angular';
 import { demoCombobox } from '../../storybook/styles';
 import { _importsCombobox } from '../index';
+import { ChangeDetectionStrategy, Component, signal } from '@angular/core';
+import { LucideCheck, LucideChevronDown } from '@lucide/angular';
 
 @Component({
     changeDetection: ChangeDetectionStrategy.Eager,
     selector: 'combobox-default',
     imports: [_importsCombobox, LucideChevronDown, LucideCheck],
     template: `
-        <div [(value)]="value" rdxComboboxRoot>
+        <div rdxComboboxRoot [(value)]="value">
             <div [class]="c.control">
-                <input [class]="c.input" rdxComboboxInput placeholder="Search a fruit…" aria-label="Fruit" />
-                <button [class]="c.trigger" rdxComboboxTrigger aria-label="Open">
+                <input rdxComboboxInput placeholder="Search a fruit…" aria-label="Fruit" [class]="c.input" />
+                <button rdxComboboxTrigger aria-label="Open" [class]="c.trigger">
                     <svg lucideChevronDown size="16"></svg>
                 </button>
             </div>
 
-            <div *rdxComboboxPortal [class]="c.positioner" rdxComboboxPositioner>
-                <div [class]="c.popup" rdxComboboxPopup>
-                    <div [class]="c.list" rdxComboboxList aria-label="Fruits">
+            <div *rdxComboboxPortal rdxComboboxPositioner [class]="c.positioner">
+                <div rdxComboboxPopup [class]="c.popup">
+                    <div rdxComboboxList aria-label="Fruits" [class]="c.list">
                         @for (fruit of fruits; track fruit) {
-                            <div [class]="c.item" [value]="fruit" rdxComboboxItem>
-                                <span [class]="c.itemIndicator" rdxComboboxItemIndicator>
+                            <div rdxComboboxItem [class]="c.item" [value]="fruit">
+                                <span rdxComboboxItemIndicator [class]="c.itemIndicator">
                                     <svg lucideCheck size="14"></svg>
                                 </span>
                                 {{ fruit }}
                             </div>
                         }
                     </div>
-                    <div [class]="c.empty" rdxComboboxEmpty>No fruit found.</div>
+                    <div rdxComboboxEmpty [class]="c.empty">No fruit found.</div>
                 </div>
             </div>
         </div>
diff --git a/packages/primitives/combobox/stories/combobox-disabled.ts b/packages/primitives/combobox/stories/combobox-disabled.ts
index b1442b819..1549f124c 100644
--- a/packages/primitives/combobox/stories/combobox-disabled.ts
+++ b/packages/primitives/combobox/stories/combobox-disabled.ts
@@ -1,27 +1,27 @@
-import { ChangeDetectionStrategy, Component, signal } from '@angular/core';
-import { LucideCheck, LucideChevronDown } from '@lucide/angular';
 import { demoCombobox } from '../../storybook/styles';
 import { _importsCombobox } from '../index';
+import { ChangeDetectionStrategy, Component, signal } from '@angular/core';
+import { LucideCheck, LucideChevronDown } from '@lucide/angular';
 
 @Component({
     changeDetection: ChangeDetectionStrategy.Eager,
     selector: 'combobox-disabled',
     imports: [_importsCombobox, LucideChevronDown, LucideCheck],
     template: `
-        <div [(value)]="value" disabled rdxComboboxRoot>
+        <div disabled rdxComboboxRoot [(value)]="value">
             <div [class]="c.control">
-                <input [class]="c.input" rdxComboboxInput placeholder="Search a fruit…" aria-label="Fruit" />
-                <button [class]="c.trigger" rdxComboboxTrigger aria-label="Open">
+                <input rdxComboboxInput placeholder="Search a fruit…" aria-label="Fruit" [class]="c.input" />
+                <button rdxComboboxTrigger aria-label="Open" [class]="c.trigger">
                     <svg lucideChevronDown size="16"></svg>
                 </button>
             </div>
 
-            <div *rdxComboboxPortal [class]="c.positioner" rdxComboboxPositioner>
-                <div [class]="c.popup" rdxComboboxPopup>
-                    <div [class]="c.list" rdxComboboxList aria-label="Fruits">
+            <div *rdxComboboxPortal rdxComboboxPositioner [class]="c.positioner">
+                <div rdxComboboxPopup [class]="c.popup">
+                    <div rdxComboboxList aria-label="Fruits" [class]="c.list">
                         @for (fruit of fruits; track fruit) {
-                            <div [class]="c.item" [value]="fruit" rdxComboboxItem>
-                                <span [class]="c.itemIndicator" rdxComboboxItemIndicator>
+                            <div rdxComboboxItem [class]="c.item" [value]="fruit">
+                                <span rdxComboboxItemIndicator [class]="c.itemIndicator">
                                     <svg lucideCheck size="14"></svg>
                                 </span>
                                 {{ fruit }}
diff --git a/packages/primitives/combobox/stories/combobox-empty.ts b/packages/primitives/combobox/stories/combobox-empty.ts
index 9c3ded576..c5d2aab10 100644
--- a/packages/primitives/combobox/stories/combobox-empty.ts
+++ b/packages/primitives/combobox/stories/combobox-empty.ts
@@ -1,7 +1,7 @@
-import { ChangeDetectionStrategy, Component, signal } from '@angular/core';
-import { LucideCheck, LucideChevronDown } from '@lucide/angular';
 import { demoCombobox } from '../../storybook/styles';
 import { _importsCombobox } from '../index';
+import { ChangeDetectionStrategy, Component, signal } from '@angular/core';
+import { LucideCheck, LucideChevronDown } from '@lucide/angular';
 
 /**
  * `RdxComboboxEmpty` renders only when no item matches the query — type something like "zzz" to see
@@ -12,27 +12,27 @@ import { _importsCombobox } from '../index';
     selector: 'combobox-empty',
     imports: [_importsCombobox, LucideChevronDown, LucideCheck],
     template: `
-        <div [(value)]="value" rdxComboboxRoot>
+        <div rdxComboboxRoot [(value)]="value">
             <div [class]="c.control">
-                <input [class]="c.input" rdxComboboxInput placeholder="Try typing 'zzz'…" aria-label="Fruit" />
-                <button [class]="c.trigger" rdxComboboxTrigger aria-label="Open">
+                <input rdxComboboxInput placeholder="Try typing 'zzz'…" aria-label="Fruit" [class]="c.input" />
+                <button rdxComboboxTrigger aria-label="Open" [class]="c.trigger">
                     <svg lucideChevronDown size="16"></svg>
                 </button>
             </div>
 
-            <div *rdxComboboxPortal [class]="c.positioner" rdxComboboxPositioner>
-                <div [class]="c.popup" rdxComboboxPopup>
-                    <div [class]="c.list" rdxComboboxList aria-label="Fruits">
+            <div *rdxComboboxPortal rdxComboboxPositioner [class]="c.positioner">
+                <div rdxComboboxPopup [class]="c.popup">
+                    <div rdxComboboxList aria-label="Fruits" [class]="c.list">
                         @for (fruit of fruits; track fruit) {
-                            <div [class]="c.item" [value]="fruit" rdxComboboxItem>
-                                <span [class]="c.itemIndicator" rdxComboboxItemIndicator>
+                            <div rdxComboboxItem [class]="c.item" [value]="fruit">
+                                <span rdxComboboxItemIndicator [class]="c.itemIndicator">
                                     <svg lucideCheck size="14"></svg>
                                 </span>
                                 {{ fruit }}
                             </div>
                         }
                     </div>
-                    <div [class]="c.empty" rdxComboboxEmpty>No fruit matches your search.</div>
+                    <div rdxComboboxEmpty [class]="c.empty">No fruit matches your search.</div>
                 </div>
             </div>
         </div>
diff --git a/packages/primitives/combobox/stories/combobox-grid.ts b/packages/primitives/combobox/stories/combobox-grid.ts
index b66377374..c59e1ed7b 100644
--- a/packages/primitives/combobox/stories/combobox-grid.ts
+++ b/packages/primitives/combobox/stories/combobox-grid.ts
@@ -1,7 +1,7 @@
-import { ChangeDetectionStrategy, Component, signal } from '@angular/core';
-import { LucideChevronDown } from '@lucide/angular';
 import { cn, demoCombobox } from '../../storybook/styles';
 import { _importsCombobox } from '../index';
+import { ChangeDetectionStrategy, Component, signal } from '@angular/core';
+import { LucideChevronDown } from '@lucide/angular';
 
 /**
  * A 2D grid list (`grid`): `ArrowUp`/`ArrowDown` move between rows keeping the column, `ArrowLeft`/
@@ -13,26 +13,26 @@ import { _importsCombobox } from '../index';
     selector: 'combobox-grid',
     imports: [_importsCombobox, LucideChevronDown],
     template: `
-        <div [(value)]="value" grid rdxComboboxRoot>
+        <div grid rdxComboboxRoot [(value)]="value">
             <div [class]="c.control">
-                <input [class]="c.input" rdxComboboxInput placeholder="Pick a size…" aria-label="Size" />
-                <button [class]="c.trigger" rdxComboboxTrigger aria-label="Open">
+                <input rdxComboboxInput placeholder="Pick a size…" aria-label="Size" [class]="c.input" />
+                <button rdxComboboxTrigger aria-label="Open" [class]="c.trigger">
                     <svg lucideChevronDown size="16"></svg>
                 </button>
             </div>
 
-            <div *rdxComboboxPortal [class]="c.positioner" rdxComboboxPositioner>
-                <div [class]="c.popup" rdxComboboxPopup>
-                    <div [class]="list" rdxComboboxList aria-label="Sizes">
+            <div *rdxComboboxPortal rdxComboboxPositioner [class]="c.positioner">
+                <div rdxComboboxPopup [class]="c.popup">
+                    <div rdxComboboxList aria-label="Sizes" [class]="list">
                         @for (row of rows; track $index) {
-                            <div [class]="rowClass" rdxComboboxRow>
+                            <div rdxComboboxRow [class]="rowClass">
                                 @for (size of row; track size) {
-                                    <div [class]="cell" [value]="size" rdxComboboxItem>{{ size }}</div>
+                                    <div rdxComboboxItem [class]="cell" [value]="size">{{ size }}</div>
                                 }
                             </div>
                         }
                     </div>
-                    <div [class]="c.empty" rdxComboboxEmpty>No size found.</div>
+                    <div rdxComboboxEmpty [class]="c.empty">No size found.</div>
                 </div>
             </div>
         </div>
diff --git a/packages/primitives/combobox/stories/combobox-grouped.ts b/packages/primitives/combobox/stories/combobox-grouped.ts
index f4a98e4be..9eb822739 100644
--- a/packages/primitives/combobox/stories/combobox-grouped.ts
+++ b/packages/primitives/combobox/stories/combobox-grouped.ts
@@ -1,7 +1,7 @@
-import { ChangeDetectionStrategy, Component, signal } from '@angular/core';
-import { LucideCheck, LucideChevronDown } from '@lucide/angular';
 import { demoCombobox } from '../../storybook/styles';
 import { _importsCombobox } from '../index';
+import { ChangeDetectionStrategy, Component, signal } from '@angular/core';
+import { LucideCheck, LucideChevronDown } from '@lucide/angular';
 
 /** Options organized into sections with `RdxComboboxGroup` / `RdxComboboxGroupLabel`. A group hides
  * its heading automatically when all of its items are filtered out. */
@@ -10,22 +10,22 @@ import { _importsCombobox } from '../index';
     selector: 'combobox-grouped',
     imports: [_importsCombobox, LucideChevronDown, LucideCheck],
     template: `
-        <div [(value)]="value" rdxComboboxRoot>
+        <div rdxComboboxRoot [(value)]="value">
             <div [class]="c.control">
-                <input [class]="c.input" rdxComboboxInput placeholder="Search produce…" aria-label="Produce" />
-                <button [class]="c.trigger" rdxComboboxTrigger aria-label="Open">
+                <input rdxComboboxInput placeholder="Search produce…" aria-label="Produce" [class]="c.input" />
+                <button rdxComboboxTrigger aria-label="Open" [class]="c.trigger">
                     <svg lucideChevronDown size="16"></svg>
                 </button>
             </div>
 
-            <div *rdxComboboxPortal [class]="c.positioner" rdxComboboxPositioner>
-                <div [class]="c.popup" rdxComboboxPopup>
-                    <div [class]="c.list" rdxComboboxList aria-label="Produce">
+            <div *rdxComboboxPortal rdxComboboxPositioner [class]="c.positioner">
+                <div rdxComboboxPopup [class]="c.popup">
+                    <div rdxComboboxList aria-label="Produce" [class]="c.list">
                         <div rdxComboboxGroup>
-                            <div [class]="c.groupLabel" rdxComboboxGroupLabel>Fruits</div>
+                            <div rdxComboboxGroupLabel [class]="c.groupLabel">Fruits</div>
                             @for (fruit of fruits; track fruit) {
-                                <div [class]="c.item" [value]="fruit" rdxComboboxItem>
-                                    <span [class]="c.itemIndicator" rdxComboboxItemIndicator>
+                                <div rdxComboboxItem [class]="c.item" [value]="fruit">
+                                    <span rdxComboboxItemIndicator [class]="c.itemIndicator">
                                         <svg lucideCheck size="14"></svg>
                                     </span>
                                     {{ fruit }}
@@ -33,10 +33,10 @@ import { _importsCombobox } from '../index';
                             }
                         </div>
                         <div rdxComboboxGroup>
-                            <div [class]="c.groupLabel" rdxComboboxGroupLabel>Vegetables</div>
+                            <div rdxComboboxGroupLabel [class]="c.groupLabel">Vegetables</div>
                             @for (vegetable of vegetables; track vegetable) {
-                                <div [class]="c.item" [value]="vegetable" rdxComboboxItem>
-                                    <span [class]="c.itemIndicator" rdxComboboxItemIndicator>
+                                <div rdxComboboxItem [class]="c.item" [value]="vegetable">
+                                    <span rdxComboboxItemIndicator [class]="c.itemIndicator">
                                         <svg lucideCheck size="14"></svg>
                                     </span>
                                     {{ vegetable }}
@@ -44,7 +44,7 @@ import { _importsCombobox } from '../index';
                             }
                         </div>
                     </div>
-                    <div [class]="c.empty" rdxComboboxEmpty>No produce found.</div>
+                    <div rdxComboboxEmpty [class]="c.empty">No produce found.</div>
                 </div>
             </div>
         </div>
diff --git a/packages/primitives/combobox/stories/combobox-input-in-popup.ts b/packages/primitives/combobox/stories/combobox-input-in-popup.ts
index ed047f234..88c051182 100644
--- a/packages/primitives/combobox/stories/combobox-input-in-popup.ts
+++ b/packages/primitives/combobox/stories/combobox-input-in-popup.ts
@@ -1,7 +1,7 @@
-import { ChangeDetectionStrategy, Component, signal } from '@angular/core';
-import { LucideCheck, LucideChevronDown } from '@lucide/angular';
 import { demoCombobox } from '../../storybook/styles';
 import { _importsCombobox } from '../index';
+import { ChangeDetectionStrategy, Component, signal } from '@angular/core';
+import { LucideCheck, LucideChevronDown } from '@lucide/angular';
 
 /**
  * A select-like pattern where the trigger shows the current value and the **search input lives inside
@@ -13,30 +13,30 @@ import { _importsCombobox } from '../index';
     selector: 'combobox-input-in-popup',
     imports: [_importsCombobox, LucideChevronDown, LucideCheck],
     template: `
-        <div class="flex flex-col items-start gap-1" [(value)]="value" rdxComboboxRoot>
+        <div class="flex flex-col items-start gap-1" rdxComboboxRoot [(value)]="value">
             <span class="text-foreground text-sm font-medium" rdxComboboxLabel>Fruit</span>
-            <button [class]="c.selectTrigger" rdxComboboxTrigger rdxComboboxAnchor>
+            <button rdxComboboxTrigger rdxComboboxAnchor [class]="c.selectTrigger">
                 <span #selectedValue="rdxComboboxValue" rdxComboboxValue placeholder="Select a fruit">
                     {{ selectedValue.slotText() }}
                 </span>
                 <svg lucideChevronDown size="16"></svg>
             </button>
 
-            <div *rdxComboboxPortal [class]="c.positioner" rdxComboboxPositioner>
-                <div [class]="c.popup + ' p-0'" rdxComboboxPopup>
+            <div *rdxComboboxPortal rdxComboboxPositioner [class]="c.positioner">
+                <div rdxComboboxPopup [class]="c.popup + ' p-0'">
                     <div [class]="c.searchHeader">
-                        <input [class]="c.popupInput" rdxComboboxInput placeholder="Search…" aria-label="Fruit" />
+                        <input rdxComboboxInput placeholder="Search…" aria-label="Fruit" [class]="c.popupInput" />
                     </div>
-                    <div [class]="c.list + ' p-1'" rdxComboboxList aria-label="Fruits">
+                    <div rdxComboboxList aria-label="Fruits" [class]="c.list + ' p-1'">
                         @for (fruit of fruits; track fruit) {
-                            <div [class]="c.item" [value]="fruit" rdxComboboxItem>
-                                <span [class]="c.itemIndicator" rdxComboboxItemIndicator>
+                            <div rdxComboboxItem [class]="c.item" [value]="fruit">
+                                <span rdxComboboxItemIndicator [class]="c.itemIndicator">
                                     <svg lucideCheck size="14"></svg>
                                 </span>
                                 {{ fruit }}
                             </div>
                         }
-                        <div [class]="c.empty" rdxComboboxEmpty>No fruit found.</div>
+                        <div rdxComboboxEmpty [class]="c.empty">No fruit found.</div>
                     </div>
                 </div>
             </div>
diff --git a/packages/primitives/combobox/stories/combobox-modal.ts b/packages/primitives/combobox/stories/combobox-modal.ts
index aa25af7f2..54606f821 100644
--- a/packages/primitives/combobox/stories/combobox-modal.ts
+++ b/packages/primitives/combobox/stories/combobox-modal.ts
@@ -1,7 +1,7 @@
-import { ChangeDetectionStrategy, Component, signal } from '@angular/core';
-import { LucideCheck, LucideChevronDown } from '@lucide/angular';
 import { demoCombobox } from '../../storybook/styles';
 import { _importsCombobox } from '../index';
+import { ChangeDetectionStrategy, Component, signal } from '@angular/core';
+import { LucideCheck, LucideChevronDown } from '@lucide/angular';
 
 /**
  * Modal combobox: while open, page scroll is locked and content outside the popup is inert. A
@@ -12,29 +12,29 @@ import { _importsCombobox } from '../index';
     selector: 'combobox-modal',
     imports: [_importsCombobox, LucideChevronDown, LucideCheck],
     template: `
-        <div [(value)]="value" modal rdxComboboxRoot>
+        <div modal rdxComboboxRoot [(value)]="value">
             <div [class]="c.control">
-                <input [class]="c.input" rdxComboboxInput placeholder="Search a fruit…" aria-label="Fruit" />
-                <button [class]="c.trigger" rdxComboboxTrigger aria-label="Open">
+                <input rdxComboboxInput placeholder="Search a fruit…" aria-label="Fruit" [class]="c.input" />
+                <button rdxComboboxTrigger aria-label="Open" [class]="c.trigger">
                     <svg lucideChevronDown size="16"></svg>
                 </button>
             </div>
 
             <ng-template rdxComboboxPortal>
-                <div [class]="c.backdrop" rdxComboboxBackdrop></div>
-                <div [class]="c.positioner" rdxComboboxPositioner>
-                    <div [class]="c.popup" rdxComboboxPopup>
-                        <div [class]="c.list" rdxComboboxList aria-label="Fruits">
+                <div rdxComboboxBackdrop [class]="c.backdrop"></div>
+                <div rdxComboboxPositioner [class]="c.positioner">
+                    <div rdxComboboxPopup [class]="c.popup">
+                        <div rdxComboboxList aria-label="Fruits" [class]="c.list">
                             @for (fruit of fruits; track fruit) {
-                                <div [class]="c.item" [value]="fruit" rdxComboboxItem>
-                                    <span [class]="c.itemIndicator" rdxComboboxItemIndicator>
+                                <div rdxComboboxItem [class]="c.item" [value]="fruit">
+                                    <span rdxComboboxItemIndicator [class]="c.itemIndicator">
                                         <svg lucideCheck size="14"></svg>
                                     </span>
                                     {{ fruit }}
                                 </div>
                             }
                         </div>
-                        <div [class]="c.empty" rdxComboboxEmpty>No fruit found.</div>
+                        <div rdxComboboxEmpty [class]="c.empty">No fruit found.</div>
                     </div>
                 </div>
             </ng-template>
diff --git a/packages/primitives/combobox/stories/combobox-multiple.ts b/packages/primitives/combobox/stories/combobox-multiple.ts
index c869b941c..71adf1efc 100644
--- a/packages/primitives/combobox/stories/combobox-multiple.ts
+++ b/packages/primitives/combobox/stories/combobox-multiple.ts
@@ -1,21 +1,21 @@
-import { ChangeDetectionStrategy, Component, signal } from '@angular/core';
-import { LucideCheck, LucideChevronDown, LucideX } from '@lucide/angular';
 import { cn, demoCombobox } from '../../storybook/styles';
 import { _importsCombobox } from '../index';
+import { ChangeDetectionStrategy, Component, signal } from '@angular/core';
+import { LucideCheck, LucideChevronDown, LucideX } from '@lucide/angular';
 
 @Component({
     changeDetection: ChangeDetectionStrategy.Eager,
     selector: 'combobox-multiple',
     imports: [_importsCombobox, LucideChevronDown, LucideCheck, LucideX],
     template: `
-        <div [(value)]="value" multiple rdxComboboxRoot>
-            <div [class]="control" rdxComboboxAnchor>
+        <div multiple rdxComboboxRoot [(value)]="value">
+            <div rdxComboboxAnchor [class]="control">
                 @if (value().length) {
-                    <div [class]="c.chips" rdxComboboxChips>
+                    <div rdxComboboxChips [class]="c.chips">
                         @for (fruit of value(); track fruit) {
-                            <span [class]="c.chip" [value]="fruit" rdxComboboxChip>
+                            <span rdxComboboxChip [class]="c.chip" [value]="fruit">
                                 {{ fruit }}
-                                <button [class]="c.chipRemove" rdxComboboxChipRemove aria-label="Remove">
+                                <button rdxComboboxChipRemove aria-label="Remove" [class]="c.chipRemove">
                                     <svg lucideX size="12"></svg>
                                 </button>
                             </span>
@@ -23,29 +23,29 @@ import { _importsCombobox } from '../index';
                     </div>
                 }
                 <input
-                    [class]="c.inputInline"
-                    [placeholder]="value().length ? '' : 'Add fruits…'"
                     rdxComboboxInput
                     aria-label="Fruits"
+                    [class]="c.inputInline"
+                    [placeholder]="value().length ? '' : 'Add fruits…'"
                 />
-                <button [class]="c.trigger" rdxComboboxTrigger aria-label="Open">
+                <button rdxComboboxTrigger aria-label="Open" [class]="c.trigger">
                     <svg lucideChevronDown size="16"></svg>
                 </button>
             </div>
 
-            <div *rdxComboboxPortal [class]="c.positioner" rdxComboboxPositioner>
-                <div [class]="c.popup" rdxComboboxPopup>
-                    <div [class]="c.list" rdxComboboxList aria-label="Fruits">
+            <div *rdxComboboxPortal rdxComboboxPositioner [class]="c.positioner">
+                <div rdxComboboxPopup [class]="c.popup">
+                    <div rdxComboboxList aria-label="Fruits" [class]="c.list">
                         @for (fruit of fruits; track fruit) {
-                            <div [class]="c.item" [value]="fruit" rdxComboboxItem>
-                                <span [class]="c.itemIndicator" rdxComboboxItemIndicator>
+                            <div rdxComboboxItem [class]="c.item" [value]="fruit">
+                                <span rdxComboboxItemIndicator [class]="c.itemIndicator">
                                     <svg lucideCheck size="14"></svg>
                                 </span>
                                 {{ fruit }}
                             </div>
                         }
                     </div>
-                    <div [class]="c.empty" rdxComboboxEmpty>No fruit found.</div>
+                    <div rdxComboboxEmpty [class]="c.empty">No fruit found.</div>
                 </div>
             </div>
         </div>
diff --git a/packages/primitives/combobox/stories/combobox-open-change.ts b/packages/primitives/combobox/stories/combobox-open-change.ts
index 4e067669d..a70194e06 100644
--- a/packages/primitives/combobox/stories/combobox-open-change.ts
+++ b/packages/primitives/combobox/stories/combobox-open-change.ts
@@ -1,7 +1,7 @@
-import { ChangeDetectionStrategy, Component, signal } from '@angular/core';
-import { LucideCheck, LucideChevronDown } from '@lucide/angular';
 import { demoCombobox } from '../../storybook/styles';
 import { _importsCombobox, RdxComboboxOpenChange } from '../index';
+import { ChangeDetectionStrategy, Component, signal } from '@angular/core';
+import { LucideCheck, LucideChevronDown } from '@lucide/angular';
 
 interface ComboboxOpenChangeLogEntry {
     label: string;
@@ -20,44 +20,44 @@ interface ComboboxOpenChangeLogEntry {
                 <div class="flex flex-col gap-3">
                     <div
                         #root="rdxComboboxRoot"
+                        rdxComboboxRoot
                         [(open)]="open"
                         [(value)]="value"
                         (onOpenChange)="handleOpenChange($event)"
-                        rdxComboboxRoot
                     >
                         <div [class]="c.control">
                             <input
-                                [class]="c.input"
                                 rdxComboboxInput
                                 placeholder="Search a framework…"
                                 aria-label="Framework"
+                                [class]="c.input"
                             />
-                            <button [class]="c.trigger" rdxComboboxTrigger aria-label="Open">
+                            <button rdxComboboxTrigger aria-label="Open" [class]="c.trigger">
                                 <svg lucideChevronDown size="16"></svg>
                             </button>
                         </div>
 
-                        <div *rdxComboboxPortal [class]="c.positioner" rdxComboboxPositioner>
-                            <div [class]="c.popup" rdxComboboxPopup>
-                                <div [class]="c.list" rdxComboboxList aria-label="Frameworks">
+                        <div *rdxComboboxPortal rdxComboboxPositioner [class]="c.positioner">
+                            <div rdxComboboxPopup [class]="c.popup">
+                                <div rdxComboboxList aria-label="Frameworks" [class]="c.list">
                                     @for (framework of frameworks; track framework) {
-                                        <div [class]="c.item" [value]="framework" rdxComboboxItem>
-                                            <span [class]="c.itemIndicator" rdxComboboxItemIndicator>
+                                        <div rdxComboboxItem [class]="c.item" [value]="framework">
+                                            <span rdxComboboxItemIndicator [class]="c.itemIndicator">
                                                 <svg lucideCheck size="14"></svg>
                                             </span>
                                             {{ framework }}
                                         </div>
                                     }
                                 </div>
-                                <div [class]="c.empty" rdxComboboxEmpty>No match found.</div>
+                                <div rdxComboboxEmpty [class]="c.empty">No match found.</div>
                             </div>
                         </div>
 
                         <div class="grid gap-2 pt-3">
                             <button
                                 class="border-border bg-background text-foreground hover:bg-muted inline-flex h-8 items-center justify-between rounded-md border px-3 text-xs"
-                                (click)="cancelClose.update((value) => !value)"
                                 type="button"
+                                (click)="cancelClose.update((value) => !value)"
                             >
                                 <span>Cancel close</span>
                                 <span class="text-muted-foreground">{{ cancelClose() ? 'on' : 'off' }}</span>
@@ -65,8 +65,8 @@ interface ComboboxOpenChangeLogEntry {
 
                             <button
                                 class="border-border bg-background text-foreground hover:bg-muted inline-flex h-8 items-center justify-between rounded-md border px-3 text-xs"
-                                (click)="keepMountedOnClose.update((value) => !value)"
                                 type="button"
+                                (click)="keepMountedOnClose.update((value) => !value)"
                             >
                                 <span>Keep mounted on close</span>
                                 <span class="text-muted-foreground">{{ keepMountedOnClose() ? 'on' : 'off' }}</span>
@@ -98,8 +98,8 @@ interface ComboboxOpenChangeLogEntry {
                         </div>
                         <button
                             class="text-muted-foreground hover:text-foreground inline-flex h-7 items-center rounded-md px-2 text-xs"
-                            (click)="logs.set([])"
                             type="button"
+                            (click)="logs.set([])"
                         >
                             Clear
                         </button>
diff --git a/packages/primitives/combobox/stories/combobox-reactive-forms.ts b/packages/primitives/combobox/stories/combobox-reactive-forms.ts
index 92943b1cb..bfb64573b 100644
--- a/packages/primitives/combobox/stories/combobox-reactive-forms.ts
+++ b/packages/primitives/combobox/stories/combobox-reactive-forms.ts
@@ -1,8 +1,8 @@
+import { demoCombobox } from '../../storybook/styles';
+import { _importsCombobox } from '../index';
 import { ChangeDetectionStrategy, Component } from '@angular/core';
 import { FormControl, ReactiveFormsModule } from '@angular/forms';
 import { LucideCheck, LucideChevronDown } from '@lucide/angular';
-import { demoCombobox } from '../../storybook/styles';
-import { _importsCombobox } from '../index';
 
 @Component({
     changeDetection: ChangeDetectionStrategy.Eager,
@@ -10,27 +10,27 @@ import { _importsCombobox } from '../index';
     imports: [_importsCombobox, ReactiveFormsModule, LucideChevronDown, LucideCheck],
     template: `
         <form class="flex flex-col gap-3">
-            <div [formControl]="fruit" rdxComboboxRoot>
+            <div rdxComboboxRoot [formControl]="fruit">
                 <div [class]="c.control">
-                    <input [class]="c.input" rdxComboboxInput placeholder="Pick a fruit…" aria-label="Fruit" />
-                    <button [class]="c.trigger" rdxComboboxTrigger aria-label="Open">
+                    <input rdxComboboxInput placeholder="Pick a fruit…" aria-label="Fruit" [class]="c.input" />
+                    <button rdxComboboxTrigger aria-label="Open" [class]="c.trigger">
                         <svg lucideChevronDown size="16"></svg>
                     </button>
                 </div>
 
-                <div *rdxComboboxPortal [class]="c.positioner" rdxComboboxPositioner>
-                    <div [class]="c.popup" rdxComboboxPopup>
-                        <div [class]="c.list" rdxComboboxList aria-label="Fruits">
+                <div *rdxComboboxPortal rdxComboboxPositioner [class]="c.positioner">
+                    <div rdxComboboxPopup [class]="c.popup">
+                        <div rdxComboboxList aria-label="Fruits" [class]="c.list">
                             @for (f of fruits; track f) {
-                                <div [class]="c.item" [value]="f" rdxComboboxItem>
-                                    <span [class]="c.itemIndicator" rdxComboboxItemIndicator>
+                                <div rdxComboboxItem [class]="c.item" [value]="f">
+                                    <span rdxComboboxItemIndicator [class]="c.itemIndicator">
                                         <svg lucideCheck size="14"></svg>
                                     </span>
                                     {{ f }}
                                 </div>
                             }
                         </div>
-                        <div [class]="c.empty" rdxComboboxEmpty>No fruit found.</div>
+                        <div rdxComboboxEmpty [class]="c.empty">No fruit found.</div>
                     </div>
                 </div>
             </div>
diff --git a/packages/primitives/combobox/stories/combobox-validation.ts b/packages/primitives/combobox/stories/combobox-validation.ts
index 6476dd54f..9fc6f8cb5 100644
--- a/packages/primitives/combobox/stories/combobox-validation.ts
+++ b/packages/primitives/combobox/stories/combobox-validation.ts
@@ -1,8 +1,8 @@
+import { cn, demoButton, demoCombobox } from '../../storybook/styles';
+import { _importsCombobox } from '../index';
 import { ChangeDetectionStrategy, Component, signal } from '@angular/core';
 import { FormControl, ReactiveFormsModule, Validators } from '@angular/forms';
 import { LucideCheck, LucideChevronDown } from '@lucide/angular';
-import { cn, demoButton, demoCombobox } from '../../storybook/styles';
-import { _importsCombobox } from '../index';
 
 /**
  * Reactive forms with validation. The control's validity is bound to the combobox `[invalid]` input,
@@ -15,27 +15,27 @@ import { _importsCombobox } from '../index';
     imports: [_importsCombobox, ReactiveFormsModule, LucideChevronDown, LucideCheck],
     template: `
         <form class="flex flex-col gap-3" (ngSubmit)="onSubmit()">
-            <div [formControl]="fruit" [invalid]="showError()" rdxComboboxRoot>
+            <div rdxComboboxRoot [formControl]="fruit" [invalid]="showError()">
                 <div [class]="cn(c.control, showError() && 'border-destructive focus-within:ring-destructive')">
-                    <input [class]="c.input" rdxComboboxInput placeholder="Pick a fruit…" aria-label="Fruit" />
-                    <button [class]="c.trigger" rdxComboboxTrigger aria-label="Open">
+                    <input rdxComboboxInput placeholder="Pick a fruit…" aria-label="Fruit" [class]="c.input" />
+                    <button rdxComboboxTrigger aria-label="Open" [class]="c.trigger">
                         <svg lucideChevronDown size="16"></svg>
                     </button>
                 </div>
 
-                <div *rdxComboboxPortal [class]="c.positioner" rdxComboboxPositioner>
-                    <div [class]="c.popup" rdxComboboxPopup>
-                        <div [class]="c.list" rdxComboboxList aria-label="Fruits">
+                <div *rdxComboboxPortal rdxComboboxPositioner [class]="c.positioner">
+                    <div rdxComboboxPopup [class]="c.popup">
+                        <div rdxComboboxList aria-label="Fruits" [class]="c.list">
                             @for (f of fruits; track f) {
-                                <div [class]="c.item" [value]="f" rdxComboboxItem>
-                                    <span [class]="c.itemIndicator" rdxComboboxItemIndicator>
+                                <div rdxComboboxItem [class]="c.item" [value]="f">
+                                    <span rdxComboboxItemIndicator [class]="c.itemIndicator">
                                         <svg lucideCheck size="14"></svg>
                                     </span>
                                     {{ f }}
                                 </div>
                             }
                         </div>
-                        <div [class]="c.empty" rdxComboboxEmpty>No fruit found.</div>
+                        <div rdxComboboxEmpty [class]="c.empty">No fruit found.</div>
                     </div>
                 </div>
             </div>
@@ -44,7 +44,7 @@ import { _importsCombobox } from '../index';
                 <p class="text-destructive text-sm">Please pick a fruit.</p>
             }
 
-            <button [class]="cn(b.base, b.primary, b.size.md, 'self-start')" type="submit">Submit</button>
+            <button type="submit" [class]="cn(b.base, b.primary, b.size.md, 'self-start')">Submit</button>
 
             @if (submitted()) {
                 <p class="text-muted-foreground text-sm">Submitted ✓</p>
diff --git a/packages/primitives/combobox/stories/combobox-virtualized.ts b/packages/primitives/combobox/stories/combobox-virtualized.ts
index ad0d8f92b..c68d9fa8b 100644
--- a/packages/primitives/combobox/stories/combobox-virtualized.ts
+++ b/packages/primitives/combobox/stories/combobox-virtualized.ts
@@ -1,9 +1,9 @@
-import { ChangeDetectionStrategy, Component, ElementRef, signal, viewChild } from '@angular/core';
-import { LucideCheck } from '@lucide/angular';
-import { injectVirtualizer } from '@tanstack/angular-virtual';
 import { cn, demoCombobox } from '../../storybook/styles';
 import { _importsCombobox } from '../index';
 import { ComboboxItemHighlightedDetails, RdxComboboxRoot } from '../src/combobox-root';
+import { ChangeDetectionStrategy, Component, ElementRef, signal, viewChild } from '@angular/core';
+import { LucideCheck } from '@lucide/angular';
+import { injectVirtualizer } from '@tanstack/angular-virtual';
 
 /**
  * Externally virtualized list of 10,000 items. The combobox owns filtering and index navigation
@@ -18,32 +18,32 @@ import { ComboboxItemHighlightedDetails, RdxComboboxRoot } from '../src/combobox
     template: `
         <div
             #cmb="rdxComboboxRoot"
-            [(value)]="value"
-            [items]="items"
-            (onItemHighlighted)="onHighlight($event)"
             virtualized
             rdxComboboxRoot
+            [items]="items"
+            [(value)]="value"
+            (onItemHighlighted)="onHighlight($event)"
         >
             <div [class]="c.control">
-                <input [class]="c.input" rdxComboboxInput placeholder="Search 10,000 items…" aria-label="Item" />
+                <input rdxComboboxInput placeholder="Search 10,000 items…" aria-label="Item" [class]="c.input" />
             </div>
 
-            <div *rdxComboboxPortal [class]="c.positioner" rdxComboboxPositioner>
-                <div [class]="popup" rdxComboboxPopup>
-                    <div [class]="c.empty" rdxComboboxEmpty>No items found.</div>
-                    <div [class]="c.list" rdxComboboxList aria-label="Items">
+            <div *rdxComboboxPortal rdxComboboxPositioner [class]="c.positioner">
+                <div rdxComboboxPopup [class]="popup">
+                    <div rdxComboboxEmpty [class]="c.empty">No items found.</div>
+                    <div rdxComboboxList aria-label="Items" [class]="c.list">
                         <div #scroll [class]="scroller">
                             <div [class]="spacer" [style.height.px]="virtualizer.getTotalSize()">
                                 @for (row of virtualizer.getVirtualItems(); track row.key) {
                                     <div
+                                        rdxComboboxItem
                                         [class]="item"
                                         [value]="cmb.filteredItems()[row.index]"
                                         [index]="row.index"
                                         [style.height.px]="row.size"
                                         [style.transform]="'translateY(' + row.start + 'px)'"
-                                        rdxComboboxItem
                                     >
-                                        <span [class]="c.itemIndicator" rdxComboboxItemIndicator>
+                                        <span rdxComboboxItemIndicator [class]="c.itemIndicator">
                                             <svg lucideCheck size="14"></svg>
                                         </span>
                                         {{ cmb.filteredItems()[row.index] }}
diff --git a/packages/primitives/combobox/stories/combobox.stories.ts b/packages/primitives/combobox/stories/combobox.stories.ts
index 27d5fdccd..59aa8df53 100644
--- a/packages/primitives/combobox/stories/combobox.stories.ts
+++ b/packages/primitives/combobox/stories/combobox.stories.ts
@@ -1,9 +1,8 @@
-import { Meta, moduleMetadata, StoryObj } from '@storybook/angular';
 import { tailwindDemoDecorator } from '../../storybook/tailwind-demo';
 import { ComboboxAsync } from './combobox-async';
+import asyncSource from './combobox-async?raw';
 import { ComboboxAsyncMultiple } from './combobox-async-multiple';
 import asyncMultipleSource from './combobox-async-multiple?raw';
-import asyncSource from './combobox-async?raw';
 import { ComboboxCommand } from './combobox-command';
 import commandSource from './combobox-command?raw';
 import { ComboboxCreatable } from './combobox-creatable';
@@ -32,6 +31,7 @@ import { ComboboxValidation } from './combobox-validation';
 import validationSource from './combobox-validation?raw';
 import { ComboboxVirtualizedExample } from './combobox-virtualized';
 import virtualizedSource from './combobox-virtualized?raw';
+import { Meta, moduleMetadata, StoryObj } from '@storybook/angular';
 
 const html = String.raw;
 
diff --git a/packages/primitives/composite/__tests__/composite.spec.ts b/packages/primitives/composite/__tests__/composite.spec.ts
index 3104d20e6..6a30a7b6d 100644
--- a/packages/primitives/composite/__tests__/composite.spec.ts
+++ b/packages/primitives/composite/__tests__/composite.spec.ts
@@ -20,6 +20,7 @@ function keydown(element: HTMLElement, key: string, init: KeyboardEventInit = {}
     changeDetection: ChangeDetectionStrategy.Eager,
     template: `
         <div
+            rdxCompositeRoot
             [dir]="dir"
             [disabledIndices]="disabledIndices"
             [enableHomeAndEndKeys]="enableHomeAndEndKeys"
@@ -28,18 +29,17 @@ function keydown(element: HTMLElement, key: string, init: KeyboardEventInit = {}
             [modifierKeys]="modifierKeys"
             [orientation]="orientation"
             (onMapChange)="itemMap = $event"
-            rdxCompositeRoot
         >
-            <button [metadata]="{ id: 'one' }" rdxCompositeItem>One</button>
+            <button rdxCompositeItem [metadata]="{ id: 'one' }">One</button>
             <button
+                rdxCompositeItem
                 [attr.aria-disabled]="ariaDisableSecond ? 'true' : undefined"
                 [attr.data-composite-item-active]="activeSecond ? '' : undefined"
                 [metadata]="{ id: 'two' }"
-                rdxCompositeItem
             >
                 Two
             </button>
-            <button [metadata]="{ id: 'three' }" rdxCompositeItem>Three</button>
+            <button rdxCompositeItem [metadata]="{ id: 'three' }">Three</button>
         </div>
     `,
     imports: [RdxCompositeRoot, RdxCompositeItem]
@@ -84,9 +84,9 @@ class CompositeCheckboxHostComponent {}
 @Component({
     changeDetection: ChangeDetectionStrategy.Eager,
     template: `
-        <div (onMapChange)="itemMap = $event" rdxCompositeList>
-            <button [metadata]="{ id: 'one' }" rdxCompositeListItem>One</button>
-            <button [metadata]="{ id: 'two' }" rdxCompositeListItem>Two</button>
+        <div rdxCompositeList (onMapChange)="itemMap = $event">
+            <button rdxCompositeListItem [metadata]="{ id: 'one' }">One</button>
+            <button rdxCompositeListItem [metadata]="{ id: 'two' }">Two</button>
         </div>
     `,
     imports: [RdxCompositeList, RdxCompositeListItem]
diff --git a/packages/primitives/composite/index.ts b/packages/primitives/composite/index.ts
index 6ad411bf7..c807dd336 100644
--- a/packages/primitives/composite/index.ts
+++ b/packages/primitives/composite/index.ts
@@ -1,8 +1,8 @@
-import { NgModule } from '@angular/core';
 import { RdxCompositeItem } from './src/composite-item';
 import { RdxCompositeList } from './src/composite-list';
 import { RdxCompositeListItem } from './src/composite-list-item';
 import { RdxCompositeRoot } from './src/composite-root';
+import { NgModule } from '@angular/core';
 
 export * from './src/composite-item';
 export * from './src/composite-list';
diff --git a/packages/primitives/composite/src/composite-item.ts b/packages/primitives/composite/src/composite-item.ts
index 28f839476..48aeb1008 100644
--- a/packages/primitives/composite/src/composite-item.ts
+++ b/packages/primitives/composite/src/composite-item.ts
@@ -1,7 +1,7 @@
-import { computed, Directive, ElementRef, inject } from '@angular/core';
 import { RdxCompositeListItem } from './composite-list-item';
 import { injectRdxCompositeRootContext } from './composite-root';
 import { RdxCompositeItemMetadata } from './types';
+import { computed, Directive, ElementRef, inject } from '@angular/core';
 
 /**
  * Internal Base UI-style composite item. Registers itself with the nearest composite root and
diff --git a/packages/primitives/composite/src/composite-list-item.ts b/packages/primitives/composite/src/composite-list-item.ts
index e3c0b2e09..ced95f376 100644
--- a/packages/primitives/composite/src/composite-list-item.ts
+++ b/packages/primitives/composite/src/composite-list-item.ts
@@ -1,3 +1,5 @@
+import { injectRdxCompositeListContext } from './composite-list';
+import { RdxCompositeItemMetadata } from './types';
 import {
     afterNextRender,
     computed,
@@ -10,8 +12,6 @@ import {
     signal,
     untracked
 } from '@angular/core';
-import { injectRdxCompositeListContext } from './composite-list';
-import { RdxCompositeItemMetadata } from './types';
 
 /**
  * Registers the host with the nearest composite list without changing focus behavior.
diff --git a/packages/primitives/composite/src/composite-list.ts b/packages/primitives/composite/src/composite-list.ts
index 8b1279431..4f29f6025 100644
--- a/packages/primitives/composite/src/composite-list.ts
+++ b/packages/primitives/composite/src/composite-list.ts
@@ -1,5 +1,3 @@
-import { computed, Directive, effect, ElementRef, inject, output, signal } from '@angular/core';
-import { createContext } from '@radix-ng/primitives/core';
 import {
     RdxCompositeItemMetadata,
     RdxCompositeItemRegistration,
@@ -7,6 +5,8 @@ import {
     RdxCompositeMetadata
 } from './types';
 import { sortByDocumentPosition } from './utils';
+import { computed, Directive, effect, ElementRef, inject, output, signal } from '@angular/core';
+import { createContext } from '@radix-ng/primitives/core';
 
 const listContext = (): RdxCompositeListContext => {
     const list = inject(RdxCompositeList);
diff --git a/packages/primitives/composite/src/composite-root.ts b/packages/primitives/composite/src/composite-root.ts
index e98ff611c..bf442a7e2 100644
--- a/packages/primitives/composite/src/composite-root.ts
+++ b/packages/primitives/composite/src/composite-root.ts
@@ -1,16 +1,3 @@
-import {
-    booleanAttribute,
-    Directive,
-    effect,
-    ElementRef,
-    inject,
-    input,
-    linkedSignal,
-    model,
-    output
-} from '@angular/core';
-import { BooleanInput, createContext, Direction } from '@radix-ng/primitives/core';
-import { injectDirection } from '@radix-ng/primitives/direction-provider';
 import { RdxCompositeList } from './composite-list';
 import {
     RdxCompositeMetadata,
@@ -34,6 +21,19 @@ import {
     scrollIntoViewIfNeeded,
     shouldKeepNativeTextInputBehavior
 } from './utils';
+import {
+    booleanAttribute,
+    Directive,
+    effect,
+    ElementRef,
+    inject,
+    input,
+    linkedSignal,
+    model,
+    output
+} from '@angular/core';
+import { BooleanInput, createContext, Direction } from '@radix-ng/primitives/core';
+import { injectDirection } from '@radix-ng/primitives/direction-provider';
 
 const rootContext = (): RdxCompositeRootContext => {
     const root = inject(RdxCompositeRoot);
diff --git a/packages/primitives/composite/src/utils.ts b/packages/primitives/composite/src/utils.ts
index 08e48a596..bebbc0d40 100644
--- a/packages/primitives/composite/src/utils.ts
+++ b/packages/primitives/composite/src/utils.ts
@@ -1,5 +1,5 @@
-import { ARROW_DOWN, ARROW_LEFT, ARROW_RIGHT, ARROW_UP, Direction, END, HOME } from '@radix-ng/primitives/core';
 import { RdxCompositeModifierKey, RdxCompositeOrientation } from './types';
+import { ARROW_DOWN, ARROW_LEFT, ARROW_RIGHT, ARROW_UP, Direction, END, HOME } from '@radix-ng/primitives/core';
 
 export const ACTIVE_COMPOSITE_ITEM = 'data-composite-item-active';
 
diff --git a/packages/primitives/composite/stories/composite-default.ts b/packages/primitives/composite/stories/composite-default.ts
index 227a1fb44..f06a549be 100644
--- a/packages/primitives/composite/stories/composite-default.ts
+++ b/packages/primitives/composite/stories/composite-default.ts
@@ -1,6 +1,6 @@
+import { cn, demoButton, demoInput } from '../../storybook/styles';
 import { ChangeDetectionStrategy, Component } from '@angular/core';
 import { RdxCompositeItem, RdxCompositeRoot } from '@radix-ng/primitives/composite';
-import { cn, demoButton, demoInput } from '../../storybook/styles';
 
 @Component({
     selector: 'rdx-composite-default',
@@ -15,22 +15,22 @@ import { cn, demoButton, demoInput } from '../../storybook/styles';
                 highlightItemOnHover
                 rdxCompositeRoot
             >
-                <button [class]="itemClass" data-composite-item-active rdxCompositeItem>Overview</button>
-                <button [class]="itemClass" rdxCompositeItem>Metrics</button>
-                <button [class]="itemClass" rdxCompositeItem>Reports</button>
+                <button data-composite-item-active rdxCompositeItem [class]="itemClass">Overview</button>
+                <button rdxCompositeItem [class]="itemClass">Metrics</button>
+                <button rdxCompositeItem [class]="itemClass">Reports</button>
             </div>
 
             <div
                 class="flex w-full flex-wrap items-center gap-2"
-                [disabledIndices]="[2]"
-                [loopFocus]="false"
                 orientation="horizontal"
                 rdxCompositeRoot
+                [disabledIndices]="[2]"
+                [loopFocus]="false"
             >
-                <button [class]="itemClass" rdxCompositeItem>Filter</button>
-                <input [class]="inputClass" rdxCompositeItem value="Search" />
-                <button [class]="itemClass" aria-disabled="true" rdxCompositeItem>Archive</button>
-                <button [class]="itemClass" rdxCompositeItem>Export</button>
+                <button rdxCompositeItem [class]="itemClass">Filter</button>
+                <input rdxCompositeItem value="Search" [class]="inputClass" />
+                <button aria-disabled="true" rdxCompositeItem [class]="itemClass">Archive</button>
+                <button rdxCompositeItem [class]="itemClass">Export</button>
             </div>
         </div>
     `
diff --git a/packages/primitives/composite/stories/composite-list-only.ts b/packages/primitives/composite/stories/composite-list-only.ts
index 8c7ee9029..76dc1a2c5 100644
--- a/packages/primitives/composite/stories/composite-list-only.ts
+++ b/packages/primitives/composite/stories/composite-list-only.ts
@@ -1,6 +1,6 @@
+import { cn, demoButton, demoCard } from '../../storybook/styles';
 import { ChangeDetectionStrategy, Component } from '@angular/core';
 import { RdxCompositeList, RdxCompositeListItem, RdxCompositeMetadata } from '@radix-ng/primitives/composite';
-import { cn, demoButton, demoCard } from '../../storybook/styles';
 
 @Component({
     selector: 'rdx-composite-list-only',
@@ -8,14 +8,14 @@ import { cn, demoButton, demoCard } from '../../storybook/styles';
     changeDetection: ChangeDetectionStrategy.OnPush,
     template: `
         <div class="flex w-full max-w-xl flex-col gap-4">
-            <div class="flex flex-wrap items-center gap-2" (onMapChange)="onMapChange($event)" rdxCompositeList>
-                <button [class]="itemClass" [metadata]="{ id: 'overview', label: 'Overview' }" rdxCompositeListItem>
+            <div class="flex flex-wrap items-center gap-2" rdxCompositeList (onMapChange)="onMapChange($event)">
+                <button rdxCompositeListItem [class]="itemClass" [metadata]="{ id: 'overview', label: 'Overview' }">
                     Overview
                 </button>
-                <button [class]="itemClass" [metadata]="{ id: 'metrics', label: 'Metrics' }" rdxCompositeListItem>
+                <button rdxCompositeListItem [class]="itemClass" [metadata]="{ id: 'metrics', label: 'Metrics' }">
                     Metrics
                 </button>
-                <button [class]="itemClass" [metadata]="{ id: 'reports', label: 'Reports' }" rdxCompositeListItem>
+                <button rdxCompositeListItem [class]="itemClass" [metadata]="{ id: 'reports', label: 'Reports' }">
                     Reports
                 </button>
             </div>
diff --git a/packages/primitives/composite/stories/composite.stories.ts b/packages/primitives/composite/stories/composite.stories.ts
index 6fdb710ff..d0d4554f3 100644
--- a/packages/primitives/composite/stories/composite.stories.ts
+++ b/packages/primitives/composite/stories/composite.stories.ts
@@ -1,9 +1,9 @@
-import { Meta, moduleMetadata, StoryObj } from '@storybook/angular';
 import { tailwindDemoDecorator } from '../../storybook/tailwind-demo';
 import { RdxCompositeDefaultComponent } from './composite-default';
 import defaultSource from './composite-default?raw';
 import { RdxCompositeListOnlyComponent } from './composite-list-only';
 import listOnlySource from './composite-list-only?raw';
+import { Meta, moduleMetadata, StoryObj } from '@storybook/angular';
 
 const html = String.raw;
 
diff --git a/packages/primitives/config/__tests__/config-provider.spec.ts b/packages/primitives/config/__tests__/config-provider.spec.ts
index 078a4875b..99afe9e9d 100644
--- a/packages/primitives/config/__tests__/config-provider.spec.ts
+++ b/packages/primitives/config/__tests__/config-provider.spec.ts
@@ -1,7 +1,7 @@
-import { TestBed } from '@angular/core/testing';
-import { afterEach, describe, expect, it } from 'vitest';
 import { RadixNG } from '../src/config';
 import { provideRadixNG, RADIX_NG_CONFIG } from '../src/config.provider';
+import { TestBed } from '@angular/core/testing';
+import { afterEach, describe, expect, it } from 'vitest';
 
 describe('provideRadixNG', () => {
     afterEach(() => {
diff --git a/packages/primitives/config/src/config.provider.ts b/packages/primitives/config/src/config.provider.ts
index c05b5f294..996fbefca 100644
--- a/packages/primitives/config/src/config.provider.ts
+++ b/packages/primitives/config/src/config.provider.ts
@@ -1,3 +1,4 @@
+import { RadixNG, type RadixNGConfig } from './config';
 import {
     EnvironmentProviders,
     inject,
@@ -6,7 +7,6 @@ import {
     provideAppInitializer
 } from '@angular/core';
 import { RDX_DIRECTION } from '@radix-ng/primitives/direction-provider';
-import { RadixNG, type RadixNGConfig } from './config';
 
 export const RADIX_NG_CONFIG = new InjectionToken<readonly RadixNGConfig[]>('RADIX_NG_CONFIG', {
     providedIn: 'root',
diff --git a/packages/primitives/context-menu/__tests__/context-menu.spec.ts b/packages/primitives/context-menu/__tests__/context-menu.spec.ts
index bbfb956f1..a24ccbacb 100644
--- a/packages/primitives/context-menu/__tests__/context-menu.spec.ts
+++ b/packages/primitives/context-menu/__tests__/context-menu.spec.ts
@@ -29,7 +29,7 @@ afterEach(() => {
     imports: [RdxContextMenuModule, RdxMenuModule],
     template: `
         <ng-container #root="rdxContextMenuRoot" rdxContextMenuRoot>
-            <div [attr.data-disabled-trigger]="disabled" rdxContextMenuTrigger>Right click area</div>
+            <div rdxContextMenuTrigger [attr.data-disabled-trigger]="disabled">Right click area</div>
 
             @if (root.menuRoot.open()) {
                 <div rdxMenuPositioner>
@@ -51,7 +51,7 @@ class ContextMenuHost {
     imports: [RdxContextMenuModule, RdxMenuModule],
     template: `
         <ng-container #root="rdxContextMenuRoot" rdxContextMenuRoot>
-            <div [disabled]="true" rdxContextMenuTrigger>Right click area</div>
+            <div rdxContextMenuTrigger [disabled]="true">Right click area</div>
 
             @if (root.menuRoot.open()) {
                 <div rdxMenuPositioner>
diff --git a/packages/primitives/context-menu/index.ts b/packages/primitives/context-menu/index.ts
index c65021fe2..21f0253d7 100644
--- a/packages/primitives/context-menu/index.ts
+++ b/packages/primitives/context-menu/index.ts
@@ -1,6 +1,6 @@
-import { NgModule } from '@angular/core';
 import { RdxContextMenuRoot } from './src/context-menu-root';
 import { RdxContextMenuTrigger } from './src/context-menu-trigger';
+import { NgModule } from '@angular/core';
 
 export * from './src/context-menu-root';
 export * from './src/context-menu-trigger';
diff --git a/packages/primitives/context-menu/src/context-menu-trigger.ts b/packages/primitives/context-menu/src/context-menu-trigger.ts
index 5a4a28374..dcc0825d4 100644
--- a/packages/primitives/context-menu/src/context-menu-trigger.ts
+++ b/packages/primitives/context-menu/src/context-menu-trigger.ts
@@ -1,3 +1,4 @@
+import { injectRdxContextMenuRootContext } from './context-menu-root';
 import {
     booleanAttribute,
     DestroyRef,
@@ -10,7 +11,6 @@ import {
 } from '@angular/core';
 import { BooleanInput, NumberInput } from '@radix-ng/primitives/core';
 import { RdxMenuRoot } from '@radix-ng/primitives/menu';
-import { injectRdxContextMenuRootContext } from './context-menu-root';
 
 /**
  * An area that opens the context menu on right click (or a touch long-press).
diff --git a/packages/primitives/context-menu/stories/context-menu-default.ts b/packages/primitives/context-menu/stories/context-menu-default.ts
index 717c0bd83..e14d23f60 100644
--- a/packages/primitives/context-menu/stories/context-menu-default.ts
+++ b/packages/primitives/context-menu/stories/context-menu-default.ts
@@ -1,8 +1,8 @@
+import { cn, demoMenu } from '../../storybook/styles';
 import { ChangeDetectionStrategy, Component, signal } from '@angular/core';
 import { LucideCheck, LucideDot } from '@lucide/angular';
 import { RdxContextMenuModule } from '@radix-ng/primitives/context-menu';
 import { RdxMenuModule } from '@radix-ng/primitives/menu';
-import { cn, demoMenu } from '../../storybook/styles';
 
 @Component({
     selector: 'rdx-context-menu-default',
@@ -11,83 +11,83 @@ import { cn, demoMenu } from '../../storybook/styles';
     template: `
         <ng-container #root="rdxContextMenuRoot" rdxContextMenuRoot>
             <div
+                rdxContextMenuTrigger
                 [class]="
                     cn(
                         'border-border text-muted-foreground flex h-[150px] w-[300px] items-center justify-center rounded-md border-2 border-dashed text-sm select-none',
                         'data-[popup-open]:bg-muted data-[popup-open]:border-solid'
                     )
                 "
-                rdxContextMenuTrigger
             >
                 Right click here
             </div>
 
-            <div *rdxMenuPortal [class]="m.positioner" rdxMenuPositioner>
-                <div [class]="m.popup" rdxMenuPopup>
-                    <button [class]="m.item" rdxMenuItem>
+            <div *rdxMenuPortal rdxMenuPositioner [class]="m.positioner">
+                <div rdxMenuPopup [class]="m.popup">
+                    <button rdxMenuItem [class]="m.item">
                         Back
                         <span [class]="shortcut">⌘ [</span>
                     </button>
-                    <button [class]="m.item" [disabled]="true" rdxMenuItem>
+                    <button rdxMenuItem [class]="m.item" [disabled]="true">
                         Forward
                         <span [class]="shortcut">⌘ ]</span>
                     </button>
-                    <button [class]="m.item" rdxMenuItem>
+                    <button rdxMenuItem [class]="m.item">
                         Reload
                         <span [class]="shortcut">⌘ R</span>
                     </button>
 
                     <!-- More Tools submenu -->
                     <ng-container #moreSub="rdxMenuRoot" rdxMenuRoot>
-                        <button [class]="cn(m.item, 'justify-between')" rdxMenuSubTrigger>
+                        <button rdxMenuSubTrigger [class]="cn(m.item, 'justify-between')">
                             More Tools
                             <span class="text-muted-foreground text-xs">›</span>
                         </button>
                         <div
                             *rdxMenuPortal
-                            [class]="m.positioner"
                             side="right"
                             align="start"
                             sideOffset="4"
                             rdxMenuPositioner
+                            [class]="m.positioner"
                         >
-                            <div [class]="m.popup" rdxMenuPopup>
-                                <button [class]="m.item" rdxMenuItem>Save Page As…</button>
-                                <button [class]="m.item" rdxMenuItem>Create Shortcut…</button>
-                                <button [class]="m.item" rdxMenuItem>Name Window…</button>
+                            <div rdxMenuPopup [class]="m.popup">
+                                <button rdxMenuItem [class]="m.item">Save Page As…</button>
+                                <button rdxMenuItem [class]="m.item">Create Shortcut…</button>
+                                <button rdxMenuItem [class]="m.item">Name Window…</button>
                             </div>
                         </div>
                     </ng-container>
 
-                    <div [class]="m.separator" rdxMenuSeparator></div>
+                    <div rdxMenuSeparator [class]="m.separator"></div>
 
-                    <label [(checked)]="showBookmarks" [class]="m.selectableItem" rdxMenuCheckboxItem>
-                        <span [class]="m.itemIndicator" rdxMenuCheckboxItemIndicator>
-                            <svg [size]="12" lucideCheck></svg>
+                    <label rdxMenuCheckboxItem [class]="m.selectableItem" [(checked)]="showBookmarks">
+                        <span rdxMenuCheckboxItemIndicator [class]="m.itemIndicator">
+                            <svg lucideCheck [size]="12"></svg>
                         </span>
                         Show Bookmarks
                         <span [class]="shortcut">⌘ B</span>
                     </label>
-                    <label [(checked)]="showFullUrls" [class]="m.selectableItem" rdxMenuCheckboxItem>
-                        <span [class]="m.itemIndicator" rdxMenuCheckboxItemIndicator>
-                            <svg [size]="12" lucideCheck></svg>
+                    <label rdxMenuCheckboxItem [class]="m.selectableItem" [(checked)]="showFullUrls">
+                        <span rdxMenuCheckboxItemIndicator [class]="m.itemIndicator">
+                            <svg lucideCheck [size]="12"></svg>
                         </span>
                         Show Full URLs
                     </label>
 
-                    <div [class]="m.separator" rdxMenuSeparator></div>
+                    <div rdxMenuSeparator [class]="m.separator"></div>
 
-                    <div [(value)]="person" rdxMenuRadioGroup>
-                        <div [class]="m.groupLabel" rdxMenuGroupLabel>People</div>
-                        <label [class]="m.selectableItem" value="pedro" rdxMenuRadioItem>
-                            <span [class]="m.itemIndicator" rdxMenuRadioItemIndicator>
-                                <svg [size]="10" strokeWidth="5" lucideDot></svg>
+                    <div rdxMenuRadioGroup [(value)]="person">
+                        <div rdxMenuGroupLabel [class]="m.groupLabel">People</div>
+                        <label value="pedro" rdxMenuRadioItem [class]="m.selectableItem">
+                            <span rdxMenuRadioItemIndicator [class]="m.itemIndicator">
+                                <svg strokeWidth="5" lucideDot [size]="10"></svg>
                             </span>
                             Pedro Duarte
                         </label>
-                        <label [class]="m.selectableItem" value="colm" rdxMenuRadioItem>
-                            <span [class]="m.itemIndicator" rdxMenuRadioItemIndicator>
-                                <svg [size]="10" strokeWidth="5" lucideDot></svg>
+                        <label value="colm" rdxMenuRadioItem [class]="m.selectableItem">
+                            <span rdxMenuRadioItemIndicator [class]="m.itemIndicator">
+                                <svg strokeWidth="5" lucideDot [size]="10"></svg>
                             </span>
                             Colm Tuite
                         </label>
diff --git a/packages/primitives/context-menu/stories/context-menu.stories.ts b/packages/primitives/context-menu/stories/context-menu.stories.ts
index 766b312c7..0ebfb3590 100644
--- a/packages/primitives/context-menu/stories/context-menu.stories.ts
+++ b/packages/primitives/context-menu/stories/context-menu.stories.ts
@@ -1,7 +1,7 @@
-import { Meta, moduleMetadata, StoryObj } from '@storybook/angular';
 import { tailwindDemoDecorator } from '../../storybook/tailwind-demo';
 import { RdxContextMenuDefaultComponent } from './context-menu-default';
 import defaultSource from './context-menu-default?raw';
+import { Meta, moduleMetadata, StoryObj } from '@storybook/angular';
 
 const html = String.raw;
 
diff --git a/packages/primitives/core/__tests__/calendar.spec.ts b/packages/primitives/core/__tests__/calendar.spec.ts
index be1f77a72..048a7252d 100644
--- a/packages/primitives/core/__tests__/calendar.spec.ts
+++ b/packages/primitives/core/__tests__/calendar.spec.ts
@@ -1,6 +1,6 @@
+import { getDaysBetween, getWeekNumber } from '../src/date-time/calendar';
 import { CalendarDate } from '@internationalized/date';
 import { describe, expect, it } from 'vitest';
-import { getDaysBetween, getWeekNumber } from '../src/date-time/calendar';
 
 describe('getDaysBetween', () => {
     it('returns the days strictly between start and end (both ends exclusive)', () => {
diff --git a/packages/primitives/core/__tests__/clamp.spec.ts b/packages/primitives/core/__tests__/clamp.spec.ts
index abe0d0249..d36df4278 100644
--- a/packages/primitives/core/__tests__/clamp.spec.ts
+++ b/packages/primitives/core/__tests__/clamp.spec.ts
@@ -1,5 +1,5 @@
-import { describe, expect, it } from 'vitest';
 import { clamp, roundToStepPrecision, snapValueToStep } from '../src/clamp';
+import { describe, expect, it } from 'vitest';
 
 describe('clamp', () => {
     it('returns the value when it is within range', () => {
diff --git a/packages/primitives/core/__tests__/comparators.spec.ts b/packages/primitives/core/__tests__/comparators.spec.ts
index 69b902d89..9b43ee3fe 100644
--- a/packages/primitives/core/__tests__/comparators.spec.ts
+++ b/packages/primitives/core/__tests__/comparators.spec.ts
@@ -1,5 +1,3 @@
-import { CalendarDate, CalendarDateTime, parseZonedDateTime, Time } from '@internationalized/date';
-import { describe, expect, it } from 'vitest';
 import {
     areAllDaysBetweenValid,
     getDaysInMonth,
@@ -17,6 +15,8 @@ import {
     isCalendarDateTime,
     isZonedDateTime
 } from '../src/date-time/comparators';
+import { CalendarDate, CalendarDateTime, parseZonedDateTime, Time } from '@internationalized/date';
+import { describe, expect, it } from 'vitest';
 
 describe('date-time type guards', () => {
     it('isCalendarDateTime / isZonedDateTime narrow by instance', () => {
diff --git a/packages/primitives/core/__tests__/create-context.spec.ts b/packages/primitives/core/__tests__/create-context.spec.ts
index df854fc17..98088a984 100644
--- a/packages/primitives/core/__tests__/create-context.spec.ts
+++ b/packages/primitives/core/__tests__/create-context.spec.ts
@@ -1,7 +1,7 @@
+import { createContext } from '../src/create-context';
 import { Injector, runInInjectionContext } from '@angular/core';
 import { TestBed } from '@angular/core/testing';
 import { afterEach, describe, expect, it, vi } from 'vitest';
-import { createContext } from '../src/create-context';
 
 interface FooContext {
     value: number;
diff --git a/packages/primitives/core/__tests__/diagnostics.spec.ts b/packages/primitives/core/__tests__/diagnostics.spec.ts
index 0668bcc71..cd5f4cbe1 100644
--- a/packages/primitives/core/__tests__/diagnostics.spec.ts
+++ b/packages/primitives/core/__tests__/diagnostics.spec.ts
@@ -1,5 +1,3 @@
-import { ElementRef, HOST_TAG_NAME, Injector, runInInjectionContext } from '@angular/core';
-import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
 import {
     docsUrl,
     rdxCheckLabelElement,
@@ -8,6 +6,8 @@ import {
     rdxDevWarning,
     resetRdxDevWarnings
 } from '../src/dev/diagnostics';
+import { ElementRef, HOST_TAG_NAME, Injector, runInInjectionContext } from '@angular/core';
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
 
 /**
  * Runs `fn` in an injection context that mimics a directive host element. Pass `tag = null`
diff --git a/packages/primitives/core/__tests__/floating-node-registration.spec.ts b/packages/primitives/core/__tests__/floating-node-registration.spec.ts
index 749b2b686..87ac61c19 100644
--- a/packages/primitives/core/__tests__/floating-node-registration.spec.ts
+++ b/packages/primitives/core/__tests__/floating-node-registration.spec.ts
@@ -1,7 +1,4 @@
 // @vitest-environment jsdom
-import { ChangeDetectionStrategy, Component, signal, viewChild } from '@angular/core';
-import { TestBed } from '@angular/core/testing';
-import { beforeEach, describe, expect, it } from 'vitest';
 import { RdxFloatingNodeRegistration } from '../src/floating/floating-node-registration';
 import { createFloatingRootContext, RdxFloatingRootContext } from '../src/floating/floating-root-context';
 import { RdxFloatingParentOverride, RdxFloatingTree } from '../src/floating/floating-tree';
@@ -10,6 +7,9 @@ import {
     provideFloatingTree,
     RDX_FLOATING_TREE
 } from '../src/floating/provide-floating-tree';
+import { ChangeDetectionStrategy, Component, signal, viewChild } from '@angular/core';
+import { TestBed } from '@angular/core/testing';
+import { beforeEach, describe, expect, it } from 'vitest';
 
 describe('RdxFloatingNodeRegistration', () => {
     beforeEach(() => TestBed.resetTestingModule());
@@ -77,7 +77,7 @@ describe('RdxFloatingNodeRegistration', () => {
         providers: [provideFloatingTree()],
         template: `
             <div #parent rdxFloatingNode>
-                <div #child [parentOverride]="override()" rdxFloatingNode></div>
+                <div #child rdxFloatingNode [parentOverride]="override()"></div>
             </div>
         `
     })
@@ -105,7 +105,7 @@ describe('RdxFloatingNodeRegistration', () => {
         // deliberately NO provideFloatingTree → no ambient tree
         imports: [RdxFloatingNodeRegistration],
         template: `
-            <div #n [parentOverride]="override()" rdxFloatingNode></div>
+            <div #n rdxFloatingNode [parentOverride]="override()"></div>
         `
     })
     class NodeOverrideHost {
diff --git a/packages/primitives/core/__tests__/floating-registration.spec.ts b/packages/primitives/core/__tests__/floating-registration.spec.ts
index d4f0ace4a..1925342e9 100644
--- a/packages/primitives/core/__tests__/floating-registration.spec.ts
+++ b/packages/primitives/core/__tests__/floating-registration.spec.ts
@@ -1,6 +1,4 @@
 // @vitest-environment jsdom
-import { computed, inject, Injector } from '@angular/core';
-import { describe, expect, it } from 'vitest';
 import {
     provideFloatingRegistration,
     RDX_FLOATING_REGISTRATION,
@@ -8,6 +6,8 @@ import {
 } from '../src/floating/floating-registration';
 import { RdxFloatingTree } from '../src/floating/floating-tree';
 import { provideFloatingTree, RDX_FLOATING_TREE, resolveFloatingTree } from '../src/floating/provide-floating-tree';
+import { computed, inject, Injector } from '@angular/core';
+import { describe, expect, it } from 'vitest';
 
 // ─── RdxFloatingRegistrationContext ──────────────────────────────────────────
 
diff --git a/packages/primitives/core/__tests__/floating-tree.spec.ts b/packages/primitives/core/__tests__/floating-tree.spec.ts
index a0a4418d5..064cbe4c9 100644
--- a/packages/primitives/core/__tests__/floating-tree.spec.ts
+++ b/packages/primitives/core/__tests__/floating-tree.spec.ts
@@ -1,9 +1,9 @@
 // @vitest-environment jsdom
-import { Injector } from '@angular/core';
-import { beforeEach, describe, expect, it } from 'vitest';
 import { createFloatingRootContext, RdxFloatingRootContext } from '../src/floating/floating-root-context';
 import { RdxFloatingNode, RdxFloatingTree } from '../src/floating/floating-tree';
 import { provideFloatingTree, RDX_FLOATING_TREE } from '../src/floating/provide-floating-tree';
+import { Injector } from '@angular/core';
+import { beforeEach, describe, expect, it } from 'vitest';
 
 // Test-only augmentation: add a synthetic tree-level event so we can exercise the tree's
 // event channel without landing a real capability event first.
diff --git a/packages/primitives/core/__tests__/item-helpers.spec.ts b/packages/primitives/core/__tests__/item-helpers.spec.ts
index 9a9755981..4fb7864cb 100644
--- a/packages/primitives/core/__tests__/item-helpers.spec.ts
+++ b/packages/primitives/core/__tests__/item-helpers.spec.ts
@@ -1,5 +1,5 @@
-import { describe, expect, it } from 'vitest';
 import { isItemEqualToValue, itemToStringLabel, itemToStringValue } from '../src/item-helpers';
+import { describe, expect, it } from 'vitest';
 
 describe('itemToStringLabel', () => {
     it('passes strings through unchanged', () => {
diff --git a/packages/primitives/core/__tests__/live-announcer.spec.ts b/packages/primitives/core/__tests__/live-announcer.spec.ts
index d995e8c1d..1f5d7eae4 100644
--- a/packages/primitives/core/__tests__/live-announcer.spec.ts
+++ b/packages/primitives/core/__tests__/live-announcer.spec.ts
@@ -1,7 +1,7 @@
+import { RdxLiveAnnouncer } from '../src/live-announcer';
 import { PLATFORM_ID } from '@angular/core';
 import { TestBed } from '@angular/core/testing';
 import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
-import { RdxLiveAnnouncer } from '../src/live-announcer';
 
 function queryLiveRegions(): HTMLElement[] {
     return Array.from(document.querySelectorAll<HTMLElement>('.rdx-live-announcer'));
diff --git a/packages/primitives/core/__tests__/parser.spec.ts b/packages/primitives/core/__tests__/parser.spec.ts
index 1c47113ab..ab031b471 100644
--- a/packages/primitives/core/__tests__/parser.spec.ts
+++ b/packages/primitives/core/__tests__/parser.spec.ts
@@ -1,6 +1,3 @@
-import { InputSignal } from '@angular/core';
-import { CalendarDate, CalendarDateTime } from '@internationalized/date';
-import { describe, expect, it } from 'vitest';
 import { createFormatter } from '../src/date-time/formatter';
 import {
     createContent,
@@ -8,6 +5,9 @@ import {
     syncSegmentValues,
     syncTimeSegmentValues
 } from '../src/date-time/parser';
+import { InputSignal } from '@angular/core';
+import { CalendarDate, CalendarDateTime } from '@internationalized/date';
+import { describe, expect, it } from 'vitest';
 
 // `locale` is typed as an InputSignal in the parser API; a plain getter is enough for these tests.
 const localeSignal = (value: string) => (() => value) as unknown as InputSignal<string>;
diff --git a/packages/primitives/core/__tests__/predicates.spec.ts b/packages/primitives/core/__tests__/predicates.spec.ts
index edbe26e06..8ad82b973 100644
--- a/packages/primitives/core/__tests__/predicates.spec.ts
+++ b/packages/primitives/core/__tests__/predicates.spec.ts
@@ -1,5 +1,5 @@
-import { describe, expect, it } from 'vitest';
 import { isEqual, isNullish } from '../src/predicates';
+import { describe, expect, it } from 'vitest';
 
 describe('isNullish', () => {
     it('is true only for null and undefined', () => {
diff --git a/packages/primitives/core/__tests__/use-filter.spec.ts b/packages/primitives/core/__tests__/use-filter.spec.ts
index 7024964be..630a92936 100644
--- a/packages/primitives/core/__tests__/use-filter.spec.ts
+++ b/packages/primitives/core/__tests__/use-filter.spec.ts
@@ -1,5 +1,5 @@
-import { describe, expect, it } from 'vitest';
 import { useFilter } from '../src/composables/use-filter';
+import { describe, expect, it } from 'vitest';
 
 describe('useFilter', () => {
     it('matches case-insensitively', () => {
diff --git a/packages/primitives/core/__tests__/use-list-highlight.spec.ts b/packages/primitives/core/__tests__/use-list-highlight.spec.ts
index e16fe5c50..62f97e809 100644
--- a/packages/primitives/core/__tests__/use-list-highlight.spec.ts
+++ b/packages/primitives/core/__tests__/use-list-highlight.spec.ts
@@ -1,7 +1,7 @@
+import { ListHighlight, useListHighlight } from '../src/composables/use-list-highlight';
 import { signal, WritableSignal } from '@angular/core';
 import { TestBed } from '@angular/core/testing';
 import { beforeEach, describe, expect, it } from 'vitest';
-import { ListHighlight, useListHighlight } from '../src/composables/use-list-highlight';
 
 interface Item {
     id: string;
diff --git a/packages/primitives/core/__tests__/use-scroll-lock.spec.ts b/packages/primitives/core/__tests__/use-scroll-lock.spec.ts
index 299249a39..b8bcd8c96 100644
--- a/packages/primitives/core/__tests__/use-scroll-lock.spec.ts
+++ b/packages/primitives/core/__tests__/use-scroll-lock.spec.ts
@@ -1,9 +1,9 @@
 // @vitest-environment jsdom
+import { RDX_SCROLL_LOCKED_ATTR, useAnchoredScrollLock, useScrollLock } from '../src/dom/use-scroll-lock';
 import { DOCUMENT } from '@angular/common';
 import { PLATFORM_ID, signal, WritableSignal } from '@angular/core';
 import { TestBed } from '@angular/core/testing';
 import { afterEach, beforeEach, describe, expect, it } from 'vitest';
-import { RDX_SCROLL_LOCKED_ATTR, useAnchoredScrollLock, useScrollLock } from '../src/dom/use-scroll-lock';
 
 function resetScroller(doc: Document): void {
     const html = doc.documentElement;
diff --git a/packages/primitives/core/index.ts b/packages/primitives/core/index.ts
index 12b7c683d..ba6c8c8a4 100644
--- a/packages/primitives/core/index.ts
+++ b/packages/primitives/core/index.ts
@@ -1,20 +1,21 @@
 export * from './src/accessor/control-value-accessor';
 export * from './src/accessor/provide-value-accessor';
 export * from './src/clamp';
+export * from './src/composables/use-arrow-navigation';
+export * from './src/composables/use-filter';
+export * from './src/composables/use-grace-area';
+export * from './src/composables/use-list-highlight';
+export * from './src/composables/use-pointer-drag';
+export * from './src/composables/use-transition-status';
+export * from './src/composables/watch';
 export * from './src/create-context';
 export * from './src/date-time';
 export * from './src/dev/diagnostics';
-export * from './src/handle-and-dispatch-custom-event';
-export * from './src/id-generator';
-export * from './src/item-helpers';
-export * from './src/kbd-constants';
-export * from './src/live-announcer';
-export * from './src/predicates';
-export * from './src/provide-token';
-export * from './src/signal-forms/form-control';
-export * from './src/signal-forms/form-ui-state';
-export * from './src/types';
-
+export * from './src/dom/document';
+export * from './src/dom/element-size';
+export * from './src/dom/get-active-element';
+export * from './src/dom/use-resize-observer';
+export * from './src/dom/use-scroll-lock';
 export * from './src/floating/cancelable-change-event-details';
 export * from './src/floating/floating-events';
 export * from './src/floating/floating-lifecycle';
@@ -25,19 +26,14 @@ export * from './src/floating/floating-tree';
 export * from './src/floating/internal-backdrop';
 export * from './src/floating/provide-floating-tree';
 export * from './src/floating/trigger-registry';
-
-export * from './src/dom/document';
-export * from './src/dom/element-size';
-export * from './src/dom/get-active-element';
-export * from './src/dom/use-resize-observer';
-export * from './src/dom/use-scroll-lock';
-
-export * from './src/composables/use-arrow-navigation';
-export * from './src/composables/use-filter';
-export * from './src/composables/use-grace-area';
-export * from './src/composables/use-list-highlight';
-export * from './src/composables/use-pointer-drag';
-export * from './src/composables/use-transition-status';
-export * from './src/composables/watch';
-
+export * from './src/handle-and-dispatch-custom-event';
+export * from './src/id-generator';
+export * from './src/item-helpers';
+export * from './src/kbd-constants';
+export * from './src/live-announcer';
 export * from './src/positioning/types';
+export * from './src/predicates';
+export * from './src/provide-token';
+export * from './src/signal-forms/form-control';
+export * from './src/signal-forms/form-ui-state';
+export * from './src/types';
diff --git a/packages/primitives/core/src/accessor/control-value-accessor.ts b/packages/primitives/core/src/accessor/control-value-accessor.ts
index c2068bb55..dee6ac5af 100644
--- a/packages/primitives/core/src/accessor/control-value-accessor.ts
+++ b/packages/primitives/core/src/accessor/control-value-accessor.ts
@@ -1,7 +1,7 @@
-import { Directive, booleanAttribute, inject, input, linkedSignal, output, untracked } from '@angular/core';
-import { ControlValueAccessor } from '@angular/forms';
 import { BooleanInput } from '../types';
 import { provideValueAccessor } from './provide-value-accessor';
+import { booleanAttribute, Directive, inject, input, linkedSignal, output, untracked } from '@angular/core';
+import { ControlValueAccessor } from '@angular/forms';
 
 /**
  * A reusable ControlValueAccessor implementation for form controls
diff --git a/packages/primitives/core/src/composables/use-grace-area.ts b/packages/primitives/core/src/composables/use-grace-area.ts
index 43a513daf..a87bf6e07 100644
--- a/packages/primitives/core/src/composables/use-grace-area.ts
+++ b/packages/primitives/core/src/composables/use-grace-area.ts
@@ -1,4 +1,4 @@
-import { effect, signal, type Signal, type WritableSignal } from '@angular/core';
+import { effect, type Signal, signal, type WritableSignal } from '@angular/core';
 
 type Side = 'top' | 'right' | 'bottom' | 'left';
 
diff --git a/packages/primitives/core/src/composables/use-transition-status.ts b/packages/primitives/core/src/composables/use-transition-status.ts
index f5988009d..7d18c6cfb 100644
--- a/packages/primitives/core/src/composables/use-transition-status.ts
+++ b/packages/primitives/core/src/composables/use-transition-status.ts
@@ -1,4 +1,4 @@
-import { afterNextRender, DestroyRef, inject, Injector, signal, Signal } from '@angular/core';
+import { afterNextRender, DestroyRef, inject, Injector, Signal, signal } from '@angular/core';
 
 /**
  * Lifecycle phase of an open/close transition.
diff --git a/packages/primitives/core/src/composables/watch.ts b/packages/primitives/core/src/composables/watch.ts
index ad624984c..2f502b985 100644
--- a/packages/primitives/core/src/composables/watch.ts
+++ b/packages/primitives/core/src/composables/watch.ts
@@ -1,6 +1,6 @@
 // https://ngxtension.netlify.app/utilities/signals/explicit-effect/
 
-import { CreateEffectOptions, EffectCleanupRegisterFn, EffectRef, effect, untracked } from '@angular/core';
+import { CreateEffectOptions, effect, EffectCleanupRegisterFn, EffectRef, untracked } from '@angular/core';
 
 /**
  * We want to have the Tuple in order to use the types in the function signature
diff --git a/packages/primitives/core/src/create-context.ts b/packages/primitives/core/src/create-context.ts
index dee9fe1bc..744ae8283 100644
--- a/packages/primitives/core/src/create-context.ts
+++ b/packages/primitives/core/src/create-context.ts
@@ -1,8 +1,8 @@
 // Thanks for idea.
 // https://github.com/unovue/reka-ui/blob/v2/packages/core/src/shared/createContext.ts
 
-import { inject, InjectionToken, Provider } from '@angular/core';
 import { docsUrl } from './dev/diagnostics';
+import { inject, InjectionToken, Provider } from '@angular/core';
 
 /**
  * Retrieves the context value from Angular's dependency injection.
diff --git a/packages/primitives/core/src/date-time/calendar.ts b/packages/primitives/core/src/date-time/calendar.ts
index f6edb966f..bf529551e 100644
--- a/packages/primitives/core/src/date-time/calendar.ts
+++ b/packages/primitives/core/src/date-time/calendar.ts
@@ -2,10 +2,10 @@
  * Implementation ported from from from https://github.com/melt-ui/melt-ui/blob/develop/src/lib/builders/calendar/create.ts
  */
 
-import { CalendarDate, DateValue, endOfMonth, getDayOfWeek, startOfMonth } from '@internationalized/date';
 import { chunk } from '../chunk';
 import { getDaysInMonth, getLastFirstDayOfWeek, getNextLastDayOfWeek } from './comparators';
 import { Month } from './types';
+import { CalendarDate, DateValue, endOfMonth, getDayOfWeek, startOfMonth } from '@internationalized/date';
 
 type DayOfWeek = 'sun' | 'mon' | 'tue' | 'wed' | 'thu' | 'fri' | 'sat';
 
diff --git a/packages/primitives/core/src/date-time/comparators.ts b/packages/primitives/core/src/date-time/comparators.ts
index e3d57871c..b0663cef0 100644
--- a/packages/primitives/core/src/date-time/comparators.ts
+++ b/packages/primitives/core/src/date-time/comparators.ts
@@ -1,3 +1,4 @@
+import type { DateMatcher } from './types';
 import {
     CalendarDate,
     CalendarDateTime,
@@ -11,7 +12,6 @@ import {
     toCalendar,
     ZonedDateTime
 } from '@internationalized/date';
-import type { DateMatcher } from './types';
 
 /**
  * Given a `DateValue` object, convert it to a native `Date` object.
diff --git a/packages/primitives/core/src/date-time/formatter.ts b/packages/primitives/core/src/date-time/formatter.ts
index 8d775b455..9359ad25c 100644
--- a/packages/primitives/core/src/date-time/formatter.ts
+++ b/packages/primitives/core/src/date-time/formatter.ts
@@ -1,6 +1,6 @@
-import { DateFormatter, type DateValue, getLocalTimeZone, today } from '@internationalized/date';
 import { hasTime, isZonedDateTime, toDate } from './comparators';
 import { HourCycle } from './types';
+import { DateFormatter, type DateValue, getLocalTimeZone, today } from '@internationalized/date';
 
 const defaultPartOptions: Intl.DateTimeFormatOptions = {
     year: 'numeric',
diff --git a/packages/primitives/core/src/date-time/parser.ts b/packages/primitives/core/src/date-time/parser.ts
index 0380927d5..b13077ccc 100644
--- a/packages/primitives/core/src/date-time/parser.ts
+++ b/packages/primitives/core/src/date-time/parser.ts
@@ -1,5 +1,3 @@
-import { InputSignal } from '@angular/core';
-import { DateFields, DateValue } from '@internationalized/date';
 import { Granularity, isZonedDateTime, TIME_GRANULARITIES, toDate } from './comparators';
 import { Formatter } from './formatter';
 import {
@@ -12,6 +10,8 @@ import {
 import { getPlaceholder } from './placeholders';
 import { DateSegmentPart, HourCycle, SegmentContentObj, SegmentPart, SegmentValueObj, TimeSegmentPart } from './types';
 import { getOptsByGranularity, normalizeHourCycle } from './utils';
+import { InputSignal } from '@angular/core';
+import { DateFields, DateValue } from '@internationalized/date';
 
 type SyncDateSegmentValuesProps = {
     value: DateValue;
diff --git a/packages/primitives/core/src/date-time/types.ts b/packages/primitives/core/src/date-time/types.ts
index 2428efd8e..ada24ac86 100644
--- a/packages/primitives/core/src/date-time/types.ts
+++ b/packages/primitives/core/src/date-time/types.ts
@@ -2,8 +2,8 @@
  * Implementation ported from https://github.com/melt-ui/melt-ui/blob/develop/src/lib/internal/helpers/date/types.ts
  */
 
-import type { DateValue } from '@internationalized/date';
 import { DATE_SEGMENT_PARTS, EDITABLE_SEGMENT_PARTS, NON_EDITABLE_SEGMENT_PARTS, TIME_SEGMENT_PARTS } from './parts';
+import type { DateValue } from '@internationalized/date';
 
 export type DateMatcher = (date: DateValue) => boolean;
 
diff --git a/packages/primitives/core/src/date-time/useDateField.ts b/packages/primitives/core/src/date-time/useDateField.ts
index 5060f807a..b214b7640 100644
--- a/packages/primitives/core/src/date-time/useDateField.ts
+++ b/packages/primitives/core/src/date-time/useDateField.ts
@@ -1,12 +1,12 @@
 // https://github.com/unovue/reka-ui/blob/v2/packages/core/src/shared/date/useDateField.ts
 
-import { computed, InputSignal, ModelSignal, Signal, WritableSignal } from '@angular/core';
-import { CalendarDateTime, CycleTimeOptions, DateFields, DateValue, TimeFields } from '@internationalized/date';
 import { ARROW_DOWN, ARROW_LEFT, ARROW_RIGHT, ARROW_UP, BACKSPACE, SHIFT, TAB } from '../kbd-constants';
 import { getDaysInMonth, toDate } from './comparators';
 import { Formatter } from './formatter';
 import { isAcceptableSegmentKey, isNumberString, isSegmentNavigationKey } from './segment';
 import { AnyExceptLiteral, DateAndTimeSegmentObj, DateStep, HourCycle, SegmentPart, SegmentValueObj } from './types';
+import { computed, InputSignal, ModelSignal, Signal, WritableSignal } from '@angular/core';
+import { CalendarDateTime, CycleTimeOptions, DateFields, DateValue, TimeFields } from '@internationalized/date';
 
 /** Convert a canonical 24-hour value (0-23) to its 12-hour clock equivalent (1-12). */
 function to12Hour(hour: number): number {
diff --git a/packages/primitives/core/src/dom/use-scroll-lock.ts b/packages/primitives/core/src/dom/use-scroll-lock.ts
index 6fe24b098..b1b406897 100644
--- a/packages/primitives/core/src/dom/use-scroll-lock.ts
+++ b/packages/primitives/core/src/dom/use-scroll-lock.ts
@@ -1,5 +1,5 @@
 import { DOCUMENT, isPlatformBrowser } from '@angular/common';
-import { computed, DestroyRef, effect, inject, PLATFORM_ID, signal, Signal } from '@angular/core';
+import { computed, DestroyRef, effect, inject, PLATFORM_ID, Signal, signal } from '@angular/core';
 
 /** Marker attribute set on `<html>` while scroll is locked (a strategy-independent test/CSS hook). */
 export const RDX_SCROLL_LOCKED_ATTR = 'data-rdx-scroll-locked';
diff --git a/packages/primitives/core/src/floating/floating-node-registration.ts b/packages/primitives/core/src/floating/floating-node-registration.ts
index c9559bb38..9fa5ca923 100644
--- a/packages/primitives/core/src/floating/floating-node-registration.ts
+++ b/packages/primitives/core/src/floating/floating-node-registration.ts
@@ -1,4 +1,3 @@
-import { Directive, effect, inject, input, Signal } from '@angular/core';
 import { injectId } from '../id-generator';
 import {
     provideFloatingRegistration,
@@ -7,6 +6,7 @@ import {
 } from './floating-registration';
 import { RdxFloatingNode, RdxFloatingParentOverride, RdxFloatingTree } from './floating-tree';
 import { RDX_FLOATING_ROOT_CONTEXT, RDX_FLOATING_TREE } from './provide-floating-tree';
+import { Directive, effect, inject, input, Signal } from '@angular/core';
 
 /**
  * Registers a {@link RdxFloatingNode} into the shared {@link RdxFloatingTree} for its DI subtree and
diff --git a/packages/primitives/core/src/floating/floating-registration.ts b/packages/primitives/core/src/floating/floating-registration.ts
index 751992659..7fadfb614 100644
--- a/packages/primitives/core/src/floating/floating-registration.ts
+++ b/packages/primitives/core/src/floating/floating-registration.ts
@@ -1,6 +1,6 @@
-import { computed, InjectionToken, Provider, signal, Signal } from '@angular/core';
 import { rdxDevError } from '../dev/diagnostics';
 import type { RdxFloatingNode, RdxFloatingTree } from './floating-tree';
+import { computed, InjectionToken, Provider, Signal, signal } from '@angular/core';
 
 const DOCS = 'utils/floating-tree';
 
diff --git a/packages/primitives/core/src/floating/floating-root-context.ts b/packages/primitives/core/src/floating/floating-root-context.ts
index 92990e92f..a10664dcc 100644
--- a/packages/primitives/core/src/floating/floating-root-context.ts
+++ b/packages/primitives/core/src/floating/floating-root-context.ts
@@ -1,7 +1,7 @@
-import { isDevMode } from '@angular/core';
 import { rdxDevError } from '../dev/diagnostics';
 import { createFloatingEvents, RdxFloatingEvents, RdxFloatingRootContextEventMap } from './floating-events';
 import { RdxTriggerRegistry } from './trigger-registry';
+import { isDevMode } from '@angular/core';
 
 const DOCS = 'utils/floating-tree';
 
diff --git a/packages/primitives/core/src/floating/floating-tree.ts b/packages/primitives/core/src/floating/floating-tree.ts
index b30e519ec..fbbcdace8 100644
--- a/packages/primitives/core/src/floating/floating-tree.ts
+++ b/packages/primitives/core/src/floating/floating-tree.ts
@@ -1,7 +1,7 @@
-import { isDevMode } from '@angular/core';
 import { rdxDevError } from '../dev/diagnostics';
 import { createFloatingEvents, RdxFloatingEvents } from './floating-events';
 import { RdxFloatingRootContext } from './floating-root-context';
+import { isDevMode } from '@angular/core';
 
 /** Module-private mutable state for {@link RdxFloatingNode}, reachable only by {@link RdxFloatingTree}. */
 interface RdxFloatingNodeInternals {
diff --git a/packages/primitives/core/src/floating/provide-floating-tree.ts b/packages/primitives/core/src/floating/provide-floating-tree.ts
index 3f0f044cc..fa207348c 100644
--- a/packages/primitives/core/src/floating/provide-floating-tree.ts
+++ b/packages/primitives/core/src/floating/provide-floating-tree.ts
@@ -1,6 +1,6 @@
-import { inject, InjectionToken, Provider } from '@angular/core';
 import { RdxFloatingRootContext } from './floating-root-context';
 import { RdxFloatingTree } from './floating-tree';
+import { inject, InjectionToken, Provider } from '@angular/core';
 
 /**
  * The nearest shared {@link RdxFloatingTree}. **Scoped-by-default, sharing explicit** — strict Base UI
diff --git a/packages/primitives/core/src/signal-forms/form-ui-state.ts b/packages/primitives/core/src/signal-forms/form-ui-state.ts
index a477b0720..7a77e73bc 100644
--- a/packages/primitives/core/src/signal-forms/form-ui-state.ts
+++ b/packages/primitives/core/src/signal-forms/form-ui-state.ts
@@ -1,3 +1,5 @@
+import { BooleanInput } from '../types';
+import { RdxValidationError } from './form-control';
 import {
     booleanAttribute,
     computed,
@@ -10,11 +12,9 @@ import {
     output,
     OutputEmitterRef,
     Provider,
-    signal,
-    Signal
+    Signal,
+    signal
 } from '@angular/core';
-import { BooleanInput } from '../types';
-import { RdxValidationError } from './form-control';
 
 /**
  * Optional form-control UI state derived from a control's `invalid`/`errors`/`touched`/`dirty`
diff --git a/packages/primitives/core/stories/inject-id.stories.ts b/packages/primitives/core/stories/inject-id.stories.ts
index 3ef5a668b..f12674756 100644
--- a/packages/primitives/core/stories/inject-id.stories.ts
+++ b/packages/primitives/core/stories/inject-id.stories.ts
@@ -1,7 +1,7 @@
-import { Meta, moduleMetadata, StoryObj } from '@storybook/angular';
 import { tailwindDemoDecorator } from '../../storybook/tailwind-demo';
 import { InjectIdExample } from './inject-id';
 import injectIdSource from './inject-id?raw';
+import { Meta, moduleMetadata, StoryObj } from '@storybook/angular';
 
 const source = (code: string) => ({ docs: { source: { code, language: 'typescript' } } });
 const html = String.raw;
diff --git a/packages/primitives/core/stories/inject-id.ts b/packages/primitives/core/stories/inject-id.ts
index 917069a6f..03d600304 100644
--- a/packages/primitives/core/stories/inject-id.ts
+++ b/packages/primitives/core/stories/inject-id.ts
@@ -1,6 +1,6 @@
+import { cn, demoInput } from '../../storybook/styles';
 import { ChangeDetectionStrategy, Component, input } from '@angular/core';
 import { injectId } from '@radix-ng/primitives/core';
-import { cn, demoInput } from '../../storybook/styles';
 
 /**
  * Each instance calls `injectId('rdx-field-')` in its injection context, so every
@@ -13,7 +13,7 @@ import { cn, demoInput } from '../../storybook/styles';
     template: `
         <div class="flex flex-col gap-1.5">
             <label class="text-foreground text-sm font-medium" [attr.for]="id">{{ label() }}</label>
-            <input [id]="id" [class]="inputClass" [placeholder]="label()" type="text" />
+            <input type="text" [id]="id" [class]="inputClass" [placeholder]="label()" />
             <code class="text-muted-foreground text-xs">id="{{ id }}"</code>
         </div>
     `
diff --git a/packages/primitives/core/stories/live-announcer.stories.ts b/packages/primitives/core/stories/live-announcer.stories.ts
index 1fb2ae3c9..af4b08721 100644
--- a/packages/primitives/core/stories/live-announcer.stories.ts
+++ b/packages/primitives/core/stories/live-announcer.stories.ts
@@ -1,7 +1,7 @@
-import { Meta, moduleMetadata, StoryObj } from '@storybook/angular';
 import { tailwindDemoDecorator } from '../../storybook/tailwind-demo';
 import { LiveAnnouncerExample } from './live-announcer';
 import liveAnnouncerSource from './live-announcer?raw';
+import { Meta, moduleMetadata, StoryObj } from '@storybook/angular';
 
 const source = (code: string) => ({ docs: { source: { code, language: 'typescript' } } });
 const html = String.raw;
diff --git a/packages/primitives/core/stories/live-announcer.ts b/packages/primitives/core/stories/live-announcer.ts
index e65147289..029a85cac 100644
--- a/packages/primitives/core/stories/live-announcer.ts
+++ b/packages/primitives/core/stories/live-announcer.ts
@@ -1,6 +1,6 @@
+import { cn, demoButton } from '../../storybook/styles';
 import { ChangeDetectionStrategy, Component, inject, signal } from '@angular/core';
 import { RdxLiveAnnouncer } from '@radix-ng/primitives/core';
-import { cn, demoButton } from '../../storybook/styles';
 
 /**
  * Triggers screen-reader announcements through `RdxLiveAnnouncer`. The live region is visually
@@ -13,10 +13,10 @@ import { cn, demoButton } from '../../storybook/styles';
     template: `
         <div class="flex w-80 flex-col gap-4">
             <div class="flex gap-2">
-                <button [class]="cn(b.base, b.primary, b.size.md)" (click)="announce('polite')" type="button">
+                <button type="button" [class]="cn(b.base, b.primary, b.size.md)" (click)="announce('polite')">
                     Announce (polite)
                 </button>
-                <button [class]="cn(b.base, b.outline, b.size.md)" (click)="announce('assertive')" type="button">
+                <button type="button" [class]="cn(b.base, b.outline, b.size.md)" (click)="announce('assertive')">
                     Announce (assertive)
                 </button>
             </div>
diff --git a/packages/primitives/cropper/__tests__/cropper-math.spec.ts b/packages/primitives/cropper/__tests__/cropper-math.spec.ts
index 47c9d04f3..45eac0c89 100644
--- a/packages/primitives/cropper/__tests__/cropper-math.spec.ts
+++ b/packages/primitives/cropper/__tests__/cropper-math.spec.ts
@@ -1,5 +1,5 @@
-import { describe, expect, it } from 'vitest';
 import { calculateCropData, CropperGeometry, restrictOffset } from '../src/cropper-math';
+import { describe, expect, it } from 'vitest';
 
 describe('restrictOffset', () => {
     // Wrapper 200x100 inside a 100x100 crop window: horizontal overflow only.
diff --git a/packages/primitives/cropper/index.ts b/packages/primitives/cropper/index.ts
index 3d83abc81..b50d29d33 100644
--- a/packages/primitives/cropper/index.ts
+++ b/packages/primitives/cropper/index.ts
@@ -1,8 +1,8 @@
-import { NgModule } from '@angular/core';
 import { RdxCropperCropAreaDirective } from './src/cropper-crop-area.directive';
 import { RdxCropperDescriptionDirective } from './src/cropper-description.directive';
 import { RdxCropperImageComponent } from './src/cropper-image.component';
 import { RdxCropperRootDirective } from './src/cropper-root.directive';
+import { NgModule } from '@angular/core';
 
 export * from './src/cropper-context.token';
 export * from './src/cropper-crop-area.directive';
diff --git a/packages/primitives/cropper/src/cropper-crop-area.directive.ts b/packages/primitives/cropper/src/cropper-crop-area.directive.ts
index 5bf94169c..c07485fd2 100644
--- a/packages/primitives/cropper/src/cropper-crop-area.directive.ts
+++ b/packages/primitives/cropper/src/cropper-crop-area.directive.ts
@@ -1,5 +1,5 @@
-import { Directive } from '@angular/core';
 import { injectCropperRootContext } from './cropper-context.token';
+import { Directive } from '@angular/core';
 
 @Directive({
     selector: '[rdxCropperCropArea]',
diff --git a/packages/primitives/cropper/src/cropper-description.directive.ts b/packages/primitives/cropper/src/cropper-description.directive.ts
index feca276e3..22adc34a6 100644
--- a/packages/primitives/cropper/src/cropper-description.directive.ts
+++ b/packages/primitives/cropper/src/cropper-description.directive.ts
@@ -1,5 +1,5 @@
-import { Directive } from '@angular/core';
 import { injectCropperRootContext } from './cropper-context.token';
+import { Directive } from '@angular/core';
 
 @Directive({
     selector: '[rdxCropperDescription]',
diff --git a/packages/primitives/cropper/src/cropper-image.component.ts b/packages/primitives/cropper/src/cropper-image.component.ts
index a935091d0..c5d998dc9 100644
--- a/packages/primitives/cropper/src/cropper-image.component.ts
+++ b/packages/primitives/cropper/src/cropper-image.component.ts
@@ -1,5 +1,5 @@
-import { ChangeDetectionStrategy, Component, input } from '@angular/core';
 import { injectCropperRootContext } from './cropper-context.token';
+import { ChangeDetectionStrategy, Component, input } from '@angular/core';
 
 @Component({
     changeDetection: ChangeDetectionStrategy.Eager,
diff --git a/packages/primitives/cropper/src/cropper-root.directive.ts b/packages/primitives/cropper/src/cropper-root.directive.ts
index d727e939b..b0cffe7f9 100644
--- a/packages/primitives/cropper/src/cropper-root.directive.ts
+++ b/packages/primitives/cropper/src/cropper-root.directive.ts
@@ -1,5 +1,12 @@
 // Based on https://github.com/origin-space/image-cropper/blob/main/src/Cropper.tsx
 
+import { CropperRootContext, provideCropperRootContext } from './cropper-context.token';
+import {
+    Area,
+    calculateCropData as computeCropData,
+    CropperGeometry,
+    restrictOffset as computeRestrictedOffset
+} from './cropper-math';
 import { isPlatformBrowser } from '@angular/common';
 import {
     afterNextRender,
@@ -18,13 +25,6 @@ import {
     untracked
 } from '@angular/core';
 import { BooleanInput, clamp, injectId, NumberInput, resizeEffect } from '@radix-ng/primitives/core';
-import { CropperRootContext, provideCropperRootContext } from './cropper-context.token';
-import {
-    Area,
-    calculateCropData as computeCropData,
-    restrictOffset as computeRestrictedOffset,
-    CropperGeometry
-} from './cropper-math';
 
 export type { Area };
 
diff --git a/packages/primitives/cropper/stories/cropper-default.ts b/packages/primitives/cropper/stories/cropper-default.ts
index 65a6077a9..cc7950d21 100644
--- a/packages/primitives/cropper/stories/cropper-default.ts
+++ b/packages/primitives/cropper/stories/cropper-default.ts
@@ -1,9 +1,9 @@
-import { ChangeDetectionStrategy, Component } from '@angular/core';
 import { demoCropper } from '../../storybook/styles';
 import { RdxCropperCropAreaDirective } from '../src/cropper-crop-area.directive';
 import { RdxCropperDescriptionDirective } from '../src/cropper-description.directive';
 import { RdxCropperImageComponent } from '../src/cropper-image.component';
 import { RdxCropperRootDirective } from '../src/cropper-root.directive';
+import { ChangeDetectionStrategy, Component } from '@angular/core';
 
 @Component({
     changeDetection: ChangeDetectionStrategy.Eager,
@@ -15,12 +15,12 @@ import { RdxCropperRootDirective } from '../src/cropper-root.directive';
         RdxCropperDescriptionDirective
     ],
     template: `
-        <div [class]="c.root" image="https://images.unsplash.com/photo-1494790108377-be9c29b29330" rdxCropperRoot>
+        <div image="https://images.unsplash.com/photo-1494790108377-be9c29b29330" rdxCropperRoot [class]="c.root">
             <div class="sr-only" rdxCropperDescription>
                 Use the arrow keys to move the image, and plus or minus to zoom.
             </div>
-            <div [imgClass]="c.image" rdxCropperImage></div>
-            <div [class]="c.cropArea" rdxCropperCropArea></div>
+            <div rdxCropperImage [imgClass]="c.image"></div>
+            <div rdxCropperCropArea [class]="c.cropArea"></div>
         </div>
     `
 })
diff --git a/packages/primitives/cropper/stories/cropper-disabled.ts b/packages/primitives/cropper/stories/cropper-disabled.ts
index cf6ae6bbb..69fd1d7ba 100644
--- a/packages/primitives/cropper/stories/cropper-disabled.ts
+++ b/packages/primitives/cropper/stories/cropper-disabled.ts
@@ -1,9 +1,9 @@
-import { ChangeDetectionStrategy, Component } from '@angular/core';
 import { demoCropper } from '../../storybook/styles';
 import { RdxCropperCropAreaDirective } from '../src/cropper-crop-area.directive';
 import { RdxCropperDescriptionDirective } from '../src/cropper-description.directive';
 import { RdxCropperImageComponent } from '../src/cropper-image.component';
 import { RdxCropperRootDirective } from '../src/cropper-root.directive';
+import { ChangeDetectionStrategy, Component } from '@angular/core';
 
 @Component({
     changeDetection: ChangeDetectionStrategy.Eager,
@@ -16,16 +16,16 @@ import { RdxCropperRootDirective } from '../src/cropper-root.directive';
     ],
     template: `
         <div
-            [class]="c.root"
             disabled
             image="https://images.unsplash.com/photo-1494790108377-be9c29b29330"
             rdxCropperRoot
+            [class]="c.root"
         >
             <div class="sr-only" rdxCropperDescription>
                 Use the arrow keys to move the image, and plus or minus to zoom.
             </div>
-            <div [imgClass]="c.image" rdxCropperImage></div>
-            <div [class]="c.cropArea" rdxCropperCropArea></div>
+            <div rdxCropperImage [imgClass]="c.image"></div>
+            <div rdxCropperCropArea [class]="c.cropArea"></div>
         </div>
     `
 })
diff --git a/packages/primitives/cropper/stories/cropper-with-data.ts b/packages/primitives/cropper/stories/cropper-with-data.ts
index 923bd6cc8..11a0da898 100644
--- a/packages/primitives/cropper/stories/cropper-with-data.ts
+++ b/packages/primitives/cropper/stories/cropper-with-data.ts
@@ -1,9 +1,9 @@
-import { ChangeDetectionStrategy, Component, signal } from '@angular/core';
 import { demoCropper } from '../../storybook/styles';
 import { RdxCropperCropAreaDirective } from '../src/cropper-crop-area.directive';
 import { RdxCropperDescriptionDirective } from '../src/cropper-description.directive';
 import { RdxCropperImageComponent } from '../src/cropper-image.component';
 import { Area, RdxCropperRootDirective } from '../src/cropper-root.directive';
+import { ChangeDetectionStrategy, Component, signal } from '@angular/core';
 
 @Component({
     changeDetection: ChangeDetectionStrategy.Eager,
@@ -17,16 +17,16 @@ import { Area, RdxCropperRootDirective } from '../src/cropper-root.directive';
     template: `
         <div class="flex flex-col items-center gap-2">
             <div
-                [class]="c.root"
-                (onCropChange)="cropData.set($event)"
                 image="https://images.unsplash.com/photo-1494790108377-be9c29b29330"
                 rdxCropperRoot
+                [class]="c.root"
+                (onCropChange)="cropData.set($event)"
             >
                 <div class="sr-only" rdxCropperDescription>
                     Use the arrow keys to move the image, and plus or minus to zoom.
                 </div>
-                <div [imgClass]="c.image" rdxCropperImage></div>
-                <div [class]="c.cropArea" rdxCropperCropArea></div>
+                <div rdxCropperImage [imgClass]="c.image"></div>
+                <div rdxCropperCropArea [class]="c.cropArea"></div>
             </div>
 
             @if (cropData(); as data) {
diff --git a/packages/primitives/cropper/stories/cropper.stories.ts b/packages/primitives/cropper/stories/cropper.stories.ts
index 58b739cfc..1d668c398 100644
--- a/packages/primitives/cropper/stories/cropper.stories.ts
+++ b/packages/primitives/cropper/stories/cropper.stories.ts
@@ -1,13 +1,12 @@
-import { Meta, moduleMetadata, StoryObj } from '@storybook/angular';
 import { tailwindDemoDecorator } from '../../storybook/tailwind-demo';
 import { CropperDefault } from './cropper-default';
-import { CropperDisabled } from './cropper-disabled';
-import { CropperWithData } from './cropper-with-data';
-
 // Full component source for the "Show code" panel (Vite `?raw` import).
 import defaultSource from './cropper-default?raw';
+import { CropperDisabled } from './cropper-disabled';
 import disabledSource from './cropper-disabled?raw';
+import { CropperWithData } from './cropper-with-data';
 import withDataSource from './cropper-with-data?raw';
+import { Meta, moduleMetadata, StoryObj } from '@storybook/angular';
 
 const source = (code: string) => ({
     docs: {
diff --git a/packages/primitives/date-field/__tests__/date-field.spec.ts b/packages/primitives/date-field/__tests__/date-field.spec.ts
index 8398c1246..2a8634f7d 100644
--- a/packages/primitives/date-field/__tests__/date-field.spec.ts
+++ b/packages/primitives/date-field/__tests__/date-field.spec.ts
@@ -1,24 +1,24 @@
+import { RdxDateFieldInputDirective } from '../src/date-field-input.directive';
+import { RdxDateFieldRootDirective } from '../src/date-field-root.directive';
 import { ChangeDetectionStrategy, Component, signal } from '@angular/core';
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { form, FormField } from '@angular/forms/signals';
 import { By } from '@angular/platform-browser';
 import { CalendarDate, CalendarDateTime, DateValue } from '@internationalized/date';
 import { Granularity } from '@radix-ng/primitives/core';
-import { RdxDateFieldInputDirective } from '../src/date-field-input.directive';
-import { RdxDateFieldRootDirective } from '../src/date-field-root.directive';
 
 @Component({
     changeDetection: ChangeDetectionStrategy.Eager,
     template: `
         <div
             #root="rdxDateFieldRoot"
+            rdxDateFieldRoot
             [granularity]="granularity()"
             [locale]="locale()"
             [value]="value()"
-            rdxDateFieldRoot
         >
             @for (item of root.segmentContents(); track $index) {
-                <div [part]="item.part" rdxDateFieldInput>{{ item.value }}</div>
+                <div rdxDateFieldInput [part]="item.part">{{ item.value }}</div>
             }
         </div>
     `,
@@ -118,15 +118,15 @@ describe('Date Field', () => {
     template: `
         <div
             #root="rdxDateFieldRoot"
+            rdxDateFieldRoot
             [value]="value()"
             [maxValue]="maxValue()"
             [invalid]="invalid()"
             [errors]="errors()"
             [dirty]="dirty()"
-            rdxDateFieldRoot
         >
             @for (item of root.segmentContents(); track $index) {
-                <div [part]="item.part" rdxDateFieldInput>{{ item.value }}</div>
+                <div rdxDateFieldInput [part]="item.part">{{ item.value }}</div>
             }
         </div>
     `,
@@ -198,9 +198,9 @@ describe('RdxDateField validation state', () => {
 @Component({
     changeDetection: ChangeDetectionStrategy.Eager,
     template: `
-        <div #root="rdxDateFieldRoot" [formField]="date" rdxDateFieldRoot>
+        <div #root="rdxDateFieldRoot" rdxDateFieldRoot [formField]="date">
             @for (item of root.segmentContents(); track $index) {
-                <div [part]="item.part" rdxDateFieldInput>{{ item.value }}</div>
+                <div rdxDateFieldInput [part]="item.part">{{ item.value }}</div>
             }
         </div>
     `,
diff --git a/packages/primitives/date-field/index.ts b/packages/primitives/date-field/index.ts
index 0bdc021cc..845c853c3 100644
--- a/packages/primitives/date-field/index.ts
+++ b/packages/primitives/date-field/index.ts
@@ -1,6 +1,6 @@
-import { NgModule } from '@angular/core';
 import { RdxDateFieldInputDirective } from './src/date-field-input.directive';
 import { RdxDateFieldRootDirective } from './src/date-field-root.directive';
+import { NgModule } from '@angular/core';
 
 export * from './src/date-field-context.token';
 export * from './src/date-field-input.directive';
diff --git a/packages/primitives/date-field/src/date-field-input.directive.ts b/packages/primitives/date-field/src/date-field-input.directive.ts
index 7a6e2212e..fc6f21fba 100644
--- a/packages/primitives/date-field/src/date-field-input.directive.ts
+++ b/packages/primitives/date-field/src/date-field-input.directive.ts
@@ -1,6 +1,6 @@
+import { injectDateFieldsRootContext } from './date-field-context.token';
 import { computed, Directive, effect, ElementRef, inject, input, signal } from '@angular/core';
 import { isNullish, SegmentPart, useDateField } from '@radix-ng/primitives/core';
-import { injectDateFieldsRootContext } from './date-field-context.token';
 
 /**
  * Attribute keys produced by `useDateField().attributes()` that are instead owned by host
diff --git a/packages/primitives/date-field/src/date-field-root.directive.ts b/packages/primitives/date-field/src/date-field-root.directive.ts
index ddf84bae5..a1c325016 100644
--- a/packages/primitives/date-field/src/date-field-root.directive.ts
+++ b/packages/primitives/date-field/src/date-field-root.directive.ts
@@ -1,3 +1,5 @@
+import { DATE_FIELDS_ROOT_CONTEXT } from './date-field-context.token';
+import { RdxDateFieldInputDirective } from './date-field-input.directive';
 import {
     booleanAttribute,
     computed,
@@ -38,8 +40,6 @@ import {
     watch
 } from '@radix-ng/primitives/core';
 import { injectDirection } from '@radix-ng/primitives/direction-provider';
-import { DATE_FIELDS_ROOT_CONTEXT } from './date-field-context.token';
-import { RdxDateFieldInputDirective } from './date-field-input.directive';
 
 @Directive({
     selector: '[rdxDateFieldRoot]',
diff --git a/packages/primitives/date-field/stories/date-field.component.ts b/packages/primitives/date-field/stories/date-field.component.ts
index 7aa958a7d..84c9a229c 100644
--- a/packages/primitives/date-field/stories/date-field.component.ts
+++ b/packages/primitives/date-field/stories/date-field.component.ts
@@ -1,9 +1,9 @@
+import { RdxDateFieldInputDirective } from '../src/date-field-input.directive';
+import { RdxDateFieldRootDirective } from '../src/date-field-root.directive';
 import { ChangeDetectionStrategy, Component, input, model } from '@angular/core';
 import { DateValue } from '@internationalized/date';
 import { Granularity } from '@radix-ng/primitives/core';
 import { RdxVisuallyHiddenInputDirective } from '@radix-ng/primitives/visually-hidden';
-import { RdxDateFieldInputDirective } from '../src/date-field-input.directive';
-import { RdxDateFieldRootDirective } from '../src/date-field-root.directive';
 
 @Component({
     changeDetection: ChangeDetectionStrategy.Eager,
@@ -11,29 +11,29 @@ import { RdxDateFieldRootDirective } from '../src/date-field-root.directive';
     imports: [RdxDateFieldRootDirective, RdxDateFieldInputDirective, RdxVisuallyHiddenInputDirective],
     template: `
         <div
-            class="border-input bg-background text-foreground data-[invalid]:border-destructive inline-flex items-center rounded-md border px-3 py-2 text-sm shadow-xs select-none"
             #root="rdxDateFieldRoot"
-            [(value)]="value"
+            class="border-input bg-background text-foreground data-[invalid]:border-destructive inline-flex items-center rounded-md border px-3 py-2 text-sm shadow-xs select-none"
+            rdxDateFieldRoot
             [locale]="locale()"
             [granularity]="granularity()"
-            rdxDateFieldRoot
+            [(value)]="value"
         >
             @for (item of root.segmentContents(); track $index) {
                 @if (item.part === 'literal') {
-                    <div class="text-muted-foreground px-0.5" [part]="item.part" rdxDateFieldInput>
+                    <div class="text-muted-foreground px-0.5" rdxDateFieldInput [part]="item.part">
                         {{ item.value }}
                     </div>
                 } @else {
                     <div
                         class="hover:bg-muted focus:bg-accent focus:text-accent-foreground data-[placeholder]:text-muted-foreground rounded px-1 tabular-nums focus:outline-none"
-                        [part]="item.part"
                         rdxDateFieldInput
+                        [part]="item.part"
                     >
                         {{ item.value }}
                     </div>
                 }
             }
-            <input [value]="root.value()" rdxVisuallyHiddenInput feature="focusable" />
+            <input rdxVisuallyHiddenInput feature="focusable" [value]="root.value()" />
         </div>
     `
 })
diff --git a/packages/primitives/date-field/stories/date-field.invalid.ts b/packages/primitives/date-field/stories/date-field.invalid.ts
index de4a75b34..aa7956bc1 100644
--- a/packages/primitives/date-field/stories/date-field.invalid.ts
+++ b/packages/primitives/date-field/stories/date-field.invalid.ts
@@ -1,8 +1,8 @@
+import { RdxDateFieldInputDirective } from '../src/date-field-input.directive';
+import { RdxDateFieldRootDirective } from '../src/date-field-root.directive';
 import { ChangeDetectionStrategy, Component } from '@angular/core';
 import { DateValue } from '@internationalized/date';
 import { RdxVisuallyHiddenInputDirective } from '@radix-ng/primitives/visually-hidden';
-import { RdxDateFieldInputDirective } from '../src/date-field-input.directive';
-import { RdxDateFieldRootDirective } from '../src/date-field-root.directive';
 
 @Component({
     changeDetection: ChangeDetectionStrategy.Eager,
@@ -14,29 +14,29 @@ import { RdxDateFieldRootDirective } from '../src/date-field-root.directive';
                 Appointment (unavailable on 19th)
             </label>
             <div
+                #root="rdxDateFieldRoot"
                 class="border-input bg-background text-foreground data-[invalid]:border-destructive inline-flex items-center rounded-md border px-3 py-2 text-sm shadow-xs select-none"
                 id="date-field-invalid"
-                #root="rdxDateFieldRoot"
-                [isDateUnavailable]="isDateUnavailable"
                 granularity="day"
                 rdxDateFieldRoot
+                [isDateUnavailable]="isDateUnavailable"
             >
                 @for (item of root.segmentContents(); track $index) {
                     @if (item.part === 'literal') {
-                        <div class="text-muted-foreground px-0.5" [part]="item.part" rdxDateFieldInput>
+                        <div class="text-muted-foreground px-0.5" rdxDateFieldInput [part]="item.part">
                             {{ item.value }}
                         </div>
                     } @else {
                         <div
                             class="hover:bg-muted focus:bg-accent focus:text-accent-foreground data-[placeholder]:text-muted-foreground rounded px-1 tabular-nums focus:outline-none"
-                            [part]="item.part"
                             rdxDateFieldInput
+                            [part]="item.part"
                         >
                             {{ item.value }}
                         </div>
                     }
                 }
-                <input [value]="root.value()" rdxVisuallyHiddenInput feature="focusable" />
+                <input rdxVisuallyHiddenInput feature="focusable" [value]="root.value()" />
 
                 @if (root.isInvalid()) {
                     <span class="text-destructive pl-2">Invalid Day</span>
diff --git a/packages/primitives/date-field/stories/date-field.stories.ts b/packages/primitives/date-field/stories/date-field.stories.ts
index 980a3ef73..9cacf0a3d 100644
--- a/packages/primitives/date-field/stories/date-field.stories.ts
+++ b/packages/primitives/date-field/stories/date-field.stories.ts
@@ -1,11 +1,10 @@
-import { Meta, moduleMetadata, StoryObj } from '@storybook/angular';
 import { tailwindDemoDecorator } from '../../storybook/tailwind-demo';
 import { DateFieldComponent } from './date-field.component';
-import { DateFieldInvalid } from './date-field.invalid';
-
 // Full component source for the "Show code" panel (Vite `?raw` import).
 import demoSource from './date-field.component?raw';
+import { DateFieldInvalid } from './date-field.invalid';
 import invalidSource from './date-field.invalid?raw';
+import { Meta, moduleMetadata, StoryObj } from '@storybook/angular';
 
 const source = (code: string) => ({
     docs: {
diff --git a/packages/primitives/dialog/__tests__/dialog.spec.ts b/packages/primitives/dialog/__tests__/dialog.spec.ts
index c6554ef8d..722a04cbc 100644
--- a/packages/primitives/dialog/__tests__/dialog.spec.ts
+++ b/packages/primitives/dialog/__tests__/dialog.spec.ts
@@ -32,13 +32,13 @@ import { axe } from 'jest-axe';
     template: `
         <div
             #root="rdxDialogRoot"
-            [(open)]="open"
+            rdxDialogRoot
             [defaultOpen]="defaultOpen"
             [modal]="modal"
             [disablePointerDismissal]="disablePointerDismissal"
+            [(open)]="open"
             (onOpenChange)="changes.push($event)"
             (onOpenChangeComplete)="complete.push($event)"
-            rdxDialogRoot
         >
             <button rdxDialogTrigger>Open</button>
 
@@ -66,7 +66,7 @@ class TestHostComponent {
     changeDetection: ChangeDetectionStrategy.Eager,
     imports: [RdxDialogRoot, RdxDialogTrigger, RdxDialogPortal, RdxDialogPopup],
     template: `
-        <div [defaultOpen]="true" rdxDialogRoot>
+        <div rdxDialogRoot [defaultOpen]="true">
             <button rdxDialogTrigger>Open</button>
             <ng-template rdxDialogPortal>
                 <div rdxDialogPopup>Popup</div>
@@ -80,7 +80,7 @@ class DefaultOpenHostComponent {}
     changeDetection: ChangeDetectionStrategy.Eager,
     imports: [RdxDialogRoot, RdxDialogTrigger, RdxDialogPortal, RdxDialogPopup],
     template: `
-        <div [(open)]="open" (onOpenChange)="changes.push($event)" rdxDialogRoot>
+        <div rdxDialogRoot [(open)]="open" (onOpenChange)="changes.push($event)">
             <button rdxDialogTrigger>Open</button>
             <ng-template rdxDialogPortal>
                 <div rdxDialogPopup>Popup</div>
@@ -97,7 +97,7 @@ class NoBackdropHostComponent {
     changeDetection: ChangeDetectionStrategy.Eager,
     imports: [RdxDialogRoot, RdxDialogTrigger, RdxDialogPortal, RdxDialogPopup, RdxDialogClose],
     template: `
-        <div [(open)]="open" (onOpenChange)="handleOpenChange($event)" rdxDialogRoot>
+        <div rdxDialogRoot [(open)]="open" (onOpenChange)="handleOpenChange($event)">
             <button rdxDialogTrigger>Open</button>
             <ng-template rdxDialogPortal>
                 <div rdxDialogPopup>
@@ -139,7 +139,7 @@ class DialogCancelableHostComponent {
     changeDetection: ChangeDetectionStrategy.Eager,
     imports: [RdxDialogRoot, RdxDialogTrigger, RdxDialogPortal, RdxDialogPopup],
     template: `
-        <div #root="rdxDialogRoot" [(open)]="open" [(triggerId)]="triggerId" rdxDialogRoot>
+        <div #root="rdxDialogRoot" rdxDialogRoot [(open)]="open" [(triggerId)]="triggerId">
             <button id="trigger-one" rdxDialogTrigger>One</button>
             <button id="trigger-two" rdxDialogTrigger>Two</button>
             <ng-template rdxDialogPortal>
@@ -157,9 +157,9 @@ class MultipleTriggersHostComponent {
     changeDetection: ChangeDetectionStrategy.Eager,
     imports: [RdxDialogRoot, RdxDialogTrigger, RdxDialogPortal, RdxDialogPopup],
     template: `
-        <button id="detached-one" [handle]="handle" rdxDialogTrigger>One</button>
-        <button id="detached-two" [handle]="handle" rdxDialogTrigger>Two</button>
-        <div [handle]="handle" rdxDialogRoot>
+        <button id="detached-one" rdxDialogTrigger [handle]="handle">One</button>
+        <button id="detached-two" rdxDialogTrigger [handle]="handle">Two</button>
+        <div rdxDialogRoot [handle]="handle">
             <ng-template rdxDialogPortal>
                 <div rdxDialogPopup>Popup</div>
             </ng-template>
diff --git a/packages/primitives/dialog/index.ts b/packages/primitives/dialog/index.ts
index 9203235a2..adac448ee 100644
--- a/packages/primitives/dialog/index.ts
+++ b/packages/primitives/dialog/index.ts
@@ -1,4 +1,3 @@
-import { NgModule } from '@angular/core';
 import { RdxDialogBackdrop } from './src/dialog-backdrop';
 import { RdxDialogClose } from './src/dialog-close';
 import { RdxDialogDescription } from './src/dialog-description';
@@ -8,6 +7,7 @@ import { RdxDialogRoot } from './src/dialog-root';
 import { RdxDialogTitle } from './src/dialog-title';
 import { RdxDialogTrigger } from './src/dialog-trigger';
 import { RdxDialogViewport } from './src/dialog-viewport';
+import { NgModule } from '@angular/core';
 
 export * from './src/dialog-backdrop';
 export * from './src/dialog-close';
diff --git a/packages/primitives/dialog/src/dialog-backdrop.ts b/packages/primitives/dialog/src/dialog-backdrop.ts
index e440e486d..6af31c7b2 100644
--- a/packages/primitives/dialog/src/dialog-backdrop.ts
+++ b/packages/primitives/dialog/src/dialog-backdrop.ts
@@ -1,6 +1,6 @@
+import { injectRdxDialogRootContext } from './dialog-root';
 import { booleanAttribute, DestroyRef, Directive, ElementRef, inject, input } from '@angular/core';
 import { BooleanInput, RDX_FLOATING_ROOT_CONTEXT } from '@radix-ng/primitives/core';
-import { injectRdxDialogRootContext } from './dialog-root';
 
 /**
  * An overlay displayed beneath the dialog popup.
diff --git a/packages/primitives/dialog/src/dialog-close.ts b/packages/primitives/dialog/src/dialog-close.ts
index 68bfdfbd2..666aa058e 100644
--- a/packages/primitives/dialog/src/dialog-close.ts
+++ b/packages/primitives/dialog/src/dialog-close.ts
@@ -1,5 +1,5 @@
-import { Directive } from '@angular/core';
 import { injectRdxDialogRootContext } from './dialog-root';
+import { Directive } from '@angular/core';
 
 /**
  * A button that closes the dialog.
diff --git a/packages/primitives/dialog/src/dialog-description.ts b/packages/primitives/dialog/src/dialog-description.ts
index 44324f522..11390e3cd 100644
--- a/packages/primitives/dialog/src/dialog-description.ts
+++ b/packages/primitives/dialog/src/dialog-description.ts
@@ -1,6 +1,6 @@
+import { injectRdxDialogRootContext } from './dialog-root';
 import { DestroyRef, Directive, inject } from '@angular/core';
 import { injectId } from '@radix-ng/primitives/core';
-import { injectRdxDialogRootContext } from './dialog-root';
 
 /**
  * An accessible description for the dialog.
diff --git a/packages/primitives/dialog/src/dialog-handle.ts b/packages/primitives/dialog/src/dialog-handle.ts
index 8b9cb9c42..c732f1908 100644
--- a/packages/primitives/dialog/src/dialog-handle.ts
+++ b/packages/primitives/dialog/src/dialog-handle.ts
@@ -1,5 +1,5 @@
-import { computed, signal } from '@angular/core';
 import type { RdxDialogRootContext } from './dialog-root';
+import { computed, signal } from '@angular/core';
 
 interface RdxDialogHandleTrigger<Payload> {
     element: HTMLElement;
diff --git a/packages/primitives/dialog/src/dialog-popup.ts b/packages/primitives/dialog/src/dialog-popup.ts
index df47413f7..467deec2b 100644
--- a/packages/primitives/dialog/src/dialog-popup.ts
+++ b/packages/primitives/dialog/src/dialog-popup.ts
@@ -1,3 +1,4 @@
+import { injectRdxDialogRootContext } from './dialog-root';
 import { afterNextRender, computed, DestroyRef, Directive, ElementRef, inject, Injector, output } from '@angular/core';
 import { outputFromObservable, outputToObservable } from '@angular/core/rxjs-interop';
 import {
@@ -13,7 +14,6 @@ import {
     RdxFloatingFocusManager
 } from '@radix-ng/primitives/floating-focus-manager';
 import { RdxFocusScope } from '@radix-ng/primitives/focus-scope';
-import { injectRdxDialogRootContext } from './dialog-root';
 
 /** Composite navigation keys a Dialog popup keeps to itself, so they never reach an enclosing Menu / Composite. */
 const COMPOSITE_KEYS = new Set(['ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight', 'Home', 'End']);
diff --git a/packages/primitives/dialog/src/dialog-portal.ts b/packages/primitives/dialog/src/dialog-portal.ts
index 0309d9007..8b65b01ee 100644
--- a/packages/primitives/dialog/src/dialog-portal.ts
+++ b/packages/primitives/dialog/src/dialog-portal.ts
@@ -1,8 +1,8 @@
+import { injectRdxDialogRootContext } from './dialog-root';
 import { Directive, input, isDevMode } from '@angular/core';
 import { rdxDevError } from '@radix-ng/primitives/core';
 import { RdxPortalContainer, RdxPortalPresence } from '@radix-ng/primitives/portal';
 import { provideRdxPresenceContext } from '@radix-ng/primitives/presence';
-import { injectRdxDialogRootContext } from './dialog-root';
 
 /**
  * Structural directive that teleports the dialog content (backdrop + popup) into a container (default
diff --git a/packages/primitives/dialog/src/dialog-root.ts b/packages/primitives/dialog/src/dialog-root.ts
index 51ed20523..9f5b156a4 100644
--- a/packages/primitives/dialog/src/dialog-root.ts
+++ b/packages/primitives/dialog/src/dialog-root.ts
@@ -1,3 +1,5 @@
+import { RdxDialogHandle } from './dialog-handle';
+import { RDX_DIALOG_VARIANT, RdxDialogRole } from './dialog-variant';
 import {
     booleanAttribute,
     computed,
@@ -27,8 +29,6 @@ import {
     useTransitionStatus
 } from '@radix-ng/primitives/core';
 import { getInteractionTypeFromEvent, RdxInteractionType } from '@radix-ng/primitives/floating-focus-manager';
-import { RdxDialogHandle } from './dialog-handle';
-import { RDX_DIALOG_VARIANT, RdxDialogRole } from './dialog-variant';
 
 export type RdxDialogModal = boolean | 'trap-focus';
 
diff --git a/packages/primitives/dialog/src/dialog-title.ts b/packages/primitives/dialog/src/dialog-title.ts
index a6ad8f9e5..81b6f8f72 100644
--- a/packages/primitives/dialog/src/dialog-title.ts
+++ b/packages/primitives/dialog/src/dialog-title.ts
@@ -1,6 +1,6 @@
+import { injectRdxDialogRootContext } from './dialog-root';
 import { DestroyRef, Directive, inject } from '@angular/core';
 import { injectId } from '@radix-ng/primitives/core';
-import { injectRdxDialogRootContext } from './dialog-root';
 
 /**
  * An accessible title for the dialog.
diff --git a/packages/primitives/dialog/src/dialog-trigger.ts b/packages/primitives/dialog/src/dialog-trigger.ts
index f6d868771..04625147c 100644
--- a/packages/primitives/dialog/src/dialog-trigger.ts
+++ b/packages/primitives/dialog/src/dialog-trigger.ts
@@ -1,8 +1,8 @@
+import { RdxDialogHandle } from './dialog-handle';
+import { injectRdxDialogRootContext } from './dialog-root';
 import { booleanAttribute, computed, Directive, effect, ElementRef, inject, input, untracked } from '@angular/core';
 import { injectId } from '@radix-ng/primitives/core';
 import { createRdxTriggerInteraction, useTriggerFocusGuardAnchor } from '@radix-ng/primitives/floating-focus-manager';
-import { RdxDialogHandle } from './dialog-handle';
-import { injectRdxDialogRootContext } from './dialog-root';
 
 /**
  * A button that opens the dialog.
diff --git a/packages/primitives/dialog/src/dialog-viewport.ts b/packages/primitives/dialog/src/dialog-viewport.ts
index b496eb666..7e5394576 100644
--- a/packages/primitives/dialog/src/dialog-viewport.ts
+++ b/packages/primitives/dialog/src/dialog-viewport.ts
@@ -1,5 +1,5 @@
-import { Directive } from '@angular/core';
 import { injectRdxDialogRootContext } from './dialog-root';
+import { Directive } from '@angular/core';
 
 /**
  * A positioning container for the dialog popup that can be made scrollable.
diff --git a/packages/primitives/dialog/stories/dialog-close-confirmation.ts b/packages/primitives/dialog/stories/dialog-close-confirmation.ts
index a03dedd4c..949040826 100644
--- a/packages/primitives/dialog/stories/dialog-close-confirmation.ts
+++ b/packages/primitives/dialog/stories/dialog-close-confirmation.ts
@@ -1,8 +1,8 @@
+import { cn, demoButton, demoDialog, demoInput } from '../../storybook/styles';
 import { ChangeDetectionStrategy, Component, signal } from '@angular/core';
 import { FormsModule } from '@angular/forms';
 import { LucideX } from '@lucide/angular';
 import { dialogImports, RdxDialogOpenChange } from '@radix-ng/primitives/dialog';
-import { cn, demoButton, demoDialog, demoInput } from '../../storybook/styles';
 
 @Component({
     changeDetection: ChangeDetectionStrategy.Eager,
@@ -10,21 +10,21 @@ import { cn, demoButton, demoDialog, demoInput } from '../../storybook/styles';
     imports: [...dialogImports, FormsModule, LucideX],
     template: `
         <!-- The editor dialog is controlled so a close request can be intercepted. -->
-        <div [(open)]="editorOpen" (onOpenChange)="onEditorOpenChange($event)" rdxDialogRoot>
-            <button [class]="cn(b.base, b.primary, b.size.md)" rdxDialogTrigger>Edit description</button>
+        <div rdxDialogRoot [(open)]="editorOpen" (onOpenChange)="onEditorOpenChange($event)">
+            <button rdxDialogTrigger [class]="cn(b.base, b.primary, b.size.md)">Edit description</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 description</h2>
-                    <p [class]="d.description" rdxDialogDescription>
+                <div rdxDialogPopup [class]="cn(d.popup, d.popupAnimated)">
+                    <h2 rdxDialogTitle [class]="d.title">Edit description</h2>
+                    <p rdxDialogDescription [class]="d.description">
                         Closing with unsaved changes asks for confirmation.
                     </p>
 
                     <label [class]="d.field">
                         Description
-                        <input [(ngModel)]="text" [class]="input" placeholder="Type to create changes" />
+                        <input placeholder="Type to create changes" [class]="input" [(ngModel)]="text" />
                     </label>
 
                     <div [class]="d.footer">
@@ -32,7 +32,7 @@ import { cn, demoButton, demoDialog, demoInput } from '../../storybook/styles';
                         <button [class]="cn(b.base, b.primary, b.size.sm)" (click)="save()">Save</button>
                     </div>
 
-                    <button [class]="d.close" (click)="requestClose()" aria-label="Close">
+                    <button aria-label="Close" [class]="d.close" (click)="requestClose()">
                         <svg aria-hidden="true" lucideX size="16" />
                     </button>
                 </div>
@@ -40,12 +40,12 @@ import { cn, demoButton, demoDialog, demoInput } from '../../storybook/styles';
         </div>
 
         <!-- Confirmation dialog, controlled separately. -->
-        <div [(open)]="confirmOpen" rdxDialogRoot>
+        <div rdxDialogRoot [(open)]="confirmOpen">
             <ng-template rdxDialogPortal>
-                <div [class]="cn(d.backdrop, d.backdropAnimated)" rdxDialogBackdrop></div>
-                <div [class]="cn(d.popup, d.popupAnimated)" rdxDialogPopup>
-                    <h2 [class]="d.title" rdxDialogTitle>Discard changes?</h2>
-                    <p [class]="d.description" rdxDialogDescription>Your edits will be lost.</p>
+                <div rdxDialogBackdrop [class]="cn(d.backdrop, d.backdropAnimated)"></div>
+                <div rdxDialogPopup [class]="cn(d.popup, d.popupAnimated)">
+                    <h2 rdxDialogTitle [class]="d.title">Discard changes?</h2>
+                    <p rdxDialogDescription [class]="d.description">Your edits will be lost.</p>
                     <div [class]="d.footer">
                         <button [class]="cn(b.base, b.outline, b.size.sm)" (click)="confirmOpen.set(false)">
                             Keep editing
diff --git a/packages/primitives/dialog/stories/dialog-controlled-multiple.ts b/packages/primitives/dialog/stories/dialog-controlled-multiple.ts
index e6747d2bf..106ba7e40 100644
--- a/packages/primitives/dialog/stories/dialog-controlled-multiple.ts
+++ b/packages/primitives/dialog/stories/dialog-controlled-multiple.ts
@@ -1,7 +1,7 @@
+import { cn, demoButton, demoDialog } from '../../storybook/styles';
 import { ChangeDetectionStrategy, Component, signal } from '@angular/core';
 import { LucideX } from '@lucide/angular';
 import { dialogImports } from '@radix-ng/primitives/dialog';
-import { cn, demoButton, demoDialog } from '../../storybook/styles';
 
 @Component({
     changeDetection: ChangeDetectionStrategy.Eager,
@@ -11,19 +11,19 @@ import { cn, demoButton, demoDialog } from '../../storybook/styles';
         <div class="flex flex-col items-center gap-3">
             <p class="text-muted-foreground text-xs">open: {{ open() }} · triggerId: {{ triggerId() ?? '—' }}</p>
 
-            <div #root="rdxDialogRoot" [(open)]="open" [(triggerId)]="triggerId" rdxDialogRoot>
+            <div #root="rdxDialogRoot" rdxDialogRoot [(open)]="open" [(triggerId)]="triggerId">
                 <div class="flex gap-2">
-                    <button id="account" [class]="cn(b.base, b.outline, b.size.md)" rdxDialogTrigger>Account</button>
-                    <button id="billing" [class]="cn(b.base, b.outline, b.size.md)" rdxDialogTrigger>Billing</button>
+                    <button id="account" rdxDialogTrigger [class]="cn(b.base, b.outline, b.size.md)">Account</button>
+                    <button id="billing" rdxDialogTrigger [class]="cn(b.base, b.outline, b.size.md)">Billing</button>
                 </div>
 
                 <ng-template rdxDialogPortal>
-                    <div [class]="cn(d.backdrop, d.backdropAnimated)" rdxDialogBackdrop></div>
-                    <div [class]="cn(d.popup, d.popupAnimated)" rdxDialogPopup>
-                        <h2 [class]="d.title" rdxDialogTitle>
+                    <div rdxDialogBackdrop [class]="cn(d.backdrop, d.backdropAnimated)"></div>
+                    <div rdxDialogPopup [class]="cn(d.popup, d.popupAnimated)">
+                        <h2 rdxDialogTitle [class]="d.title">
                             {{ triggerId() === 'billing' ? 'Billing' : 'Account' }}
                         </h2>
-                        <p [class]="d.description" rdxDialogDescription>
+                        <p rdxDialogDescription [class]="d.description">
                             Both
                             <code>open</code>
                             and
@@ -31,9 +31,9 @@ import { cn, demoButton, demoDialog } from '../../storybook/styles';
                             are bound, so the active panel is driven from component state.
                         </p>
                         <div [class]="d.footer">
-                            <button [class]="cn(b.base, b.primary, b.size.sm)" rdxDialogClose>Close</button>
+                            <button rdxDialogClose [class]="cn(b.base, b.primary, b.size.sm)">Close</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" />
                         </button>
                     </div>
diff --git a/packages/primitives/dialog/stories/dialog-controlled.ts b/packages/primitives/dialog/stories/dialog-controlled.ts
index 08ffab7bf..a0421987e 100644
--- a/packages/primitives/dialog/stories/dialog-controlled.ts
+++ b/packages/primitives/dialog/stories/dialog-controlled.ts
@@ -1,7 +1,7 @@
+import { cn, demoButton, demoDialog } from '../../storybook/styles';
 import { ChangeDetectionStrategy, Component, signal } from '@angular/core';
 import { LucideX } from '@lucide/angular';
 import { dialogImports } from '@radix-ng/primitives/dialog';
-import { cn, demoButton, demoDialog } from '../../storybook/styles';
 
 @Component({
     changeDetection: ChangeDetectionStrategy.Eager,
@@ -15,15 +15,15 @@ import { cn, demoButton, demoDialog } from '../../storybook/styles';
                 <button [class]="cn(b.base, b.outline, b.size.sm)" (click)="open.set(true)">Open from outside</button>
             </div>
 
-            <div [(open)]="open" rdxDialogRoot>
-                <button [class]="cn(b.base, b.primary, b.size.md)" rdxDialogTrigger>Open dialog</button>
+            <div rdxDialogRoot [(open)]="open">
+                <button rdxDialogTrigger [class]="cn(b.base, b.primary, b.size.md)">Open dialog</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>Controlled dialog</h2>
-                        <p [class]="d.description" rdxDialogDescription>
+                    <div rdxDialogPopup [class]="cn(d.popup, d.popupAnimated)">
+                        <h2 rdxDialogTitle [class]="d.title">Controlled dialog</h2>
+                        <p rdxDialogDescription [class]="d.description">
                             The open state is owned by the component and bound with
                             <code>[(open)]</code>
                             .
@@ -35,7 +35,7 @@ import { cn, demoButton, demoDialog } from '../../storybook/styles';
                             </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" />
                         </button>
                     </div>
diff --git a/packages/primitives/dialog/stories/dialog-default.ts b/packages/primitives/dialog/stories/dialog-default.ts
index 96ec8314e..2d498a67d 100644
--- a/packages/primitives/dialog/stories/dialog-default.ts
+++ b/packages/primitives/dialog/stories/dialog-default.ts
@@ -1,7 +1,7 @@
+import { cn, demoButton, demoDialog, demoInput } from '../../storybook/styles';
 import { ChangeDetectionStrategy, Component } from '@angular/core';
 import { LucideX } from '@lucide/angular';
 import { dialogImports } from '@radix-ng/primitives/dialog';
-import { cn, demoButton, demoDialog, demoInput } from '../../storybook/styles';
 
 @Component({
     changeDetection: ChangeDetectionStrategy.Eager,
@@ -9,32 +9,32 @@ import { cn, demoButton, demoDialog, demoInput } from '../../storybook/styles';
     imports: [...dialogImports, LucideX],
     template: `
         <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" />
                     </button>
                 </div>
diff --git a/packages/primitives/dialog/stories/dialog-detached.ts b/packages/primitives/dialog/stories/dialog-detached.ts
index b6621c78b..63d3ce3b7 100644
--- a/packages/primitives/dialog/stories/dialog-detached.ts
+++ b/packages/primitives/dialog/stories/dialog-detached.ts
@@ -1,7 +1,7 @@
+import { cn, demoButton, demoDialog } from '../../storybook/styles';
 import { ChangeDetectionStrategy, Component } from '@angular/core';
 import { LucideX } from '@lucide/angular';
 import { createRdxDialogHandle, dialogImports } from '@radix-ng/primitives/dialog';
-import { cn, demoButton, demoDialog } from '../../storybook/styles';
 
 @Component({
     changeDetection: ChangeDetectionStrategy.Eager,
@@ -11,10 +11,10 @@ import { cn, demoButton, demoDialog } from '../../storybook/styles';
         <div class="flex flex-col items-center gap-3">
             <!-- Triggers live outside the root and are linked through a shared handle. -->
             <div class="flex gap-2">
-                <button id="settings" [class]="cn(b.base, b.outline, b.size.md)" [handle]="handle" rdxDialogTrigger>
+                <button id="settings" rdxDialogTrigger [class]="cn(b.base, b.outline, b.size.md)" [handle]="handle">
                     Settings
                 </button>
-                <button id="profile" [class]="cn(b.base, b.outline, b.size.md)" [handle]="handle" rdxDialogTrigger>
+                <button id="profile" rdxDialogTrigger [class]="cn(b.base, b.outline, b.size.md)" [handle]="handle">
                     Profile
                 </button>
             </div>
@@ -23,20 +23,20 @@ import { cn, demoButton, demoDialog } from '../../storybook/styles';
                 Open profile imperatively
             </button>
 
-            <div [handle]="handle" rdxDialogRoot>
+            <div rdxDialogRoot [handle]="handle">
                 <ng-template rdxDialogPortal>
-                    <div [class]="cn(d.backdrop, d.backdropAnimated)" rdxDialogBackdrop></div>
-                    <div [class]="cn(d.popup, d.popupAnimated)" rdxDialogPopup>
-                        <h2 [class]="d.title" rdxDialogTitle>Detached triggers</h2>
-                        <p [class]="d.description" rdxDialogDescription>
+                    <div rdxDialogBackdrop [class]="cn(d.backdrop, d.backdropAnimated)"></div>
+                    <div rdxDialogPopup [class]="cn(d.popup, d.popupAnimated)">
+                        <h2 rdxDialogTitle [class]="d.title">Detached triggers</h2>
+                        <p rdxDialogDescription [class]="d.description">
                             The triggers and this dialog are connected with
                             <code>createRdxDialogHandle()</code>
                             rather than DOM nesting.
                         </p>
                         <div [class]="d.footer">
-                            <button [class]="cn(b.base, b.primary, b.size.sm)" rdxDialogClose>Close</button>
+                            <button rdxDialogClose [class]="cn(b.base, b.primary, b.size.sm)">Close</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" />
                         </button>
                     </div>
diff --git a/packages/primitives/dialog/stories/dialog-from-menu.ts b/packages/primitives/dialog/stories/dialog-from-menu.ts
index 0b3f4d147..cadf738ec 100644
--- a/packages/primitives/dialog/stories/dialog-from-menu.ts
+++ b/packages/primitives/dialog/stories/dialog-from-menu.ts
@@ -1,8 +1,8 @@
+import { cn, demoButton, demoDialog, demoMenu } from '../../storybook/styles';
 import { ChangeDetectionStrategy, Component, signal } from '@angular/core';
 import { LucideX } from '@lucide/angular';
 import { dialogImports } from '@radix-ng/primitives/dialog';
 import { RdxMenuModule } from '@radix-ng/primitives/menu';
-import { cn, demoButton, demoDialog, demoMenu } from '../../storybook/styles';
 
 @Component({
     changeDetection: ChangeDetectionStrategy.Eager,
@@ -10,34 +10,34 @@ import { cn, demoButton, demoDialog, demoMenu } from '../../storybook/styles';
     imports: [...dialogImports, RdxMenuModule, LucideX],
     template: `
         <ng-container #menu="rdxMenuRoot" rdxMenuRoot>
-            <button [class]="cn(b.base, b.outline, b.size.md)" rdxMenuTrigger>Actions</button>
+            <button rdxMenuTrigger [class]="cn(b.base, b.outline, b.size.md)">Actions</button>
 
             @if (menu.open()) {
-                <div [class]="m.positioner" sideOffset="4" rdxMenuPositioner>
-                    <div [class]="m.popup" rdxMenuPopup>
-                        <button [class]="m.item" rdxMenuItem>Duplicate</button>
-                        <button [class]="m.item" (click)="renameOpen.set(true)" rdxMenuItem>Rename…</button>
-                        <div [class]="m.separator" rdxMenuSeparator></div>
-                        <button [class]="m.item" rdxMenuItem>Archive</button>
+                <div sideOffset="4" rdxMenuPositioner [class]="m.positioner">
+                    <div rdxMenuPopup [class]="m.popup">
+                        <button rdxMenuItem [class]="m.item">Duplicate</button>
+                        <button rdxMenuItem [class]="m.item" (click)="renameOpen.set(true)">Rename…</button>
+                        <div rdxMenuSeparator [class]="m.separator"></div>
+                        <button rdxMenuItem [class]="m.item">Archive</button>
                     </div>
                 </div>
             }
         </ng-container>
 
         <!-- Controlled dialog opened from the menu item. -->
-        <div [(open)]="renameOpen" rdxDialogRoot>
+        <div rdxDialogRoot [(open)]="renameOpen">
             <ng-template rdxDialogPortal>
-                <div [class]="cn(d.backdrop, d.backdropAnimated)" rdxDialogBackdrop></div>
-                <div [class]="cn(d.popup, d.popupAnimated)" rdxDialogPopup>
-                    <h2 [class]="d.title" rdxDialogTitle>Rename item</h2>
-                    <p [class]="d.description" rdxDialogDescription>
+                <div rdxDialogBackdrop [class]="cn(d.backdrop, d.backdropAnimated)"></div>
+                <div rdxDialogPopup [class]="cn(d.popup, d.popupAnimated)">
+                    <h2 rdxDialogTitle [class]="d.title">Rename item</h2>
+                    <p rdxDialogDescription [class]="d.description">
                         Opened by controlling the dialog from a menu item.
                     </p>
                     <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>Rename</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)">Rename</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" />
                     </button>
                 </div>
diff --git a/packages/primitives/dialog/stories/dialog-inside-scroll.ts b/packages/primitives/dialog/stories/dialog-inside-scroll.ts
index 2e8e84f07..455564b18 100644
--- a/packages/primitives/dialog/stories/dialog-inside-scroll.ts
+++ b/packages/primitives/dialog/stories/dialog-inside-scroll.ts
@@ -1,7 +1,7 @@
+import { cn, demoButton, demoDialog } from '../../storybook/styles';
 import { ChangeDetectionStrategy, Component } from '@angular/core';
 import { LucideX } from '@lucide/angular';
 import { dialogImports } from '@radix-ng/primitives/dialog';
-import { cn, demoButton, demoDialog } from '../../storybook/styles';
 
 @Component({
     changeDetection: ChangeDetectionStrategy.Eager,
@@ -9,15 +9,15 @@ import { cn, demoButton, demoDialog } from '../../storybook/styles';
     imports: [...dialogImports, LucideX],
     template: `
         <div rdxDialogRoot>
-            <button [class]="cn(b.base, b.primary, b.size.md)" rdxDialogTrigger>Open dialog</button>
+            <button rdxDialogTrigger [class]="cn(b.base, b.primary, b.size.md)">Open dialog</button>
 
             <ng-template rdxDialogPortal>
-                <div [class]="cn(d.backdrop, d.backdropAnimated)" rdxDialogBackdrop></div>
+                <div rdxDialogBackdrop [class]="cn(d.backdrop, d.backdropAnimated)"></div>
 
                 <!-- The popup stays fixed on screen; only its body scrolls. -->
-                <div [class]="cn(d.popup, d.popupAnimated, 'flex max-h-[85vh] flex-col')" rdxDialogPopup>
-                    <h2 [class]="d.title" rdxDialogTitle>Release notes</h2>
-                    <p [class]="d.description" rdxDialogDescription>
+                <div rdxDialogPopup [class]="cn(d.popup, d.popupAnimated, 'flex max-h-[85vh] flex-col')">
+                    <h2 rdxDialogTitle [class]="d.title">Release notes</h2>
+                    <p rdxDialogDescription [class]="d.description">
                         Header and footer stay put while the body scrolls.
                     </p>
 
@@ -28,10 +28,10 @@ import { cn, demoButton, demoDialog } from '../../storybook/styles';
                     </div>
 
                     <div [class]="d.footer">
-                        <button [class]="cn(b.base, b.primary, b.size.sm)" rdxDialogClose>Got it</button>
+                        <button rdxDialogClose [class]="cn(b.base, b.primary, b.size.sm)">Got it</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" />
                     </button>
                 </div>
diff --git a/packages/primitives/dialog/stories/dialog-multiple-triggers.ts b/packages/primitives/dialog/stories/dialog-multiple-triggers.ts
index 884c25843..ec0b83556 100644
--- a/packages/primitives/dialog/stories/dialog-multiple-triggers.ts
+++ b/packages/primitives/dialog/stories/dialog-multiple-triggers.ts
@@ -1,7 +1,7 @@
+import { cn, demoButton, demoDialog } from '../../storybook/styles';
 import { ChangeDetectionStrategy, Component } from '@angular/core';
 import { LucideX } from '@lucide/angular';
 import { dialogImports } from '@radix-ng/primitives/dialog';
-import { cn, demoButton, demoDialog } from '../../storybook/styles';
 
 @Component({
     changeDetection: ChangeDetectionStrategy.Eager,
@@ -10,24 +10,24 @@ import { cn, demoButton, demoDialog } from '../../storybook/styles';
     template: `
         <div #root="rdxDialogRoot" rdxDialogRoot>
             <div class="flex gap-2">
-                <button [class]="cn(b.base, b.outline, b.size.md)" payload="Lemon" rdxDialogTrigger>Lemon</button>
-                <button [class]="cn(b.base, b.outline, b.size.md)" payload="Lime" rdxDialogTrigger>Lime</button>
-                <button [class]="cn(b.base, b.outline, b.size.md)" payload="Orange" rdxDialogTrigger>Orange</button>
+                <button payload="Lemon" rdxDialogTrigger [class]="cn(b.base, b.outline, b.size.md)">Lemon</button>
+                <button payload="Lime" rdxDialogTrigger [class]="cn(b.base, b.outline, b.size.md)">Lime</button>
+                <button payload="Orange" rdxDialogTrigger [class]="cn(b.base, b.outline, b.size.md)">Orange</button>
             </div>
 
             <ng-template rdxDialogPortal>
-                <div [class]="cn(d.backdrop, d.backdropAnimated)" rdxDialogBackdrop></div>
-                <div [class]="cn(d.popup, d.popupAnimated)" rdxDialogPopup>
-                    <h2 [class]="d.title" rdxDialogTitle>{{ root.payload() || 'Fruit' }}</h2>
-                    <p [class]="d.description" rdxDialogDescription>
+                <div rdxDialogBackdrop [class]="cn(d.backdrop, d.backdropAnimated)"></div>
+                <div rdxDialogPopup [class]="cn(d.popup, d.popupAnimated)">
+                    <h2 rdxDialogTitle [class]="d.title">{{ root.payload() || 'Fruit' }}</h2>
+                    <p rdxDialogDescription [class]="d.description">
                         Every trigger opens the same dialog; the active trigger's
                         <code>payload</code>
                         is shown here.
                     </p>
                     <div [class]="d.footer">
-                        <button [class]="cn(b.base, b.primary, b.size.sm)" rdxDialogClose>Close</button>
+                        <button rdxDialogClose [class]="cn(b.base, b.primary, b.size.sm)">Close</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" />
                     </button>
                 </div>
diff --git a/packages/primitives/dialog/stories/dialog-nested.ts b/packages/primitives/dialog/stories/dialog-nested.ts
index 19898a7c6..ee64b939f 100644
--- a/packages/primitives/dialog/stories/dialog-nested.ts
+++ b/packages/primitives/dialog/stories/dialog-nested.ts
@@ -1,7 +1,7 @@
+import { cn, demoButton, demoDialog } from '../../storybook/styles';
 import { ChangeDetectionStrategy, Component } from '@angular/core';
 import { LucideX } from '@lucide/angular';
 import { dialogImports } from '@radix-ng/primitives/dialog';
-import { cn, demoButton, demoDialog } from '../../storybook/styles';
 
 @Component({
     changeDetection: ChangeDetectionStrategy.Eager,
@@ -9,36 +9,36 @@ import { cn, demoButton, demoDialog } from '../../storybook/styles';
     imports: [...dialogImports, LucideX],
     template: `
         <div rdxDialogRoot>
-            <button [class]="cn(b.base, b.primary, b.size.md)" rdxDialogTrigger>Open dialog</button>
+            <button rdxDialogTrigger [class]="cn(b.base, b.primary, b.size.md)">Open dialog</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>Parent dialog</h2>
-                    <p [class]="d.description" rdxDialogDescription>
+                <div rdxDialogPopup [class]="cn(d.popup, d.popupAnimated)">
+                    <h2 rdxDialogTitle [class]="d.title">Parent dialog</h2>
+                    <p rdxDialogDescription [class]="d.description">
                         Opening the nested dialog scales this popup back via
                         <code>[data-nested-dialog-open]</code>
                         .
                     </p>
 
                     <div [class]="d.footer">
-                        <button [class]="cn(b.base, b.outline, b.size.sm)" rdxDialogClose>Close</button>
+                        <button rdxDialogClose [class]="cn(b.base, b.outline, b.size.sm)">Close</button>
 
                         <div rdxDialogRoot>
-                            <button [class]="cn(b.base, b.primary, b.size.sm)" rdxDialogTrigger>Open nested</button>
+                            <button rdxDialogTrigger [class]="cn(b.base, b.primary, b.size.sm)">Open nested</button>
 
                             <ng-template rdxDialogPortal>
-                                <div [class]="cn(d.backdrop, d.backdropAnimated)" rdxDialogBackdrop></div>
-                                <div [class]="cn(d.popup, d.popupAnimated)" rdxDialogPopup>
-                                    <h2 [class]="d.title" rdxDialogTitle>Nested dialog</h2>
-                                    <p [class]="d.description" rdxDialogDescription>
+                                <div rdxDialogBackdrop [class]="cn(d.backdrop, d.backdropAnimated)"></div>
+                                <div rdxDialogPopup [class]="cn(d.popup, d.popupAnimated)">
+                                    <h2 rdxDialogTitle [class]="d.title">Nested dialog</h2>
+                                    <p rdxDialogDescription [class]="d.description">
                                         Escape or the backdrop closes this one first, then the parent.
                                     </p>
                                     <div [class]="d.footer">
-                                        <button [class]="cn(b.base, b.primary, b.size.sm)" rdxDialogClose>Done</button>
+                                        <button rdxDialogClose [class]="cn(b.base, b.primary, b.size.sm)">Done</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" />
                                     </button>
                                 </div>
@@ -46,7 +46,7 @@ import { cn, demoButton, demoDialog } from '../../storybook/styles';
                         </div>
                     </div>
 
-                    <button [class]="d.close" aria-label="Close" rdxDialogClose>
+                    <button aria-label="Close" rdxDialogClose [class]="d.close">
                         <svg aria-hidden="true" lucideX size="16" />
                     </button>
                 </div>
diff --git a/packages/primitives/dialog/stories/dialog-non-modal.ts b/packages/primitives/dialog/stories/dialog-non-modal.ts
index 87652b10c..15fa1656f 100644
--- a/packages/primitives/dialog/stories/dialog-non-modal.ts
+++ b/packages/primitives/dialog/stories/dialog-non-modal.ts
@@ -1,7 +1,7 @@
+import { cn, demoButton, demoDialog } from '../../storybook/styles';
 import { ChangeDetectionStrategy, Component, signal } from '@angular/core';
 import { LucideX } from '@lucide/angular';
 import { dialogImports } from '@radix-ng/primitives/dialog';
-import { cn, demoButton, demoDialog } from '../../storybook/styles';
 
 @Component({
     changeDetection: ChangeDetectionStrategy.Eager,
@@ -13,17 +13,17 @@ import { cn, demoButton, demoDialog } from '../../storybook/styles';
                 Non-modal: page scrolling and outside pointer interactions stay enabled while the dialog is open.
             </p>
 
-            <div [modal]="false" rdxDialogRoot>
-                <button [class]="cn(b.base, b.primary, b.size.md)" rdxDialogTrigger>Open non-modal dialog</button>
+            <div rdxDialogRoot [modal]="false">
+                <button rdxDialogTrigger [class]="cn(b.base, b.primary, b.size.md)">Open non-modal dialog</button>
 
                 <ng-template rdxDialogPortal>
-                    <div [class]="cn(d.popup, d.popupAnimated)" rdxDialogPopup>
-                        <h2 [class]="d.title" rdxDialogTitle>Non-modal dialog</h2>
-                        <p [class]="d.description" rdxDialogDescription>
+                    <div rdxDialogPopup [class]="cn(d.popup, d.popupAnimated)">
+                        <h2 rdxDialogTitle [class]="d.title">Non-modal dialog</h2>
+                        <p rdxDialogDescription [class]="d.description">
                             There is no backdrop, so you can keep interacting with the rest of the page.
                         </p>
 
-                        <button [class]="d.close" aria-label="Close" rdxDialogClose>
+                        <button aria-label="Close" rdxDialogClose [class]="d.close">
                             <svg aria-hidden="true" lucideX size="16" />
                         </button>
                     </div>
diff --git a/packages/primitives/dialog/stories/dialog-outside-scroll.ts b/packages/primitives/dialog/stories/dialog-outside-scroll.ts
index 23e5076aa..b4e437a72 100644
--- a/packages/primitives/dialog/stories/dialog-outside-scroll.ts
+++ b/packages/primitives/dialog/stories/dialog-outside-scroll.ts
@@ -1,3 +1,4 @@
+import { cn, demoButton, demoCard, demoDialog } from '../../storybook/styles';
 import { ChangeDetectionStrategy, Component } from '@angular/core';
 import { LucideX } from '@lucide/angular';
 import { dialogImports } from '@radix-ng/primitives/dialog';
@@ -8,7 +9,6 @@ import {
     RdxScrollAreaThumb,
     RdxScrollAreaViewport
 } from '@radix-ng/primitives/scroll-area';
-import { cn, demoButton, demoCard, demoDialog } from '../../storybook/styles';
 
 /**
  * Outside-scroll dialog — a 1-1 port of the Base UI example.
@@ -33,10 +33,10 @@ import { cn, demoButton, demoCard, demoDialog } from '../../storybook/styles';
     ],
     template: `
         <div rdxDialogRoot>
-            <button [class]="cn(b.base, b.primary, b.size.md)" rdxDialogTrigger>Open dialog</button>
+            <button rdxDialogTrigger [class]="cn(b.base, b.primary, b.size.md)">Open dialog</button>
 
             <ng-template rdxDialogPortal>
-                <div [class]="cn(d.backdrop, d.backdropAnimated)" rdxDialogBackdrop></div>
+                <div rdxDialogBackdrop [class]="cn(d.backdrop, d.backdropAnimated)"></div>
 
                 <!-- Full-screen viewport hosting a custom scroll area (not native overflow). -->
                 <div class="group/dialog fixed inset-0 z-50" rdxDialogViewport>
@@ -52,6 +52,7 @@ import { cn, demoButton, demoCard, demoDialog } from '../../storybook/styles';
                         <div class="h-full overscroll-contain" rdxScrollAreaViewport>
                             <div class="flex min-h-full items-center justify-center" rdxScrollAreaContent>
                                 <div
+                                    rdxDialogPopup
                                     [class]="
                                         cn(
                                             card,
@@ -59,15 +60,14 @@ import { cn, demoButton, demoCard, demoDialog } from '../../storybook/styles';
                                             d.popupAnimated
                                         )
                                     "
-                                    rdxDialogPopup
                                 >
                                     <div class="relative flex flex-col gap-1 pr-8">
-                                        <h2 [class]="d.title" rdxDialogTitle>Dialog</h2>
-                                        <p [class]="d.description" rdxDialogDescription>
+                                        <h2 rdxDialogTitle [class]="d.title">Dialog</h2>
+                                        <p rdxDialogDescription [class]="d.description">
                                             This layout keeps an outer container scrollable while the dialog can extend
                                             past the bottom edge.
                                         </p>
-                                        <button [class]="d.close" aria-label="Close" rdxDialogClose>
+                                        <button aria-label="Close" rdxDialogClose [class]="d.close">
                                             <svg aria-hidden="true" lucideX size="16" />
                                         </button>
                                     </div>
diff --git a/packages/primitives/dialog/stories/dialog-trap-focus.ts b/packages/primitives/dialog/stories/dialog-trap-focus.ts
index 2885a6eb9..65169d369 100644
--- a/packages/primitives/dialog/stories/dialog-trap-focus.ts
+++ b/packages/primitives/dialog/stories/dialog-trap-focus.ts
@@ -1,7 +1,7 @@
+import { cn, demoButton, demoDialog, demoInput } from '../../storybook/styles';
 import { ChangeDetectionStrategy, Component, signal } from '@angular/core';
 import { LucideX } from '@lucide/angular';
 import { dialogImports } from '@radix-ng/primitives/dialog';
-import { cn, demoButton, demoDialog, demoInput } from '../../storybook/styles';
 
 @Component({
     changeDetection: ChangeDetectionStrategy.Eager,
@@ -15,29 +15,29 @@ import { cn, demoButton, demoDialog, demoInput } from '../../storybook/styles';
             </p>
 
             <div modal="trap-focus" rdxDialogRoot>
-                <button [class]="cn(b.base, b.primary, b.size.md)" rdxDialogTrigger>Open dialog</button>
+                <button rdxDialogTrigger [class]="cn(b.base, b.primary, b.size.md)">Open dialog</button>
 
                 <ng-template rdxDialogPortal>
-                    <div [class]="cn(d.popup, d.popupAnimated)" rdxDialogPopup>
-                        <h2 [class]="d.title" rdxDialogTitle>Focus is trapped</h2>
-                        <p [class]="d.description" rdxDialogDescription>
+                    <div rdxDialogPopup [class]="cn(d.popup, d.popupAnimated)">
+                        <h2 rdxDialogTitle [class]="d.title">Focus is trapped</h2>
+                        <p rdxDialogDescription [class]="d.description">
                             Press Tab and notice focus never leaves the dialog.
                         </p>
 
                         <label [class]="d.field">
                             First field
-                            <input [class]="input" placeholder="Focused when opened" />
+                            <input placeholder="Focused when opened" [class]="input" />
                         </label>
                         <label [class]="d.field">
                             Second field
-                            <input [class]="input" placeholder="Tab to reach me" />
+                            <input placeholder="Tab to reach me" [class]="input" />
                         </label>
 
                         <div [class]="d.footer">
-                            <button [class]="cn(b.base, b.primary, b.size.sm)" rdxDialogClose>Done</button>
+                            <button rdxDialogClose [class]="cn(b.base, b.primary, b.size.sm)">Done</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" />
                         </button>
                     </div>
diff --git a/packages/primitives/dialog/stories/dialog-uncontained.ts b/packages/primitives/dialog/stories/dialog-uncontained.ts
index 4007dcfd8..3b80c8e14 100644
--- a/packages/primitives/dialog/stories/dialog-uncontained.ts
+++ b/packages/primitives/dialog/stories/dialog-uncontained.ts
@@ -1,7 +1,7 @@
+import { cn, demoButton, demoDialog } from '../../storybook/styles';
 import { ChangeDetectionStrategy, Component } from '@angular/core';
 import { LucideX } from '@lucide/angular';
 import { dialogImports } from '@radix-ng/primitives/dialog';
-import { cn, demoButton, demoDialog } from '../../storybook/styles';
 
 /**
  * Placing elements outside the popup — a 1-1 port of the Base UI "uncontained" dialog.
@@ -18,10 +18,10 @@ import { cn, demoButton, demoDialog } from '../../storybook/styles';
     imports: [...dialogImports, LucideX],
     template: `
         <div rdxDialogRoot>
-            <button [class]="cn(b.base, b.primary, b.size.md)" rdxDialogTrigger>Open dialog</button>
+            <button rdxDialogTrigger [class]="cn(b.base, b.primary, b.size.md)">Open dialog</button>
 
             <ng-template rdxDialogPortal>
-                <div [class]="cn(d.backdrop, d.backdropAnimated)" rdxDialogBackdrop></div>
+                <div rdxDialogBackdrop [class]="cn(d.backdrop, d.backdropAnimated)"></div>
 
                 <div class="fixed inset-0 z-50 grid place-items-center px-4 py-12 xl:py-6" rdxDialogViewport>
                     <!-- Transparent frame: pointer-events-none so the gaps around the card stay dismissable. -->
@@ -41,8 +41,8 @@ import { cn, demoButton, demoDialog } from '../../storybook/styles';
                         <div
                             class="border-border bg-card text-card-foreground pointer-events-auto h-full w-full max-w-[70rem] rounded-md border p-6 shadow-sm transition-[scale] duration-500 ease-[cubic-bezier(0.22,1,0.36,1)] group-data-[starting-style]/popup:scale-105"
                         >
-                            <h2 [class]="d.title" rdxDialogTitle>Uncontained dialog</h2>
-                            <p [class]="d.description" rdxDialogDescription>
+                            <h2 rdxDialogTitle [class]="d.title">Uncontained dialog</h2>
+                            <p rdxDialogDescription [class]="d.description">
                                 The close button lives in the popup but is rendered outside this card, above its
                                 top-right corner.
                             </p>
diff --git a/packages/primitives/dialog/stories/dialog-without-dismiss.ts b/packages/primitives/dialog/stories/dialog-without-dismiss.ts
index 6c08d441a..d58b278a4 100644
--- a/packages/primitives/dialog/stories/dialog-without-dismiss.ts
+++ b/packages/primitives/dialog/stories/dialog-without-dismiss.ts
@@ -1,31 +1,31 @@
+import { cn, demoButton, demoDialog } from '../../storybook/styles';
 import { ChangeDetectionStrategy, Component } from '@angular/core';
 import { LucideX } from '@lucide/angular';
 import { dialogImports } from '@radix-ng/primitives/dialog';
-import { cn, demoButton, demoDialog } from '../../storybook/styles';
 
 @Component({
     changeDetection: ChangeDetectionStrategy.Eager,
     selector: 'rdx-dialog-without-dismiss',
     imports: [...dialogImports, LucideX],
     template: `
-        <div [disablePointerDismissal]="true" rdxDialogRoot>
-            <button [class]="cn(b.base, b.primary, b.size.md)" rdxDialogTrigger>Open dialog</button>
+        <div rdxDialogRoot [disablePointerDismissal]="true">
+            <button rdxDialogTrigger [class]="cn(b.base, b.primary, b.size.md)">Open dialog</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>Confirm your choice</h2>
-                    <p [class]="d.description" rdxDialogDescription>
+                <div rdxDialogPopup [class]="cn(d.popup, d.popupAnimated)">
+                    <h2 rdxDialogTitle [class]="d.title">Confirm your choice</h2>
+                    <p rdxDialogDescription [class]="d.description">
                         Clicking the backdrop will not close this dialog. Use a button or press Escape instead.
                     </p>
 
                     <div [class]="d.footer">
-                        <button [class]="cn(b.base, b.outline, b.size.sm)" rdxDialogClose>Cancel</button>
-                        <button [class]="cn(b.base, b.destructive, b.size.sm)" rdxDialogClose>Delete</button>
+                        <button rdxDialogClose [class]="cn(b.base, b.outline, b.size.sm)">Cancel</button>
+                        <button rdxDialogClose [class]="cn(b.base, b.destructive, b.size.sm)">Delete</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" />
                     </button>
                 </div>
diff --git a/packages/primitives/dialog/stories/dialog.stories.ts b/packages/primitives/dialog/stories/dialog.stories.ts
index 179a0fa67..b13f570b8 100644
--- a/packages/primitives/dialog/stories/dialog.stories.ts
+++ b/packages/primitives/dialog/stories/dialog.stories.ts
@@ -1,11 +1,10 @@
-import { Meta, moduleMetadata, StoryObj } from '@storybook/angular';
 import { tailwindDemoDecorator } from '../../storybook/tailwind-demo';
 import { RdxDialogCloseConfirmationComponent } from './dialog-close-confirmation';
 import closeConfirmationSource from './dialog-close-confirmation?raw';
 import { RdxDialogControlledComponent } from './dialog-controlled';
+import controlledSource from './dialog-controlled?raw';
 import { RdxDialogControlledMultipleComponent } from './dialog-controlled-multiple';
 import controlledMultipleSource from './dialog-controlled-multiple?raw';
-import controlledSource from './dialog-controlled?raw';
 import { RdxDialogDefaultComponent } from './dialog-default';
 import defaultSource from './dialog-default?raw';
 import { RdxDialogDetachedComponent } from './dialog-detached';
@@ -28,6 +27,7 @@ import { RdxDialogUncontainedComponent } from './dialog-uncontained';
 import uncontainedSource from './dialog-uncontained?raw';
 import { RdxDialogWithoutDismissComponent } from './dialog-without-dismiss';
 import withoutDismissSource from './dialog-without-dismiss?raw';
+import { Meta, moduleMetadata, StoryObj } from '@storybook/angular';
 
 const html = String.raw;
 
diff --git a/packages/primitives/direction-provider/__tests__/direction-provider.spec.ts b/packages/primitives/direction-provider/__tests__/direction-provider.spec.ts
index 375707e2a..8e801425e 100644
--- a/packages/primitives/direction-provider/__tests__/direction-provider.spec.ts
+++ b/packages/primitives/direction-provider/__tests__/direction-provider.spec.ts
@@ -1,10 +1,10 @@
+import { provideRadixNG } from '../../config/src/config.provider';
+import { injectDirection, provideDirection, RdxDirectionProvider } from '../src/direction-provider';
 import { ChangeDetectionStrategy, Component, Directive, signal } from '@angular/core';
 import { TestBed } from '@angular/core/testing';
 import { By } from '@angular/platform-browser';
 import { Direction } from '@radix-ng/primitives/core';
 import { afterEach, describe, expect, it } from 'vitest';
-import { provideRadixNG } from '../../config/src/config.provider';
-import { injectDirection, provideDirection, RdxDirectionProvider } from '../src/direction-provider';
 
 @Directive({
     selector: '[directionProbe]',
@@ -29,7 +29,7 @@ class ProbeHost {}
     standalone: true,
     imports: [DirectionProbe, RdxDirectionProvider],
     template: `
-        <section [direction]="direction()" rdxDirectionProvider>
+        <section rdxDirectionProvider [direction]="direction()">
             <span directionProbe></span>
         </section>
     `
diff --git a/packages/primitives/direction-provider/stories/direction-provider-slider.ts b/packages/primitives/direction-provider/stories/direction-provider-slider.ts
index 921513146..6a3970af6 100644
--- a/packages/primitives/direction-provider/stories/direction-provider-slider.ts
+++ b/packages/primitives/direction-provider/stories/direction-provider-slider.ts
@@ -27,9 +27,9 @@ import {
             @for (item of directions; track item.direction) {
                 <section
                     class="border-border bg-card text-card-foreground grid gap-4 rounded-md border p-4 shadow-sm"
+                    rdxDirectionProvider
                     [attr.dir]="item.direction"
                     [direction]="item.direction"
-                    rdxDirectionProvider
                 >
                     <div class="flex items-center justify-between gap-3">
                         <span class="text-sm font-medium">{{ item.label }}</span>
@@ -38,11 +38,11 @@ import {
 
                     <div
                         class="relative w-full select-none"
-                        [(value)]="item.value"
+                        rdxSliderRoot
                         [min]="0"
                         [max]="100"
                         [step]="5"
-                        rdxSliderRoot
+                        [(value)]="item.value"
                     >
                         <div class="flex h-5 w-full touch-none items-center" rdxSliderControl>
                             <div class="bg-muted relative h-1 w-full rounded-full" rdxSliderTrack>
@@ -51,7 +51,7 @@ import {
                                     class="border-border bg-background focus-within:ring-ring block size-5 rounded-full border shadow-sm focus-within:ring-2"
                                     rdxSliderThumb
                                 >
-                                    <input [attr.aria-label]="item.label" rdxSliderThumbInput />
+                                    <input rdxSliderThumbInput [attr.aria-label]="item.label" />
                                 </div>
                             </div>
                         </div>
diff --git a/packages/primitives/direction-provider/stories/direction-provider.stories.ts b/packages/primitives/direction-provider/stories/direction-provider.stories.ts
index f51c9ae56..3cb40a779 100644
--- a/packages/primitives/direction-provider/stories/direction-provider.stories.ts
+++ b/packages/primitives/direction-provider/stories/direction-provider.stories.ts
@@ -1,7 +1,7 @@
-import { Meta, moduleMetadata, StoryObj } from '@storybook/angular';
 import { tailwindDemoDecorator } from '../../storybook/tailwind-demo';
 import { DirectionProviderSliderExample } from './direction-provider-slider';
 import sliderSource from './direction-provider-slider?raw';
+import { Meta, moduleMetadata, StoryObj } from '@storybook/angular';
 
 const html = String.raw;
 const source = (code: string) => ({ docs: { source: { code, language: 'typescript' } } });
diff --git a/packages/primitives/dismissable-layer/__tests__/dismiss.spec.ts b/packages/primitives/dismissable-layer/__tests__/dismiss.spec.ts
index ad5af3a3e..ad4a933d3 100644
--- a/packages/primitives/dismissable-layer/__tests__/dismiss.spec.ts
+++ b/packages/primitives/dismissable-layer/__tests__/dismiss.spec.ts
@@ -1,4 +1,5 @@
 // @vitest-environment jsdom
+import { RdxDismiss, RdxDismissProps, RdxDismissReason } from '../src/dismiss';
 import {
     createEnvironmentInjector,
     EnvironmentInjector,
@@ -15,7 +16,6 @@ import {
 } from '@radix-ng/primitives/core';
 import { RDX_FLOATING_MARKER } from '@radix-ng/primitives/floating-focus-manager';
 import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
-import { RdxDismiss, RdxDismissProps, RdxDismissReason } from '../src/dismiss';
 
 /** Drain microtasks (focus-out defers two) and the deferred `pointerdown` attach (a `setTimeout(0)`). */
 const flush = (): Promise<void> => new Promise((resolve) => setTimeout(resolve, 0));
diff --git a/packages/primitives/dismissable-layer/__tests__/focus-outside.spec.ts b/packages/primitives/dismissable-layer/__tests__/focus-outside.spec.ts
index 5a816fb88..e48da66e2 100644
--- a/packages/primitives/dismissable-layer/__tests__/focus-outside.spec.ts
+++ b/packages/primitives/dismissable-layer/__tests__/focus-outside.spec.ts
@@ -1,8 +1,8 @@
+import { RdxFocusOutside } from '../src/utils';
 import { ChangeDetectionStrategy, Component } from '@angular/core';
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { By } from '@angular/platform-browser';
 import { vi } from 'vitest';
-import { RdxFocusOutside } from '../src/utils';
 
 @Component({
     changeDetection: ChangeDetectionStrategy.Eager,
@@ -10,7 +10,7 @@ import { RdxFocusOutside } from '../src/utils';
     template: `
         <div>
             <button id="outside">Outside Button</button>
-            <div [enabled]="enabled" (focusOutside)="onFocusOutside($event)" rdxFocusOutside>
+            <div rdxFocusOutside [enabled]="enabled" (focusOutside)="onFocusOutside($event)">
                 <button id="inside">Inside Button</button>
             </div>
         </div>
diff --git a/packages/primitives/dismissable-layer/stories/dismissable-layer.stories.ts b/packages/primitives/dismissable-layer/stories/dismissable-layer.stories.ts
index 54325991b..bce0e8cc2 100644
--- a/packages/primitives/dismissable-layer/stories/dismissable-layer.stories.ts
+++ b/packages/primitives/dismissable-layer/stories/dismissable-layer.stories.ts
@@ -1,7 +1,7 @@
-import { moduleMetadata, type Meta, type StoryObj } from '@storybook/angular';
 import { tailwindDemoDecorator } from '../../storybook/tailwind-demo';
 import { RdxDismissableLayerDemo } from './dismissable-layer';
 import source from './dismissable-layer?raw';
+import { type Meta, moduleMetadata, type StoryObj } from '@storybook/angular';
 
 const html = String.raw;
 
diff --git a/packages/primitives/dismissable-layer/stories/dismissable-layer.ts b/packages/primitives/dismissable-layer/stories/dismissable-layer.ts
index 947875905..33c84ba66 100644
--- a/packages/primitives/dismissable-layer/stories/dismissable-layer.ts
+++ b/packages/primitives/dismissable-layer/stories/dismissable-layer.ts
@@ -26,22 +26,22 @@ interface LogEntry {
             <div class="border-border bg-background rounded-lg border p-3 shadow-sm">
                 <div class="mb-3 flex flex-wrap items-center gap-2">
                     <button
-                        class="bg-primary text-primary-foreground hover:bg-primary/90 focus-visible:ring-ring inline-flex h-8 items-center justify-center rounded-md px-3 text-sm font-medium shadow-sm transition-colors focus-visible:ring-2 focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50"
                         #trigger
+                        class="bg-primary text-primary-foreground hover:bg-primary/90 focus-visible:ring-ring inline-flex h-8 items-center justify-center rounded-md px-3 text-sm font-medium shadow-sm transition-colors focus-visible:ring-2 focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50"
+                        type="button"
                         [attr.aria-expanded]="open()"
                         (click)="toggleLayer()"
-                        type="button"
                     >
                         {{ open() ? 'Close layer' : 'Open layer' }}
                     </button>
 
                     <button
                         class="border-border bg-background text-foreground hover:bg-muted focus-visible:ring-ring inline-flex h-8 items-center justify-center rounded-md border px-3 text-sm font-medium shadow-sm transition-colors focus-visible:ring-2 focus-visible:outline-none"
+                        type="button"
                         (click)="
                             preventNextOutside.set(true);
                             record('veto armed', 'the next outside press will call preventDefault()')
                         "
-                        type="button"
                     >
                         Veto next
                     </button>
@@ -51,9 +51,9 @@ interface LogEntry {
                     >
                         <input
                             class="border-border text-primary focus:ring-ring h-4 w-4 rounded"
+                            type="checkbox"
                             [checked]="outsideMode() === 'intentional'"
                             (change)="toggleOutsideMode()"
-                            type="checkbox"
                         />
                         Intentional outside press
                     </label>
@@ -90,8 +90,8 @@ interface LogEntry {
                     <div class="bg-background relative flex min-h-52 items-center justify-center rounded-md p-3">
                         @if (open()) {
                             <article
-                                class="border-border bg-popover text-popover-foreground ring-border focus-visible:ring-ring w-full rounded-lg border p-3 shadow-lg ring-1 outline-none focus-visible:ring-2"
                                 #layer
+                                class="border-border bg-popover text-popover-foreground ring-border focus-visible:ring-ring w-full rounded-lg border p-3 shadow-lg ring-1 outline-none focus-visible:ring-2"
                                 tabindex="-1"
                             >
                                 <div class="mb-2 flex items-start justify-between gap-3">
@@ -114,8 +114,8 @@ interface LogEntry {
 
                                 <button
                                     class="border-border bg-background text-foreground hover:bg-muted focus-visible:ring-ring inline-flex h-8 items-center justify-center rounded-md border px-3 text-sm font-medium transition-colors focus-visible:ring-2 focus-visible:outline-none"
-                                    (click)="closeFromButton()"
                                     type="button"
+                                    (click)="closeFromButton()"
                                 >
                                     Close
                                 </button>
diff --git a/packages/primitives/drawer/__tests__/drawer.spec.ts b/packages/primitives/drawer/__tests__/drawer.spec.ts
index d8d120f84..3bafea81e 100644
--- a/packages/primitives/drawer/__tests__/drawer.spec.ts
+++ b/packages/primitives/drawer/__tests__/drawer.spec.ts
@@ -40,11 +40,11 @@ import { vi } from 'vitest';
     ],
     template: `
         <div
-            [(open)]="open"
+            rdxDrawerRoot
             [modal]="modal"
             [swipeDirection]="swipeDirection"
+            [(open)]="open"
             (onOpenChange)="changes.push($event.reason)"
-            rdxDrawerRoot
         >
             <button rdxDrawerTrigger>Open</button>
             <div rdxDrawerSwipeArea></div>
@@ -72,8 +72,8 @@ class TestHostComponent {
     changeDetection: ChangeDetectionStrategy.Eager,
     imports: [RdxDrawerTrigger, RdxDrawerRoot, RdxDrawerPortal, RdxDrawerPopup],
     template: `
-        <button id="detached" [handle]="handle" rdxDrawerTrigger>Open</button>
-        <div [handle]="handle" rdxDrawerRoot>
+        <button id="detached" rdxDrawerTrigger [handle]="handle">Open</button>
+        <div rdxDrawerRoot [handle]="handle">
             <ng-template rdxDrawerPortal>
                 <div rdxDrawerPopup>Popup</div>
             </ng-template>
@@ -89,12 +89,12 @@ class DetachedHostComponent {
     imports: [RdxDrawerRoot, RdxDrawerTrigger, RdxDrawerPortal, RdxDrawerPopup],
     template: `
         <div
-            [(open)]="open"
-            [(snapPoint)]="snapPoint"
+            rdxDrawerRoot
             [snapPoints]="snapPoints"
             [defaultSnapPoint]="defaultSnapPoint"
+            [(open)]="open"
+            [(snapPoint)]="snapPoint"
             (onSnapPointChange)="changed.push($event)"
-            rdxDrawerRoot
         >
             <button rdxDrawerTrigger>Open</button>
             <ng-template rdxDrawerPortal>
@@ -118,13 +118,13 @@ class SnapHostComponent {
         <div rdxDrawerProvider>
             <div id="indent" rdxDrawerIndentBackground></div>
 
-            <div [(open)]="outer" rdxDrawerRoot>
+            <div rdxDrawerRoot [(open)]="outer">
                 <ng-template rdxDrawerPortal>
                     <div data-testid="outer" rdxDrawerPopup>
-                        <div [(open)]="inner" rdxDrawerRoot>
+                        <div rdxDrawerRoot [(open)]="inner">
                             <ng-template rdxDrawerPortal>
                                 <div data-testid="inner" rdxDrawerPopup>
-                                    <div [(open)]="deep" rdxDrawerRoot>
+                                    <div rdxDrawerRoot [(open)]="deep">
                                         <ng-template rdxDrawerPortal>
                                             <div data-testid="deep" rdxDrawerPopup>Deep</div>
                                         </ng-template>
@@ -149,10 +149,10 @@ class NestedHostComponent {
     imports: [RdxDrawerRoot, RdxDrawerSwipeArea, RdxDrawerPortal, RdxDrawerBackdrop, RdxDrawerViewport, RdxDrawerPopup],
     template: `
         <div #portalContainer data-testid="portal-container">
-            <div [modal]="false" swipeDirection="right" rdxDrawerRoot>
+            <div swipeDirection="right" rdxDrawerRoot [modal]="false">
                 <div data-testid="swipe-area" rdxDrawerSwipeArea></div>
 
-                <ng-template [container]="portalContainer" rdxDrawerPortal>
+                <ng-template rdxDrawerPortal [container]="portalContainer">
                     <div rdxDrawerBackdrop></div>
                     <div rdxDrawerViewport>
                         <div rdxDrawerPopup>Body</div>
@@ -168,7 +168,7 @@ class LocalSwipeAreaHostComponent {}
     changeDetection: ChangeDetectionStrategy.Eager,
     imports: [RdxDrawerRoot, RdxDrawerPortal, RdxDrawerViewport, RdxDrawerVirtualKeyboardProvider, RdxDrawerPopup],
     template: `
-        <div [(open)]="open" rdxDrawerRoot>
+        <div rdxDrawerRoot [(open)]="open">
             <ng-template rdxDrawerPortal>
                 <div data-testid="viewport" rdxDrawerViewport rdxDrawerVirtualKeyboardProvider>
                     <div rdxDrawerPopup>
@@ -177,7 +177,7 @@ class LocalSwipeAreaHostComponent {}
                             <button data-testid="button">Button</button>
                         </div>
 
-                        <div [(open)]="nested" rdxDrawerRoot>
+                        <div rdxDrawerRoot [(open)]="nested">
                             <ng-template rdxDrawerPortal>
                                 <div rdxDrawerPopup>Nested</div>
                             </ng-template>
diff --git a/packages/primitives/drawer/index.ts b/packages/primitives/drawer/index.ts
index 38779c0d8..f8606a08c 100644
--- a/packages/primitives/drawer/index.ts
+++ b/packages/primitives/drawer/index.ts
@@ -1,4 +1,3 @@
-import { NgModule } from '@angular/core';
 import { RdxDrawerBackdrop } from './src/drawer-backdrop';
 import { RdxDrawerClose } from './src/drawer-close';
 import { RdxDrawerContent } from './src/drawer-content';
@@ -14,6 +13,7 @@ import { RdxDrawerTitle } from './src/drawer-title';
 import { RdxDrawerTrigger } from './src/drawer-trigger';
 import { RdxDrawerViewport } from './src/drawer-viewport';
 import { RdxDrawerVirtualKeyboardProvider } from './src/drawer-virtual-keyboard-provider';
+import { NgModule } from '@angular/core';
 
 export * from './src/drawer-backdrop';
 export * from './src/drawer-close';
diff --git a/packages/primitives/drawer/src/drawer-backdrop.ts b/packages/primitives/drawer/src/drawer-backdrop.ts
index a72a84219..f6d7be1fa 100644
--- a/packages/primitives/drawer/src/drawer-backdrop.ts
+++ b/packages/primitives/drawer/src/drawer-backdrop.ts
@@ -1,6 +1,6 @@
+import { injectRdxDrawerRootContext } from './drawer-root';
 import { Directive } from '@angular/core';
 import { RdxDialogBackdrop } from '@radix-ng/primitives/dialog';
-import { injectRdxDrawerRootContext } from './drawer-root';
 
 /**
  * An overlay displayed beneath the drawer popup.
diff --git a/packages/primitives/drawer/src/drawer-indent-background.ts b/packages/primitives/drawer/src/drawer-indent-background.ts
index e4e4888d3..337443c01 100644
--- a/packages/primitives/drawer/src/drawer-indent-background.ts
+++ b/packages/primitives/drawer/src/drawer-indent-background.ts
@@ -1,5 +1,5 @@
-import { Directive, inject } from '@angular/core';
 import { RdxDrawerProvider } from './drawer-provider';
+import { Directive, inject } from '@angular/core';
 
 /**
  * The page background layer that scales/indents while any drawer is open.
diff --git a/packages/primitives/drawer/src/drawer-indent.ts b/packages/primitives/drawer/src/drawer-indent.ts
index a92dfffa1..f1328c05b 100644
--- a/packages/primitives/drawer/src/drawer-indent.ts
+++ b/packages/primitives/drawer/src/drawer-indent.ts
@@ -1,5 +1,5 @@
-import { Directive, inject } from '@angular/core';
 import { RdxDrawerProvider } from './drawer-provider';
+import { Directive, inject } from '@angular/core';
 
 /**
  * Background content that scales/indents while any drawer is open.
diff --git a/packages/primitives/drawer/src/drawer-popup.ts b/packages/primitives/drawer/src/drawer-popup.ts
index 31b16d45c..3fe6e7b86 100644
--- a/packages/primitives/drawer/src/drawer-popup.ts
+++ b/packages/primitives/drawer/src/drawer-popup.ts
@@ -1,9 +1,9 @@
-import { computed, Directive, effect, ElementRef, inject, Injector } from '@angular/core';
-import { elementSize } from '@radix-ng/primitives/core';
-import { injectRdxDialogRootContext, RdxDialogPopup } from '@radix-ng/primitives/dialog';
 import { injectRdxDrawerRootContext } from './drawer-root';
 import { buildSnapEntries, dismissUnitVector, resolveSnapTarget } from './drawer-snap';
 import { RdxDrawerRelease, useDrawerSwipe } from './drawer-swipe';
+import { computed, Directive, effect, ElementRef, inject, Injector } from '@angular/core';
+import { elementSize } from '@radix-ng/primitives/core';
+import { injectRdxDialogRootContext, RdxDialogPopup } from '@radix-ng/primitives/dialog';
 
 /** Fraction of the drawer size a plain (no-snap) release must pass to dismiss. */
 const DISMISS_FRACTION = 0.5;
diff --git a/packages/primitives/drawer/src/drawer-provider.ts b/packages/primitives/drawer/src/drawer-provider.ts
index 9ff099053..3e2f31cd1 100644
--- a/packages/primitives/drawer/src/drawer-provider.ts
+++ b/packages/primitives/drawer/src/drawer-provider.ts
@@ -1,4 +1,4 @@
-import { computed, Directive, Injectable, Provider, signal, Signal } from '@angular/core';
+import { computed, Directive, Injectable, Provider, Signal, signal } from '@angular/core';
 
 /** A single open drawer's registration with the {@link RdxDrawerProvider}. */
 export interface RdxDrawerRegistration {
diff --git a/packages/primitives/drawer/src/drawer-root.ts b/packages/primitives/drawer/src/drawer-root.ts
index 29bdacd8b..78a2ea462 100644
--- a/packages/primitives/drawer/src/drawer-root.ts
+++ b/packages/primitives/drawer/src/drawer-root.ts
@@ -1,3 +1,6 @@
+import { RdxDrawerProvider } from './drawer-provider';
+import { RdxDrawerSnapPoint } from './drawer-snap';
+import { RdxDrawerSwipeDirection } from './drawer-swipe';
 import {
     booleanAttribute,
     computed,
@@ -7,15 +10,12 @@ import {
     input,
     model,
     output,
-    signal,
     Signal,
+    signal,
     untracked
 } from '@angular/core';
 import { BooleanInput, createContext } from '@radix-ng/primitives/core';
 import { RdxDialogRoot } from '@radix-ng/primitives/dialog';
-import { RdxDrawerProvider } from './drawer-provider';
-import { RdxDrawerSnapPoint } from './drawer-snap';
-import { RdxDrawerSwipeDirection } from './drawer-swipe';
 
 export interface RdxDrawerRootContext {
     /** Direction a swipe travels to dismiss the drawer. */
diff --git a/packages/primitives/drawer/src/drawer-snap.ts b/packages/primitives/drawer/src/drawer-snap.ts
index 60bb05946..deb5814f7 100644
--- a/packages/primitives/drawer/src/drawer-snap.ts
+++ b/packages/primitives/drawer/src/drawer-snap.ts
@@ -1,5 +1,5 @@
-import { clamp } from '@radix-ng/primitives/core';
 import { RdxDrawerSwipeDirection } from './drawer-swipe';
+import { clamp } from '@radix-ng/primitives/core';
 
 /**
  * A resting position for the drawer along the dismiss axis.
diff --git a/packages/primitives/drawer/src/drawer-swipe-area.ts b/packages/primitives/drawer/src/drawer-swipe-area.ts
index a76decd3f..2cec7a40e 100644
--- a/packages/primitives/drawer/src/drawer-swipe-area.ts
+++ b/packages/primitives/drawer/src/drawer-swipe-area.ts
@@ -1,9 +1,9 @@
-import { booleanAttribute, computed, Directive, input, signal } from '@angular/core';
-import { BooleanInput } from '@radix-ng/primitives/core';
-import { injectRdxDialogRootContext } from '@radix-ng/primitives/dialog';
 import { usePointerDrag } from './drawer-pointer';
 import { injectRdxDrawerRootContext } from './drawer-root';
 import { RdxDrawerSwipeDirection } from './drawer-swipe';
+import { booleanAttribute, computed, Directive, input, signal } from '@angular/core';
+import { BooleanInput } from '@radix-ng/primitives/core';
+import { injectRdxDialogRootContext } from '@radix-ng/primitives/dialog';
 
 /** Pointer travel (px) inward past which releasing the swipe keeps the drawer open. */
 const OPEN_THRESHOLD = 30;
diff --git a/packages/primitives/drawer/src/drawer-swipe.ts b/packages/primitives/drawer/src/drawer-swipe.ts
index 10f76dc7d..04822cfbe 100644
--- a/packages/primitives/drawer/src/drawer-swipe.ts
+++ b/packages/primitives/drawer/src/drawer-swipe.ts
@@ -1,7 +1,7 @@
-import { assertInInjectionContext, DestroyRef, effect, inject, Signal } from '@angular/core';
-import { clamp } from '@radix-ng/primitives/core';
 import { usePointerDrag } from './drawer-pointer';
 import { dismissUnitVector } from './drawer-snap';
+import { assertInInjectionContext, DestroyRef, effect, inject, Signal } from '@angular/core';
+import { clamp } from '@radix-ng/primitives/core';
 
 /**
  * Direction a swipe travels to dismiss the drawer. Mirrors Base UI's `swipeDirection`:
diff --git a/packages/primitives/drawer/src/drawer-virtual-keyboard-provider.ts b/packages/primitives/drawer/src/drawer-virtual-keyboard-provider.ts
index a8ac3537a..8d2153067 100644
--- a/packages/primitives/drawer/src/drawer-virtual-keyboard-provider.ts
+++ b/packages/primitives/drawer/src/drawer-virtual-keyboard-provider.ts
@@ -1,6 +1,6 @@
-import { DestroyRef, Directive, ElementRef, effect, inject, untracked } from '@angular/core';
-import { clamp } from '@radix-ng/primitives/core';
 import { injectRdxDrawerRootContext } from './drawer-root';
+import { DestroyRef, Directive, effect, ElementRef, inject, untracked } from '@angular/core';
+import { clamp } from '@radix-ng/primitives/core';
 
 const KEYBOARD_RESIZE_THRESHOLD = 60;
 const KEYBOARD_VISIBILITY_MARGIN = 16;
diff --git a/packages/primitives/drawer/stories/drawer-action-sheet.ts b/packages/primitives/drawer/stories/drawer-action-sheet.ts
index 1a197fd0f..adce1d144 100644
--- a/packages/primitives/drawer/stories/drawer-action-sheet.ts
+++ b/packages/primitives/drawer/stories/drawer-action-sheet.ts
@@ -1,6 +1,6 @@
+import { cn, demoButton, demoDrawer } from '../../storybook/styles';
 import { ChangeDetectionStrategy, Component } from '@angular/core';
 import { drawerImports } from '@radix-ng/primitives/drawer';
-import { cn, demoButton, demoDrawer } from '../../storybook/styles';
 
 /** A full-width action-sheet row. */
 const action = cn(
@@ -14,13 +14,13 @@ const action = cn(
     imports: [...drawerImports],
     template: `
         <div rdxDrawerRoot>
-            <button [class]="cn(b.base, b.primary, b.size.md)" rdxDrawerTrigger>Photo options</button>
+            <button rdxDrawerTrigger [class]="cn(b.base, b.primary, b.size.md)">Photo options</button>
 
             <ng-template rdxDrawerPortal>
-                <div [class]="cn(d.backdrop, d.overlayAnimated)" rdxDrawerBackdrop></div>
+                <div rdxDrawerBackdrop [class]="cn(d.backdrop, d.overlayAnimated)"></div>
 
-                <div [class]="cn(d.popup, d.side.bottom)" rdxDrawerPopup>
-                    <div [class]="d.grip" aria-hidden="true"></div>
+                <div rdxDrawerPopup [class]="cn(d.popup, d.side.bottom)">
+                    <div aria-hidden="true" [class]="d.grip"></div>
 
                     <div class="overflow-y-auto pb-2" rdxDrawerContent>
                         <h2 class="sr-only" rdxDrawerTitle>Photo options</h2>
@@ -30,22 +30,22 @@ const action = cn(
 
                         <!-- Primary group of actions. -->
                         <div class="divide-border border-border flex flex-col divide-y border-y">
-                            <button [class]="action" rdxDrawerClose>Save to Photos</button>
-                            <button [class]="action" rdxDrawerClose>Copy Link</button>
-                            <button [class]="action" rdxDrawerClose>Add to Album</button>
+                            <button rdxDrawerClose [class]="action">Save to Photos</button>
+                            <button rdxDrawerClose [class]="action">Copy Link</button>
+                            <button rdxDrawerClose [class]="action">Add to Album</button>
                         </div>
 
                         <!-- Destructive action, set apart by a full-bleed spacer. -->
                         <div class="bg-muted h-2" aria-hidden="true"></div>
                         <button
-                            [class]="cn(action, 'border-border text-destructive border-b font-medium')"
                             rdxDrawerClose
+                            [class]="cn(action, 'border-border text-destructive border-b font-medium')"
                         >
                             Delete Photo
                         </button>
 
                         <div class="bg-muted h-2" aria-hidden="true"></div>
-                        <button [class]="cn(action, 'font-semibold')" rdxDrawerClose>Cancel</button>
+                        <button rdxDrawerClose [class]="cn(action, 'font-semibold')">Cancel</button>
                     </div>
                 </div>
             </ng-template>
diff --git a/packages/primitives/drawer/stories/drawer-controlled.ts b/packages/primitives/drawer/stories/drawer-controlled.ts
index 1e0fa5f2d..1b486f9c4 100644
--- a/packages/primitives/drawer/stories/drawer-controlled.ts
+++ b/packages/primitives/drawer/stories/drawer-controlled.ts
@@ -1,6 +1,6 @@
+import { cn, demoButton, demoDrawer } from '../../storybook/styles';
 import { ChangeDetectionStrategy, Component, signal } from '@angular/core';
 import { drawerImports } from '@radix-ng/primitives/drawer';
-import { cn, demoButton, demoDrawer } from '../../storybook/styles';
 
 @Component({
     changeDetection: ChangeDetectionStrategy.Eager,
@@ -12,18 +12,18 @@ import { cn, demoButton, demoDrawer } from '../../storybook/styles';
 
             <button [class]="cn(b.base, b.outline, b.size.sm)" (click)="open.set(true)">Open from outside</button>
 
-            <div [(open)]="open" rdxDrawerRoot>
-                <button [class]="cn(b.base, b.primary, b.size.md)" rdxDrawerTrigger>Open drawer</button>
+            <div rdxDrawerRoot [(open)]="open">
+                <button rdxDrawerTrigger [class]="cn(b.base, b.primary, b.size.md)">Open drawer</button>
 
                 <ng-template rdxDrawerPortal>
-                    <div [class]="cn(d.backdrop, d.overlayAnimated)" rdxDrawerBackdrop></div>
+                    <div rdxDrawerBackdrop [class]="cn(d.backdrop, d.overlayAnimated)"></div>
 
-                    <div [class]="cn(d.popup, d.side.bottom)" rdxDrawerPopup>
-                        <div [class]="d.grip" aria-hidden="true"></div>
+                    <div rdxDrawerPopup [class]="cn(d.popup, d.side.bottom)">
+                        <div aria-hidden="true" [class]="d.grip"></div>
 
-                        <div [class]="d.body" rdxDrawerContent>
-                            <h2 [class]="d.title" rdxDrawerTitle>Controlled drawer</h2>
-                            <p [class]="d.description" rdxDrawerDescription>
+                        <div rdxDrawerContent [class]="d.body">
+                            <h2 rdxDrawerTitle [class]="d.title">Controlled drawer</h2>
+                            <p rdxDrawerDescription [class]="d.description">
                                 The open state is owned by the component and bound with
                                 <code>[(open)]</code>
                                 .
diff --git a/packages/primitives/drawer/stories/drawer-default.ts b/packages/primitives/drawer/stories/drawer-default.ts
index 38b1f8904..653e37b05 100644
--- a/packages/primitives/drawer/stories/drawer-default.ts
+++ b/packages/primitives/drawer/stories/drawer-default.ts
@@ -1,7 +1,7 @@
+import { cn, demoButton, demoDrawer } from '../../storybook/styles';
 import { ChangeDetectionStrategy, Component } from '@angular/core';
 import { LucideX } from '@lucide/angular';
 import { drawerImports } from '@radix-ng/primitives/drawer';
-import { cn, demoButton, demoDrawer } from '../../storybook/styles';
 
 @Component({
     changeDetection: ChangeDetectionStrategy.Eager,
@@ -9,17 +9,17 @@ import { cn, demoButton, demoDrawer } from '../../storybook/styles';
     imports: [...drawerImports, LucideX],
     template: `
         <div rdxDrawerRoot>
-            <button [class]="cn(b.base, b.primary, b.size.md)" rdxDrawerTrigger>Open drawer</button>
+            <button rdxDrawerTrigger [class]="cn(b.base, b.primary, b.size.md)">Open drawer</button>
 
             <ng-template rdxDrawerPortal>
-                <div [class]="cn(d.backdrop, d.overlayAnimated)" rdxDrawerBackdrop></div>
+                <div rdxDrawerBackdrop [class]="cn(d.backdrop, d.overlayAnimated)"></div>
 
-                <div [class]="cn(d.popup, d.side.bottom)" rdxDrawerPopup>
-                    <div [class]="d.grip" aria-hidden="true"></div>
+                <div rdxDrawerPopup [class]="cn(d.popup, d.side.bottom)">
+                    <div aria-hidden="true" [class]="d.grip"></div>
 
-                    <div [class]="d.body" rdxDrawerContent>
-                        <h2 [class]="d.title" rdxDrawerTitle>Drag me down</h2>
-                        <p [class]="d.description" rdxDrawerDescription>
+                    <div rdxDrawerContent [class]="d.body">
+                        <h2 rdxDrawerTitle [class]="d.title">Drag me down</h2>
+                        <p rdxDrawerDescription [class]="d.description">
                             Swipe the sheet downwards or press Escape to dismiss it. Releasing before the halfway point
                             snaps it back.
                         </p>
@@ -30,12 +30,12 @@ import { cn, demoButton, demoDrawer } from '../../storybook/styles';
                         </p>
 
                         <div [class]="d.footer">
-                            <button [class]="cn(b.base, b.outline, b.size.sm)" rdxDrawerClose>Cancel</button>
-                            <button [class]="cn(b.base, b.primary, b.size.sm)" rdxDrawerClose>Confirm</button>
+                            <button rdxDrawerClose [class]="cn(b.base, b.outline, b.size.sm)">Cancel</button>
+                            <button rdxDrawerClose [class]="cn(b.base, b.primary, b.size.sm)">Confirm</button>
                         </div>
                     </div>
 
-                    <button [class]="d.close" aria-label="Close" rdxDrawerClose>
+                    <button aria-label="Close" rdxDrawerClose [class]="d.close">
                         <svg aria-hidden="true" lucideX size="16"></svg>
                     </button>
                 </div>
diff --git a/packages/primitives/drawer/stories/drawer-detached.ts b/packages/primitives/drawer/stories/drawer-detached.ts
index 9ca98c112..24ffcc4f6 100644
--- a/packages/primitives/drawer/stories/drawer-detached.ts
+++ b/packages/primitives/drawer/stories/drawer-detached.ts
@@ -1,6 +1,6 @@
+import { cn, demoButton, demoDrawer } from '../../storybook/styles';
 import { ChangeDetectionStrategy, Component } from '@angular/core';
 import { createRdxDrawerHandle, drawerImports } from '@radix-ng/primitives/drawer';
-import { cn, demoButton, demoDrawer } from '../../storybook/styles';
 
 @Component({
     changeDetection: ChangeDetectionStrategy.Eager,
@@ -10,10 +10,10 @@ import { cn, demoButton, demoDrawer } from '../../storybook/styles';
         <div class="flex flex-col items-center gap-3">
             <!-- Triggers live outside the root and are linked through a shared handle. -->
             <div class="flex gap-2">
-                <button id="cart" [class]="cn(b.base, b.outline, b.size.md)" [handle]="handle" rdxDrawerTrigger>
+                <button id="cart" rdxDrawerTrigger [class]="cn(b.base, b.outline, b.size.md)" [handle]="handle">
                     Cart
                 </button>
-                <button id="account" [class]="cn(b.base, b.outline, b.size.md)" [handle]="handle" rdxDrawerTrigger>
+                <button id="account" rdxDrawerTrigger [class]="cn(b.base, b.outline, b.size.md)" [handle]="handle">
                     Account
                 </button>
             </div>
@@ -22,21 +22,21 @@ import { cn, demoButton, demoDrawer } from '../../storybook/styles';
                 Open account imperatively
             </button>
 
-            <div [handle]="handle" rdxDrawerRoot>
+            <div rdxDrawerRoot [handle]="handle">
                 <ng-template rdxDrawerPortal>
-                    <div [class]="cn(d.backdrop, d.overlayAnimated)" rdxDrawerBackdrop></div>
+                    <div rdxDrawerBackdrop [class]="cn(d.backdrop, d.overlayAnimated)"></div>
 
-                    <div [class]="cn(d.popup, d.side.right)" rdxDrawerPopup>
-                        <div [class]="d.body" rdxDrawerContent>
-                            <h2 [class]="d.title" rdxDrawerTitle>Detached triggers</h2>
-                            <p [class]="d.description" rdxDrawerDescription>
+                    <div rdxDrawerPopup [class]="cn(d.popup, d.side.right)">
+                        <div rdxDrawerContent [class]="d.body">
+                            <h2 rdxDrawerTitle [class]="d.title">Detached triggers</h2>
+                            <p rdxDrawerDescription [class]="d.description">
                                 The triggers and this drawer are connected with
                                 <code>createRdxDrawerHandle()</code>
                                 rather than DOM nesting.
                             </p>
 
                             <div [class]="d.footer">
-                                <button [class]="cn(b.base, b.primary, b.size.sm)" rdxDrawerClose>Close</button>
+                                <button rdxDrawerClose [class]="cn(b.base, b.primary, b.size.sm)">Close</button>
                             </div>
                         </div>
                     </div>
diff --git a/packages/primitives/drawer/stories/drawer-nested.ts b/packages/primitives/drawer/stories/drawer-nested.ts
index 918ad82a5..363090003 100644
--- a/packages/primitives/drawer/stories/drawer-nested.ts
+++ b/packages/primitives/drawer/stories/drawer-nested.ts
@@ -1,6 +1,6 @@
+import { cn, demoButton, demoDrawer } from '../../storybook/styles';
 import { ChangeDetectionStrategy, Component, input } from '@angular/core';
 import { drawerImports } from '@radix-ng/primitives/drawer';
-import { cn, demoButton, demoDrawer } from '../../storybook/styles';
 
 /**
  * A self-recursive drawer: each level's content hosts the trigger for the next level, so drawers
@@ -13,19 +13,19 @@ import { cn, demoButton, demoDrawer } from '../../storybook/styles';
     imports: [...drawerImports],
     template: `
         <div rdxDrawerRoot>
-            <button [class]="cn(b.base, level() === 1 ? b.primary : b.outline, b.size.md)" rdxDrawerTrigger>
+            <button rdxDrawerTrigger [class]="cn(b.base, level() === 1 ? b.primary : b.outline, b.size.md)">
                 {{ level() === 1 ? 'Open drawer' : 'Open drawer ' + level() }}
             </button>
 
             <ng-template rdxDrawerPortal>
-                <div [class]="cn(d.backdrop, d.overlayAnimated)" rdxDrawerBackdrop></div>
+                <div rdxDrawerBackdrop [class]="cn(d.backdrop, d.overlayAnimated)"></div>
 
-                <div [class]="cn(d.popup, d.side.bottom)" rdxDrawerPopup>
-                    <div [class]="d.grip" aria-hidden="true"></div>
+                <div rdxDrawerPopup [class]="cn(d.popup, d.side.bottom)">
+                    <div aria-hidden="true" [class]="d.grip"></div>
 
-                    <div [class]="d.body" rdxDrawerContent>
-                        <h2 [class]="d.title" rdxDrawerTitle>Drawer level {{ level() }}</h2>
-                        <p [class]="d.description" rdxDrawerDescription>
+                    <div rdxDrawerContent [class]="d.body">
+                        <h2 rdxDrawerTitle [class]="d.title">Drawer level {{ level() }}</h2>
+                        <p rdxDrawerDescription [class]="d.description">
                             @if (level() < max()) {
                                 Open another to stack it on top — this one scales back and peeks behind it.
                             } @else {
@@ -37,7 +37,7 @@ import { cn, demoButton, demoDrawer } from '../../storybook/styles';
                             @if (level() < max()) {
                                 <rdx-drawer-nested [level]="level() + 1" [max]="max()" />
                             }
-                            <button [class]="cn(b.base, b.outline, b.size.sm)" rdxDrawerClose>Close</button>
+                            <button rdxDrawerClose [class]="cn(b.base, b.outline, b.size.sm)">Close</button>
                         </div>
                     </div>
                 </div>
diff --git a/packages/primitives/drawer/stories/drawer-non-modal.ts b/packages/primitives/drawer/stories/drawer-non-modal.ts
index 4f1a652e8..9ea9d156a 100644
--- a/packages/primitives/drawer/stories/drawer-non-modal.ts
+++ b/packages/primitives/drawer/stories/drawer-non-modal.ts
@@ -1,6 +1,6 @@
+import { cn, demoButton, demoDrawer } from '../../storybook/styles';
 import { ChangeDetectionStrategy, Component, signal } from '@angular/core';
 import { drawerImports } from '@radix-ng/primitives/drawer';
-import { cn, demoButton, demoDrawer } from '../../storybook/styles';
 
 @Component({
     changeDetection: ChangeDetectionStrategy.Eager,
@@ -13,21 +13,21 @@ import { cn, demoButton, demoDrawer } from '../../storybook/styles';
                 there is no backdrop.
             </p>
 
-            <div [modal]="false" rdxDrawerRoot>
-                <button [class]="cn(b.base, b.primary, b.size.md)" rdxDrawerTrigger>Open non-modal drawer</button>
+            <div rdxDrawerRoot [modal]="false">
+                <button rdxDrawerTrigger [class]="cn(b.base, b.primary, b.size.md)">Open non-modal drawer</button>
 
                 <ng-template rdxDrawerPortal>
-                    <div [class]="cn(d.popup, d.side.bottom, d.overlayAnimated)" rdxDrawerPopup>
-                        <div [class]="d.grip" aria-hidden="true"></div>
+                    <div rdxDrawerPopup [class]="cn(d.popup, d.side.bottom, d.overlayAnimated)">
+                        <div aria-hidden="true" [class]="d.grip"></div>
 
-                        <div [class]="d.body" rdxDrawerContent>
-                            <h2 [class]="d.title" rdxDrawerTitle>Non-modal drawer</h2>
-                            <p [class]="d.description" rdxDrawerDescription>
+                        <div rdxDrawerContent [class]="d.body">
+                            <h2 rdxDrawerTitle [class]="d.title">Non-modal drawer</h2>
+                            <p rdxDrawerDescription [class]="d.description">
                                 Keep interacting with the rest of the page; the counter below still works.
                             </p>
 
                             <div [class]="d.footer">
-                                <button [class]="cn(b.base, b.primary, b.size.sm)" rdxDrawerClose>Close</button>
+                                <button rdxDrawerClose [class]="cn(b.base, b.primary, b.size.sm)">Close</button>
                             </div>
                         </div>
                     </div>
diff --git a/packages/primitives/drawer/stories/drawer-page-scale.ts b/packages/primitives/drawer/stories/drawer-page-scale.ts
index 01e436502..725cba895 100644
--- a/packages/primitives/drawer/stories/drawer-page-scale.ts
+++ b/packages/primitives/drawer/stories/drawer-page-scale.ts
@@ -1,6 +1,6 @@
+import { cn, demoButton, demoDrawer } from '../../storybook/styles';
 import { ChangeDetectionStrategy, Component } from '@angular/core';
 import { drawerImports } from '@radix-ng/primitives/drawer';
-import { cn, demoButton, demoDrawer } from '../../storybook/styles';
 
 @Component({
     changeDetection: ChangeDetectionStrategy.Eager,
@@ -8,7 +8,7 @@ import { cn, demoButton, demoDrawer } from '../../storybook/styles';
     imports: [...drawerImports],
     template: `
         <div class="w-full" rdxDrawerProvider>
-            <div class="relative w-full overflow-hidden [--bleed:3rem]" #portalContainer>
+            <div #portalContainer class="relative w-full overflow-hidden [--bleed:3rem]">
                 <div class="bg-foreground absolute inset-0" rdxDrawerIndentBackground></div>
 
                 <div
@@ -16,10 +16,10 @@ import { cn, demoButton, demoDrawer } from '../../storybook/styles';
                     rdxDrawerIndent
                 >
                     <div class="flex min-h-80 items-center justify-center">
-                        <div [modal]="false" rdxDrawerRoot>
-                            <button [class]="cn(b.base, b.outline, b.size.sm)" rdxDrawerTrigger>Open drawer</button>
+                        <div rdxDrawerRoot [modal]="false">
+                            <button rdxDrawerTrigger [class]="cn(b.base, b.outline, b.size.sm)">Open drawer</button>
 
-                            <ng-template [container]="portalContainer" rdxDrawerPortal>
+                            <ng-template rdxDrawerPortal [container]="portalContainer">
                                 <div
                                     class="bg-foreground/20 absolute inset-0 opacity-[calc(1-var(--drawer-swipe-progress))] transition-opacity duration-[450ms] ease-[cubic-bezier(0.32,0.72,0,1)] data-[ending-style]:opacity-0 data-[starting-style]:opacity-0 data-[swiping]:duration-0"
                                     rdxDrawerBackdrop
@@ -32,14 +32,14 @@ import { cn, demoButton, demoDrawer } from '../../storybook/styles';
                                     >
                                         <div class="bg-muted mx-auto mb-4 h-1 w-12"></div>
                                         <div class="mx-auto w-full max-w-lg" rdxDrawerContent>
-                                            <h2 class="text-center" [class]="cn(d.title, 'text-center')" rdxDrawerTitle>
+                                            <h2 class="text-center" rdxDrawerTitle [class]="cn(d.title, 'text-center')">
                                                 Notifications
                                             </h2>
-                                            <p [class]="cn(d.description, 'mb-6 text-center')" rdxDrawerDescription>
+                                            <p rdxDrawerDescription [class]="cn(d.description, 'mb-6 text-center')">
                                                 You are all caught up. Good job!
                                             </p>
                                             <div class="flex justify-center gap-3">
-                                                <button [class]="cn(b.base, b.outline, b.size.sm)" rdxDrawerClose>
+                                                <button rdxDrawerClose [class]="cn(b.base, b.outline, b.size.sm)">
                                                     Close
                                                 </button>
                                             </div>
diff --git a/packages/primitives/drawer/stories/drawer-scrollable.ts b/packages/primitives/drawer/stories/drawer-scrollable.ts
index 8f2174df6..b32f9b26a 100644
--- a/packages/primitives/drawer/stories/drawer-scrollable.ts
+++ b/packages/primitives/drawer/stories/drawer-scrollable.ts
@@ -1,3 +1,4 @@
+import { cn, demoButton, demoCard, demoDrawer, demoFocusRing } from '../../storybook/styles';
 import { ChangeDetectionStrategy, Component } from '@angular/core';
 import { drawerImports } from '@radix-ng/primitives/drawer';
 import {
@@ -7,7 +8,6 @@ import {
     RdxScrollAreaThumb,
     RdxScrollAreaViewport
 } from '@radix-ng/primitives/scroll-area';
-import { cn, demoButton, demoCard, demoDrawer, demoFocusRing } from '../../storybook/styles';
 
 const ITEMS = [
     { href: '/react/overview', label: 'Overview' },
@@ -69,14 +69,14 @@ const LONG_LIST = [
     ],
     template: `
         <div rdxDrawerRoot>
-            <button [class]="cn(b.base, b.primary, 'h-8 px-3 text-sm leading-none font-normal')" rdxDrawerTrigger>
+            <button rdxDrawerTrigger [class]="cn(b.base, b.primary, 'h-8 px-3 text-sm leading-none font-normal')">
                 Open mobile menu
             </button>
 
             <ng-template rdxDrawerPortal>
                 <div
-                    [class]="cn(d.backdrop, d.overlayAnimated, 'opacity-[calc(1-var(--drawer-swipe-progress))]')"
                     rdxDrawerBackdrop
+                    [class]="cn(d.backdrop, d.overlayAnimated, 'opacity-[calc(1-var(--drawer-swipe-progress))]')"
                 ></div>
 
                 <div class="group fixed inset-0 z-50" rdxDrawerViewport>
@@ -87,6 +87,7 @@ const LONG_LIST = [
                                 rdxScrollAreaContent
                             >
                                 <div
+                                    rdxDrawerPopup
                                     [class]="
                                         cn(
                                             card,
@@ -98,16 +99,15 @@ const LONG_LIST = [
                                             'min-[42rem]:rounded-2xl min-[42rem]:border'
                                         )
                                     "
-                                    rdxDrawerPopup
                                 >
                                     <nav class="relative flex flex-col px-6 pt-4 pb-6" aria-label="Navigation">
                                         <div class="grid grid-cols-[1fr_auto_1fr] items-start">
                                             <svg class="h-9 w-9" aria-hidden="true" />
                                             <div class="bg-muted h-1.5 w-12 justify-self-center rounded-full"></div>
                                             <button
-                                                [class]="cn(b.base, b.ghost, 'h-8 w-8 justify-self-end p-0')"
                                                 aria-label="Close menu"
                                                 rdxDrawerClose
+                                                [class]="cn(b.base, b.ghost, 'h-8 w-8 justify-self-end p-0')"
                                             >
                                                 <svg
                                                     class="block"
@@ -126,8 +126,8 @@ const LONG_LIST = [
                                         </div>
 
                                         <div class="w-full" rdxDrawerContent>
-                                            <h2 [class]="cn(d.title, 'm-0 mb-1')" rdxDrawerTitle>Menu</h2>
-                                            <p [class]="cn(d.description, 'm-0 mb-5')" rdxDrawerDescription>
+                                            <h2 rdxDrawerTitle [class]="cn(d.title, 'm-0 mb-1')">Menu</h2>
+                                            <p rdxDrawerDescription [class]="cn(d.description, 'm-0 mb-5')">
                                                 Scroll the long list. Flick down from the top to dismiss.
                                             </p>
 
diff --git a/packages/primitives/drawer/stories/drawer-sides.ts b/packages/primitives/drawer/stories/drawer-sides.ts
index b69d793ab..d661a2941 100644
--- a/packages/primitives/drawer/stories/drawer-sides.ts
+++ b/packages/primitives/drawer/stories/drawer-sides.ts
@@ -1,6 +1,6 @@
+import { cn, demoButton, demoDrawer } from '../../storybook/styles';
 import { ChangeDetectionStrategy, Component } from '@angular/core';
 import { drawerImports, RdxDrawerSwipeDirection } from '@radix-ng/primitives/drawer';
-import { cn, demoButton, demoDrawer } from '../../storybook/styles';
 
 type DrawerSide = 'top' | 'right' | 'bottom' | 'left';
 
@@ -18,23 +18,23 @@ const SIDES: { side: DrawerSide; swipeDirection: RdxDrawerSwipeDirection }[] = [
     template: `
         <div class="flex flex-wrap gap-3">
             @for (item of sides; track item.side) {
-                <div [swipeDirection]="item.swipeDirection" rdxDrawerRoot>
-                    <button [class]="cn(b.base, b.outline, b.size.md, 'capitalize')" rdxDrawerTrigger>
+                <div rdxDrawerRoot [swipeDirection]="item.swipeDirection">
+                    <button rdxDrawerTrigger [class]="cn(b.base, b.outline, b.size.md, 'capitalize')">
                         {{ item.side }}
                     </button>
 
                     <ng-template rdxDrawerPortal>
-                        <div [class]="cn(d.backdrop, d.overlayAnimated)" rdxDrawerBackdrop></div>
+                        <div rdxDrawerBackdrop [class]="cn(d.backdrop, d.overlayAnimated)"></div>
 
-                        <div [class]="cn(d.popup, d.side[item.side])" rdxDrawerPopup>
-                            <div [class]="d.body" rdxDrawerContent>
-                                <h2 [class]="cn(d.title, 'capitalize')" rdxDrawerTitle>{{ item.side }} drawer</h2>
-                                <p [class]="d.description" rdxDrawerDescription>
+                        <div rdxDrawerPopup [class]="cn(d.popup, d.side[item.side])">
+                            <div rdxDrawerContent [class]="d.body">
+                                <h2 rdxDrawerTitle [class]="cn(d.title, 'capitalize')">{{ item.side }} drawer</h2>
+                                <p rdxDrawerDescription [class]="d.description">
                                     Swipe {{ item.swipeDirection }} to dismiss.
                                 </p>
 
                                 <div [class]="d.footer">
-                                    <button [class]="cn(b.base, b.primary, b.size.sm)" rdxDrawerClose>Done</button>
+                                    <button rdxDrawerClose [class]="cn(b.base, b.primary, b.size.sm)">Done</button>
                                 </div>
                             </div>
                         </div>
diff --git a/packages/primitives/drawer/stories/drawer-snap-points.ts b/packages/primitives/drawer/stories/drawer-snap-points.ts
index 6acc07805..f67b730b5 100644
--- a/packages/primitives/drawer/stories/drawer-snap-points.ts
+++ b/packages/primitives/drawer/stories/drawer-snap-points.ts
@@ -1,6 +1,6 @@
+import { cn, demoButton, demoDrawer } from '../../storybook/styles';
 import { ChangeDetectionStrategy, Component } from '@angular/core';
 import { drawerImports, RdxDrawerSnapPoint } from '@radix-ng/primitives/drawer';
-import { cn, demoButton, demoDrawer } from '../../storybook/styles';
 
 const TOP_MARGIN_REM = 1;
 const VISIBLE_SNAP_POINTS_REM = [30];
@@ -14,11 +14,12 @@ function toViewportSnapPoint(heightRem: number): RdxDrawerSnapPoint {
     selector: 'rdx-drawer-snap-points',
     imports: [...drawerImports],
     template: `
-        <div [snapPoints]="snapPoints" rdxDrawerRoot>
-            <button [class]="cn(b.base, b.outline, b.size.sm)" rdxDrawerTrigger>Open snap drawer</button>
+        <div rdxDrawerRoot [snapPoints]="snapPoints">
+            <button rdxDrawerTrigger [class]="cn(b.base, b.outline, b.size.sm)">Open snap drawer</button>
 
             <ng-template rdxDrawerPortal>
                 <div
+                    rdxDrawerBackdrop
                     [class]="
                         cn(
                             'bg-foreground/20 fixed inset-0 min-h-dvh opacity-[calc(1-var(--drawer-swipe-progress))]',
@@ -28,7 +29,6 @@ function toViewportSnapPoint(heightRem: number): RdxDrawerSnapPoint {
                             'data-[ending-style]:opacity-0 data-[starting-style]:opacity-0 data-[swiping]:duration-0'
                         )
                     "
-                    rdxDrawerBackdrop
                 ></div>
 
                 <div class="fixed inset-0 flex touch-none items-end justify-center" rdxDrawerViewport>
@@ -57,7 +57,7 @@ function toViewportSnapPoint(heightRem: number): RdxDrawerSnapPoint {
                                 </div>
 
                                 <div class="flex items-center justify-end gap-3">
-                                    <button [class]="cn(b.base, b.outline, b.size.sm)" rdxDrawerClose>Close</button>
+                                    <button rdxDrawerClose [class]="cn(b.base, b.outline, b.size.sm)">Close</button>
                                 </div>
                             </div>
                         </div>
diff --git a/packages/primitives/drawer/stories/drawer-swipe-to-open.ts b/packages/primitives/drawer/stories/drawer-swipe-to-open.ts
index d1f023474..37d3adb0e 100644
--- a/packages/primitives/drawer/stories/drawer-swipe-to-open.ts
+++ b/packages/primitives/drawer/stories/drawer-swipe-to-open.ts
@@ -1,6 +1,6 @@
+import { cn, demoButton, demoDrawer } from '../../storybook/styles';
 import { ChangeDetectionStrategy, Component } from '@angular/core';
 import { drawerImports } from '@radix-ng/primitives/drawer';
-import { cn, demoButton, demoDrawer } from '../../storybook/styles';
 
 @Component({
     changeDetection: ChangeDetectionStrategy.Eager,
@@ -8,10 +8,10 @@ import { cn, demoButton, demoDrawer } from '../../storybook/styles';
     imports: [...drawerImports],
     template: `
         <div
-            class="border-border bg-background text-foreground relative min-h-80 w-full max-w-2xl overflow-hidden border"
             #portalContainer
+            class="border-border bg-background text-foreground relative min-h-80 w-full max-w-2xl overflow-hidden border"
         >
-            <div [modal]="false" swipeDirection="right" rdxDrawerRoot>
+            <div swipeDirection="right" rdxDrawerRoot [modal]="false">
                 <div
                     class="border-primary bg-primary/10 absolute inset-y-0 right-0 z-[1] w-10 cursor-grab border-l-2 border-dashed data-[swiping]:cursor-grabbing"
                     rdxDrawerSwipeArea
@@ -27,8 +27,9 @@ import { cn, demoButton, demoDrawer } from '../../storybook/styles';
                     <p class="text-muted-foreground text-sm">Swipe from the right edge to open the drawer.</p>
                 </div>
 
-                <ng-template [container]="portalContainer" rdxDrawerPortal>
+                <ng-template rdxDrawerPortal [container]="portalContainer">
                     <div
+                        rdxDrawerBackdrop
                         [class]="
                             cn(
                                 'bg-foreground/20 absolute inset-0 opacity-[calc(1-var(--drawer-swipe-progress))]',
@@ -38,7 +39,6 @@ import { cn, demoButton, demoDrawer } from '../../storybook/styles';
                                 'data-[ending-style]:opacity-0 data-[starting-style]:opacity-0 data-[swiping]:duration-0'
                             )
                         "
-                        rdxDrawerBackdrop
                     ></div>
 
                     <div class="absolute inset-0 z-20 flex items-stretch justify-end" rdxDrawerViewport>
@@ -47,12 +47,12 @@ import { cn, demoButton, demoDrawer } from '../../storybook/styles';
                             rdxDrawerPopup
                         >
                             <div class="mx-auto w-full max-w-lg" rdxDrawerContent>
-                                <h2 [class]="d.title" rdxDrawerTitle>Library</h2>
-                                <p [class]="d.description" rdxDrawerDescription>
+                                <h2 rdxDrawerTitle [class]="d.title">Library</h2>
+                                <p rdxDrawerDescription [class]="d.description">
                                     Swipe from the edge whenever you want to jump back into your playlists.
                                 </p>
                                 <div [class]="d.footer">
-                                    <button [class]="cn(b.base, b.outline, b.size.sm)" rdxDrawerClose>Close</button>
+                                    <button rdxDrawerClose [class]="cn(b.base, b.outline, b.size.sm)">Close</button>
                                 </div>
                             </div>
                         </div>
diff --git a/packages/primitives/drawer/stories/drawer-virtual-keyboard.ts b/packages/primitives/drawer/stories/drawer-virtual-keyboard.ts
index 83babb0d5..e805f254d 100644
--- a/packages/primitives/drawer/stories/drawer-virtual-keyboard.ts
+++ b/packages/primitives/drawer/stories/drawer-virtual-keyboard.ts
@@ -1,6 +1,6 @@
+import { cn, demoButton, demoDrawer, demoInput } from '../../storybook/styles';
 import { ChangeDetectionStrategy, Component } from '@angular/core';
 import { drawerImports } from '@radix-ng/primitives/drawer';
-import { cn, demoButton, demoDrawer, demoInput } from '../../storybook/styles';
 
 @Component({
     changeDetection: ChangeDetectionStrategy.Eager,
@@ -8,10 +8,10 @@ import { cn, demoButton, demoDrawer, demoInput } from '../../storybook/styles';
     imports: [...drawerImports],
     template: `
         <div rdxDrawerRoot>
-            <button [class]="cn(b.base, b.primary, b.size.md)" rdxDrawerTrigger>Edit delivery</button>
+            <button rdxDrawerTrigger [class]="cn(b.base, b.primary, b.size.md)">Edit delivery</button>
 
             <ng-template rdxDrawerPortal>
-                <div [class]="cn(d.backdrop, d.overlayAnimated)" rdxDrawerBackdrop></div>
+                <div rdxDrawerBackdrop [class]="cn(d.backdrop, d.overlayAnimated)"></div>
 
                 <div
                     class="fixed inset-0 z-50 flex items-end justify-center px-4 pb-[calc(env(safe-area-inset-bottom,0px)+var(--drawer-keyboard-inset,0px))] transition-[padding-bottom] duration-200"
@@ -28,8 +28,8 @@ import { cn, demoButton, demoDrawer, demoInput } from '../../storybook/styles';
                             class="max-h-[inherit] [scroll-padding-bottom:calc(var(--drawer-keyboard-inset,0px)+4rem)] overflow-y-auto px-6 pb-6"
                         >
                             <div class="mb-5">
-                                <h2 [class]="d.title" rdxDrawerTitle>Delivery details</h2>
-                                <p [class]="d.description" rdxDrawerDescription>
+                                <h2 rdxDrawerTitle [class]="d.title">Delivery details</h2>
+                                <p rdxDrawerDescription [class]="d.description">
                                     Confirm the address and contact fields before placing the order.
                                 </p>
                             </div>
@@ -37,22 +37,22 @@ import { cn, demoButton, demoDrawer, demoInput } from '../../storybook/styles';
                             <div class="grid gap-4">
                                 <label class="grid gap-1.5">
                                     <span class="text-foreground text-sm font-medium">Name</span>
-                                    <input [class]="i.base" value="Ada Lovelace" />
+                                    <input value="Ada Lovelace" [class]="i.base" />
                                 </label>
 
                                 <label class="grid gap-1.5">
                                     <span class="text-foreground text-sm font-medium">Phone</span>
-                                    <input [class]="i.base" inputmode="tel" value="+1 415 555 0142" />
+                                    <input inputmode="tel" value="+1 415 555 0142" [class]="i.base" />
                                 </label>
 
                                 <label class="grid gap-1.5">
                                     <span class="text-foreground text-sm font-medium">Street address</span>
-                                    <input [class]="i.base" value="12 Market Street" />
+                                    <input value="12 Market Street" [class]="i.base" />
                                 </label>
 
                                 <label class="grid gap-1.5">
                                     <span class="text-foreground text-sm font-medium">Apartment</span>
-                                    <input [class]="i.base" placeholder="Optional" />
+                                    <input placeholder="Optional" [class]="i.base" />
                                 </label>
 
                                 <label class="grid gap-1.5">
@@ -66,10 +66,10 @@ Leave at reception if nobody answers.</textarea
                             </div>
 
                             <div class="bg-card sticky bottom-0 mt-6 flex justify-end gap-2 border-t py-4">
-                                <button [class]="cn(b.base, b.outline, b.size.sm)" type="button" rdxDrawerClose>
+                                <button type="button" rdxDrawerClose [class]="cn(b.base, b.outline, b.size.sm)">
                                     Cancel
                                 </button>
-                                <button [class]="cn(b.base, b.primary, b.size.sm)" type="button" rdxDrawerClose>
+                                <button type="button" rdxDrawerClose [class]="cn(b.base, b.primary, b.size.sm)">
                                     Save
                                 </button>
                             </div>
diff --git a/packages/primitives/drawer/stories/drawer.stories.ts b/packages/primitives/drawer/stories/drawer.stories.ts
index 3cd11779c..0330cdf7d 100644
--- a/packages/primitives/drawer/stories/drawer.stories.ts
+++ b/packages/primitives/drawer/stories/drawer.stories.ts
@@ -1,4 +1,3 @@
-import { Meta, moduleMetadata, StoryObj } from '@storybook/angular';
 import { tailwindDemoDecorator } from '../../storybook/tailwind-demo';
 import { RdxDrawerActionSheetComponent } from './drawer-action-sheet';
 import actionSheetSource from './drawer-action-sheet?raw';
@@ -24,6 +23,7 @@ import { RdxDrawerSwipeToOpenComponent } from './drawer-swipe-to-open';
 import swipeToOpenSource from './drawer-swipe-to-open?raw';
 import { RdxDrawerVirtualKeyboardComponent } from './drawer-virtual-keyboard';
 import virtualKeyboardSource from './drawer-virtual-keyboard?raw';
+import { Meta, moduleMetadata, StoryObj } from '@storybook/angular';
 
 const html = String.raw;
 
diff --git a/packages/primitives/editable/__tests__/editable-root.directive.spec.ts b/packages/primitives/editable/__tests__/editable-root.directive.spec.ts
index 61b954833..bfadf2396 100644
--- a/packages/primitives/editable/__tests__/editable-root.directive.spec.ts
+++ b/packages/primitives/editable/__tests__/editable-root.directive.spec.ts
@@ -1,9 +1,3 @@
-import { ChangeDetectionStrategy, Component, signal } from '@angular/core';
-import { ComponentFixture, TestBed } from '@angular/core/testing';
-import { form, FormField } from '@angular/forms/signals';
-import { By } from '@angular/platform-browser';
-import { axe } from 'jest-axe';
-import { vi } from 'vitest';
 import { RdxEditableArea } from '../src/editable-area';
 import { RdxEditableCancelTrigger } from '../src/editable-cancel-trigger';
 import { RdxEditableEditTrigger } from '../src/editable-edit-trigger';
@@ -16,6 +10,12 @@ import {
     RdxEditableValueChangeEvent
 } from '../src/editable-root';
 import { RdxEditableSubmitTrigger } from '../src/editable-submit-trigger';
+import { ChangeDetectionStrategy, Component, signal } from '@angular/core';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { form, FormField } from '@angular/forms/signals';
+import { By } from '@angular/platform-browser';
+import { axe } from 'jest-axe';
+import { vi } from 'vitest';
 
 @Component({
     changeDetection: ChangeDetectionStrategy.Eager,
@@ -31,14 +31,14 @@ import { RdxEditableSubmitTrigger } from '../src/editable-submit-trigger';
     template: `
         <div
             #root="rdxEditableRoot"
-            [(value)]="value"
+            rdxEditableRoot
             [defaultValue]="defaultValue()"
             [submitMode]="submitMode()"
             [activationMode]="activationMode()"
             [disabled]="disabled()"
             [startWithEditMode]="startWithEditMode()"
+            [(value)]="value"
             (onValueChange)="onValueChange($event)"
-            rdxEditableRoot
         >
             <div rdxEditableArea>
                 <span rdxEditablePreview>{{ root.value() }}</span>
@@ -285,11 +285,11 @@ describe('RdxEditable', () => {
     template: `
         <div
             #root="rdxEditableRoot"
-            [(value)]="value"
+            rdxEditableRoot
             [invalid]="invalid()"
             [errors]="errors()"
             [dirty]="dirty()"
-            rdxEditableRoot
+            [(value)]="value"
         >
             <div rdxEditableArea>
                 <span rdxEditablePreview>{{ root.value() }}</span>
@@ -389,7 +389,7 @@ describe('RdxEditable validation state', () => {
         FormField
     ],
     template: `
-        <div #root="rdxEditableRoot" [formField]="name" rdxEditableRoot>
+        <div #root="rdxEditableRoot" rdxEditableRoot [formField]="name">
             <div rdxEditableArea>
                 <span rdxEditablePreview>{{ root.value() }}</span>
                 <input rdxEditableInput />
diff --git a/packages/primitives/editable/index.ts b/packages/primitives/editable/index.ts
index 9c63d8289..8e3e619b0 100644
--- a/packages/primitives/editable/index.ts
+++ b/packages/primitives/editable/index.ts
@@ -1,4 +1,3 @@
-import { NgModule } from '@angular/core';
 import { RdxEditableArea } from './src/editable-area';
 import { RdxEditableCancelTrigger } from './src/editable-cancel-trigger';
 import { RdxEditableEditTrigger } from './src/editable-edit-trigger';
@@ -6,6 +5,7 @@ import { RdxEditableInput } from './src/editable-input';
 import { RdxEditablePreview } from './src/editable-preview';
 import { RdxEditableRoot } from './src/editable-root';
 import { RdxEditableSubmitTrigger } from './src/editable-submit-trigger';
+import { NgModule } from '@angular/core';
 
 export * from './src/editable-area';
 export * from './src/editable-cancel-trigger';
diff --git a/packages/primitives/editable/src/editable-area.ts b/packages/primitives/editable/src/editable-area.ts
index 45ff4bc92..b119ece3f 100644
--- a/packages/primitives/editable/src/editable-area.ts
+++ b/packages/primitives/editable/src/editable-area.ts
@@ -1,5 +1,5 @@
-import { Directive } from '@angular/core';
 import { injectEditableRootContext } from './editable-root';
+import { Directive } from '@angular/core';
 
 @Directive({
     selector: '[rdxEditableArea]',
diff --git a/packages/primitives/editable/src/editable-cancel-trigger.ts b/packages/primitives/editable/src/editable-cancel-trigger.ts
index d11f55285..ef82b818f 100644
--- a/packages/primitives/editable/src/editable-cancel-trigger.ts
+++ b/packages/primitives/editable/src/editable-cancel-trigger.ts
@@ -1,5 +1,5 @@
-import { Directive, input } from '@angular/core';
 import { injectEditableRootContext } from './editable-root';
+import { Directive, input } from '@angular/core';
 
 @Directive({
     selector: 'button[rdxEditableCancelTrigger]',
diff --git a/packages/primitives/editable/src/editable-edit-trigger.ts b/packages/primitives/editable/src/editable-edit-trigger.ts
index fb7e889ff..748de1b28 100644
--- a/packages/primitives/editable/src/editable-edit-trigger.ts
+++ b/packages/primitives/editable/src/editable-edit-trigger.ts
@@ -1,5 +1,5 @@
-import { Directive, input } from '@angular/core';
 import { injectEditableRootContext } from './editable-root';
+import { Directive, input } from '@angular/core';
 
 @Directive({
     selector: 'button[rdxEditableEditTrigger]',
diff --git a/packages/primitives/editable/src/editable-input.ts b/packages/primitives/editable/src/editable-input.ts
index 4eeffdc88..0da6e73f3 100644
--- a/packages/primitives/editable/src/editable-input.ts
+++ b/packages/primitives/editable/src/editable-input.ts
@@ -1,6 +1,6 @@
+import { injectEditableRootContext } from './editable-root';
 import { afterNextRender, afterRenderEffect, computed, Directive, ElementRef, inject, input } from '@angular/core';
 import { ENTER } from '@radix-ng/primitives/core';
-import { injectEditableRootContext } from './editable-root';
 
 @Directive({
     selector: 'input[rdxEditableInput]',
diff --git a/packages/primitives/editable/src/editable-preview.ts b/packages/primitives/editable/src/editable-preview.ts
index c8ed894a8..a9b3cd4f5 100644
--- a/packages/primitives/editable/src/editable-preview.ts
+++ b/packages/primitives/editable/src/editable-preview.ts
@@ -1,5 +1,5 @@
-import { afterNextRender, computed, Directive, ElementRef, inject } from '@angular/core';
 import { injectEditableRootContext } from './editable-root';
+import { afterNextRender, computed, Directive, ElementRef, inject } from '@angular/core';
 
 @Directive({
     selector: 'span[rdxEditablePreview]',
diff --git a/packages/primitives/editable/src/editable-root.ts b/packages/primitives/editable/src/editable-root.ts
index 06f17df01..9bbf274e9 100644
--- a/packages/primitives/editable/src/editable-root.ts
+++ b/packages/primitives/editable/src/editable-root.ts
@@ -10,8 +10,8 @@ import {
     model,
     numberAttribute,
     output,
-    signal,
     Signal,
+    signal,
     WritableSignal
 } from '@angular/core';
 import {
diff --git a/packages/primitives/editable/src/editable-submit-trigger.ts b/packages/primitives/editable/src/editable-submit-trigger.ts
index 3ff1f47cc..c6af69911 100644
--- a/packages/primitives/editable/src/editable-submit-trigger.ts
+++ b/packages/primitives/editable/src/editable-submit-trigger.ts
@@ -1,5 +1,5 @@
-import { Directive, input } from '@angular/core';
 import { injectEditableRootContext } from './editable-root';
+import { Directive, input } from '@angular/core';
 
 @Directive({
     selector: 'button[rdxEditableSubmitTrigger]',
diff --git a/packages/primitives/editable/stories/editable-auto-resize.ts b/packages/primitives/editable/stories/editable-auto-resize.ts
index 37273e9dc..18a25271d 100644
--- a/packages/primitives/editable/stories/editable-auto-resize.ts
+++ b/packages/primitives/editable/stories/editable-auto-resize.ts
@@ -14,7 +14,7 @@ import { RdxEditableArea, RdxEditableInput, RdxEditablePreview, RdxEditableRoot
             autoResize
             submitMode="both"
         >
-            <div [class]="area" rdxEditableArea>
+            <div rdxEditableArea [class]="area">
                 <span #preview="rdxEditablePreview" rdxEditablePreview>
                     {{ root.value() || preview.placeholder() }}
                 </span>
diff --git a/packages/primitives/editable/stories/editable-default.ts b/packages/primitives/editable/stories/editable-default.ts
index 243a4ceb6..e808271f3 100644
--- a/packages/primitives/editable/stories/editable-default.ts
+++ b/packages/primitives/editable/stories/editable-default.ts
@@ -1,3 +1,4 @@
+import { cn, demoButton, demoEditable } from '../../storybook/styles';
 import { ChangeDetectionStrategy, Component } from '@angular/core';
 import {
     RdxEditableArea,
@@ -8,7 +9,6 @@ import {
     RdxEditableRoot,
     RdxEditableSubmitTrigger
 } from '@radix-ng/primitives/editable';
-import { cn, demoButton, demoEditable } from '../../storybook/styles';
 
 @Component({
     changeDetection: ChangeDetectionStrategy.Eager,
@@ -25,25 +25,25 @@ import { cn, demoButton, demoEditable } from '../../storybook/styles';
     template: `
         <div
             #root="rdxEditableRoot"
-            [class]="e.root"
             rdxEditableRoot
             value="Click to edit"
             placeholder="Enter text…"
             submitMode="both"
+            [class]="e.root"
         >
             <div rdxEditableArea>
-                <span #preview="rdxEditablePreview" [class]="e.preview" rdxEditablePreview>
+                <span #preview="rdxEditablePreview" rdxEditablePreview [class]="e.preview">
                     {{ root.value() || preview.placeholder() }}
                 </span>
-                <input [class]="e.input" rdxEditableInput aria-label="Inline value" />
+                <input rdxEditableInput aria-label="Inline value" [class]="e.input" />
             </div>
 
             @if (!root.isEditing()) {
-                <button [class]="cn(b.base, b.outline, b.size.sm)" rdxEditableEditTrigger>Edit</button>
+                <button rdxEditableEditTrigger [class]="cn(b.base, b.outline, b.size.sm)">Edit</button>
             } @else {
                 <div [class]="e.controls">
-                    <button [class]="cn(b.base, b.primary, b.size.sm)" rdxEditableSubmitTrigger>Save</button>
-                    <button [class]="cn(b.base, b.ghost, b.size.sm)" rdxEditableCancelTrigger>Cancel</button>
+                    <button rdxEditableSubmitTrigger [class]="cn(b.base, b.primary, b.size.sm)">Save</button>
+                    <button rdxEditableCancelTrigger [class]="cn(b.base, b.ghost, b.size.sm)">Cancel</button>
                 </div>
             }
         </div>
diff --git a/packages/primitives/editable/stories/editable-double-click.ts b/packages/primitives/editable/stories/editable-double-click.ts
index 5ab89bc0b..4581a8acc 100644
--- a/packages/primitives/editable/stories/editable-double-click.ts
+++ b/packages/primitives/editable/stories/editable-double-click.ts
@@ -1,3 +1,4 @@
+import { cn, demoButton, demoEditable } from '../../storybook/styles';
 import { ChangeDetectionStrategy, Component } from '@angular/core';
 import {
     RdxEditableArea,
@@ -7,7 +8,6 @@ import {
     RdxEditableRoot,
     RdxEditableSubmitTrigger
 } from '@radix-ng/primitives/editable';
-import { cn, demoButton, demoEditable } from '../../storybook/styles';
 
 @Component({
     changeDetection: ChangeDetectionStrategy.Eager,
@@ -23,24 +23,24 @@ import { cn, demoButton, demoEditable } from '../../storybook/styles';
     template: `
         <div
             #root="rdxEditableRoot"
-            [class]="e.root"
             rdxEditableRoot
             value="Double-click to edit"
             placeholder="Enter text…"
             activationMode="dblclick"
             submitMode="both"
+            [class]="e.root"
         >
             <div rdxEditableArea>
-                <span #preview="rdxEditablePreview" [class]="e.preview" rdxEditablePreview>
+                <span #preview="rdxEditablePreview" rdxEditablePreview [class]="e.preview">
                     {{ root.value() || preview.placeholder() }}
                 </span>
-                <input [class]="e.input" rdxEditableInput aria-label="Inline value" />
+                <input rdxEditableInput aria-label="Inline value" [class]="e.input" />
             </div>
 
             @if (root.isEditing()) {
                 <div [class]="e.controls">
-                    <button [class]="cn(b.base, b.primary, b.size.sm)" rdxEditableSubmitTrigger>Save</button>
-                    <button [class]="cn(b.base, b.ghost, b.size.sm)" rdxEditableCancelTrigger>Cancel</button>
+                    <button rdxEditableSubmitTrigger [class]="cn(b.base, b.primary, b.size.sm)">Save</button>
+                    <button rdxEditableCancelTrigger [class]="cn(b.base, b.ghost, b.size.sm)">Cancel</button>
                 </div>
             }
         </div>
diff --git a/packages/primitives/editable/stories/editable.stories.ts b/packages/primitives/editable/stories/editable.stories.ts
index 80380e29f..266abb32f 100644
--- a/packages/primitives/editable/stories/editable.stories.ts
+++ b/packages/primitives/editable/stories/editable.stories.ts
@@ -1,4 +1,3 @@
-import { Meta, moduleMetadata, StoryObj } from '@storybook/angular';
 import { tailwindDemoDecorator } from '../../storybook/tailwind-demo';
 import { EditableAutoResizeExample } from './editable-auto-resize';
 import autoResizeSource from './editable-auto-resize?raw';
@@ -6,6 +5,7 @@ import { EditableDefaultExample } from './editable-default';
 import defaultSource from './editable-default?raw';
 import { EditableDoubleClickExample } from './editable-double-click';
 import doubleClickSource from './editable-double-click?raw';
+import { Meta, moduleMetadata, StoryObj } from '@storybook/angular';
 
 const html = String.raw;
 
diff --git a/packages/primitives/field/__tests__/field-item.spec.ts b/packages/primitives/field/__tests__/field-item.spec.ts
index b82d48548..59299bee4 100644
--- a/packages/primitives/field/__tests__/field-item.spec.ts
+++ b/packages/primitives/field/__tests__/field-item.spec.ts
@@ -1,18 +1,18 @@
-import { ChangeDetectionStrategy, Component, signal } from '@angular/core';
-import { ComponentFixture, TestBed } from '@angular/core/testing';
-import { By } from '@angular/platform-browser';
 import { RdxFieldControl } from '../src/field-control';
 import { RdxFieldDescription } from '../src/field-description';
 import { RdxFieldItem } from '../src/field-item';
 import { RdxFieldLabel } from '../src/field-label';
 import { RdxFieldRoot } from '../src/field-root';
+import { ChangeDetectionStrategy, Component, signal } from '@angular/core';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { By } from '@angular/platform-browser';
 
 @Component({
     changeDetection: ChangeDetectionStrategy.Eager,
     imports: [RdxFieldRoot, RdxFieldItem, RdxFieldLabel, RdxFieldControl, RdxFieldDescription],
     template: `
-        <div [invalid]="invalid()" [disabled]="rootDisabled()" rdxFieldRoot>
-            <div [disabled]="itemADisabled()" rdxFieldItem>
+        <div rdxFieldRoot [invalid]="invalid()" [disabled]="rootDisabled()">
+            <div rdxFieldItem [disabled]="itemADisabled()">
                 <label rdxFieldLabel>Option A</label>
                 <input id="ctrl-a" rdxFieldControl />
                 <p rdxFieldDescription>A description</p>
diff --git a/packages/primitives/field/__tests__/field.directive.spec.ts b/packages/primitives/field/__tests__/field.directive.spec.ts
index 8f3f0accf..a125cde0f 100644
--- a/packages/primitives/field/__tests__/field.directive.spec.ts
+++ b/packages/primitives/field/__tests__/field.directive.spec.ts
@@ -1,22 +1,22 @@
-import { ChangeDetectionStrategy, Component, signal } from '@angular/core';
-import { ComponentFixture, TestBed } from '@angular/core/testing';
-import { By } from '@angular/platform-browser';
 import { RdxFieldControl } from '../src/field-control';
 import { RdxFieldDescription } from '../src/field-description';
 import { RdxFieldError } from '../src/field-error';
 import { RdxFieldLabel } from '../src/field-label';
 import { RdxFieldRoot } from '../src/field-root';
+import { ChangeDetectionStrategy, Component, signal } from '@angular/core';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { By } from '@angular/platform-browser';
 
 @Component({
     changeDetection: ChangeDetectionStrategy.Eager,
     template: `
         <div
+            rdxFieldRoot
             [invalid]="invalid"
             [disabled]="disabled"
             [required]="required"
             [dirty]="dirty"
             [touched]="touched"
-            rdxFieldRoot
         >
             <label rdxFieldLabel>Email</label>
             <input id="email" rdxFieldControl />
diff --git a/packages/primitives/field/src/field-control.ts b/packages/primitives/field/src/field-control.ts
index 06f99616d..cee3772e7 100644
--- a/packages/primitives/field/src/field-control.ts
+++ b/packages/primitives/field/src/field-control.ts
@@ -1,6 +1,6 @@
+import { injectFieldRootContext } from './field-root';
 import { afterNextRender, computed, Directive, effect, ElementRef, inject, input } from '@angular/core';
 import { injectId } from '@radix-ng/primitives/core';
-import { injectFieldRootContext } from './field-root';
 
 const attr = (value: boolean) => (value ? '' : undefined);
 
diff --git a/packages/primitives/field/src/field-description.ts b/packages/primitives/field/src/field-description.ts
index 846860019..215ae6079 100644
--- a/packages/primitives/field/src/field-description.ts
+++ b/packages/primitives/field/src/field-description.ts
@@ -1,6 +1,6 @@
+import { injectFieldRootContext } from './field-root';
 import { Directive, effect, input } from '@angular/core';
 import { injectId } from '@radix-ng/primitives/core';
-import { injectFieldRootContext } from './field-root';
 
 const attr = (value: boolean) => (value ? '' : undefined);
 
diff --git a/packages/primitives/field/src/field-error.ts b/packages/primitives/field/src/field-error.ts
index 86146b5f3..6f4348844 100644
--- a/packages/primitives/field/src/field-error.ts
+++ b/packages/primitives/field/src/field-error.ts
@@ -1,6 +1,6 @@
+import { injectFieldRootContext } from './field-root';
 import { Directive, effect, input } from '@angular/core';
 import { injectId } from '@radix-ng/primitives/core';
-import { injectFieldRootContext } from './field-root';
 
 const attr = (value: boolean) => (value ? '' : undefined);
 
diff --git a/packages/primitives/field/src/field-item.ts b/packages/primitives/field/src/field-item.ts
index 9f070bf1d..d5f382b78 100644
--- a/packages/primitives/field/src/field-item.ts
+++ b/packages/primitives/field/src/field-item.ts
@@ -1,6 +1,6 @@
+import { provideFieldRootContext, RdxFieldRoot, RdxFieldRootContext } from './field-root';
 import { booleanAttribute, computed, Directive, inject, input, signal } from '@angular/core';
 import { BooleanInput, injectId } from '@radix-ng/primitives/core';
-import { provideFieldRootContext, RdxFieldRoot, RdxFieldRootContext } from './field-root';
 
 const attr = (value: boolean) => (value ? '' : undefined);
 const addId = (ids: string[], id: string) => (ids.includes(id) ? ids : [...ids, id]);
diff --git a/packages/primitives/field/src/field-label.ts b/packages/primitives/field/src/field-label.ts
index d76b455fa..9f1f6ef93 100644
--- a/packages/primitives/field/src/field-label.ts
+++ b/packages/primitives/field/src/field-label.ts
@@ -1,6 +1,6 @@
+import { injectFieldRootContext } from './field-root';
 import { Directive, input } from '@angular/core';
 import { injectId, rdxCheckLabelElement } from '@radix-ng/primitives/core';
-import { injectFieldRootContext } from './field-root';
 
 const attr = (value: boolean) => (value ? '' : undefined);
 
diff --git a/packages/primitives/field/src/field-root.ts b/packages/primitives/field/src/field-root.ts
index 0360673a8..aa3a4c1de 100644
--- a/packages/primitives/field/src/field-root.ts
+++ b/packages/primitives/field/src/field-root.ts
@@ -6,8 +6,8 @@ import {
     ElementRef,
     inject,
     input,
-    signal,
-    Signal
+    Signal,
+    signal
 } from '@angular/core';
 import { BooleanInput, createContext, injectId, RdxValidationError } from '@radix-ng/primitives/core';
 import { injectFormRootContext, RdxFormFieldRegistration } from '@radix-ng/primitives/form';
diff --git a/packages/primitives/field/stories/field-custom-control.ts b/packages/primitives/field/stories/field-custom-control.ts
index a829d08d7..9db85f529 100644
--- a/packages/primitives/field/stories/field-custom-control.ts
+++ b/packages/primitives/field/stories/field-custom-control.ts
@@ -1,23 +1,23 @@
-import { ChangeDetectionStrategy, Component, computed, signal } from '@angular/core';
 import { RdxFieldControl } from '../src/field-control';
 import { RdxFieldDescription } from '../src/field-description';
 import { RdxFieldError } from '../src/field-error';
 import { RdxFieldLabel } from '../src/field-label';
 import { RdxFieldRoot } from '../src/field-root';
 import { fieldCustomTrigger, fieldDescription, fieldError, fieldLabel } from './field.shared';
+import { ChangeDetectionStrategy, Component, computed, signal } from '@angular/core';
 
 @Component({
     changeDetection: ChangeDetectionStrategy.Eager,
     selector: 'field-custom-control-example',
     imports: [RdxFieldRoot, RdxFieldLabel, RdxFieldControl, RdxFieldDescription, RdxFieldError],
     template: `
-        <div class="flex w-80 flex-col gap-2" [filled]="selected()" [focused]="open()" rdxFieldRoot>
-            <label [class]="labelClass" rdxFieldLabel>Plan</label>
-            <button [class]="triggerClass" (click)="open.update((value) => !value)" type="button" rdxFieldControl>
+        <div class="flex w-80 flex-col gap-2" rdxFieldRoot [filled]="selected()" [focused]="open()">
+            <label rdxFieldLabel [class]="labelClass">Plan</label>
+            <button type="button" rdxFieldControl [class]="triggerClass" (click)="open.update((value) => !value)">
                 {{ selected() ? 'Pro' : 'Choose a plan' }}
             </button>
-            <p [class]="descriptionClass" rdxFieldDescription>Custom controls can pass state into the field root.</p>
-            <p [class]="errorClass" rdxFieldError>Choose a plan.</p>
+            <p rdxFieldDescription [class]="descriptionClass">Custom controls can pass state into the field root.</p>
+            <p rdxFieldError [class]="errorClass">Choose a plan.</p>
         </div>
     `
 })
diff --git a/packages/primitives/field/stories/field-default.ts b/packages/primitives/field/stories/field-default.ts
index 7b33dbc40..ff2f559cd 100644
--- a/packages/primitives/field/stories/field-default.ts
+++ b/packages/primitives/field/stories/field-default.ts
@@ -1,10 +1,10 @@
-import { ChangeDetectionStrategy, Component } from '@angular/core';
 import { RdxFieldControl } from '../src/field-control';
 import { RdxFieldDescription } from '../src/field-description';
 import { RdxFieldError } from '../src/field-error';
 import { RdxFieldLabel } from '../src/field-label';
 import { RdxFieldRoot } from '../src/field-root';
 import { fieldDescription, fieldError, fieldLabel } from './field.shared';
+import { ChangeDetectionStrategy, Component } from '@angular/core';
 
 @Component({
     changeDetection: ChangeDetectionStrategy.Eager,
@@ -12,10 +12,10 @@ import { fieldDescription, fieldError, fieldLabel } from './field.shared';
     imports: [RdxFieldRoot, RdxFieldLabel, RdxFieldControl, RdxFieldDescription, RdxFieldError],
     template: `
         <div class="flex w-80 flex-col gap-2" rdxFieldRoot required>
-            <label [class]="labelClass" rdxFieldLabel>Email</label>
-            <input [class]="inputClass" rdxFieldControl type="email" placeholder="name@example.com" />
-            <p [class]="descriptionClass" rdxFieldDescription>Used for account notifications.</p>
-            <p [class]="errorClass" rdxFieldError>Enter a valid email address.</p>
+            <label rdxFieldLabel [class]="labelClass">Email</label>
+            <input rdxFieldControl type="email" placeholder="name@example.com" [class]="inputClass" />
+            <p rdxFieldDescription [class]="descriptionClass">Used for account notifications.</p>
+            <p rdxFieldError [class]="errorClass">Enter a valid email address.</p>
         </div>
     `
 })
diff --git a/packages/primitives/field/stories/field-invalid.ts b/packages/primitives/field/stories/field-invalid.ts
index 255f5231e..fd451349e 100644
--- a/packages/primitives/field/stories/field-invalid.ts
+++ b/packages/primitives/field/stories/field-invalid.ts
@@ -1,10 +1,10 @@
-import { ChangeDetectionStrategy, Component } from '@angular/core';
 import { RdxFieldControl } from '../src/field-control';
 import { RdxFieldDescription } from '../src/field-description';
 import { RdxFieldError } from '../src/field-error';
 import { RdxFieldLabel } from '../src/field-label';
 import { RdxFieldRoot } from '../src/field-root';
 import { fieldDescription, fieldError, fieldInputInvalid, fieldLabel } from './field.shared';
+import { ChangeDetectionStrategy, Component } from '@angular/core';
 
 @Component({
     changeDetection: ChangeDetectionStrategy.Eager,
@@ -12,16 +12,16 @@ import { fieldDescription, fieldError, fieldInputInvalid, fieldLabel } from './f
     imports: [RdxFieldRoot, RdxFieldLabel, RdxFieldControl, RdxFieldDescription, RdxFieldError],
     template: `
         <div class="flex w-80 flex-col gap-2" rdxFieldRoot invalid required dirty touched>
-            <label [class]="labelClass" rdxFieldLabel>Workspace name</label>
+            <label rdxFieldLabel [class]="labelClass">Workspace name</label>
             <input
-                [class]="inputClass"
                 rdxFieldControl
                 value=""
                 placeholder="acme"
                 aria-errormessage="workspace-error"
+                [class]="inputClass"
             />
-            <p [class]="descriptionClass" rdxFieldDescription>Use lowercase letters and hyphens.</p>
-            <p id="workspace-error" [class]="errorClass" rdxFieldError>Workspace name is required.</p>
+            <p rdxFieldDescription [class]="descriptionClass">Use lowercase letters and hyphens.</p>
+            <p id="workspace-error" rdxFieldError [class]="errorClass">Workspace name is required.</p>
         </div>
     `
 })
diff --git a/packages/primitives/field/stories/field-reactive-forms.ts b/packages/primitives/field/stories/field-reactive-forms.ts
index 30400dc62..25e854e6d 100644
--- a/packages/primitives/field/stories/field-reactive-forms.ts
+++ b/packages/primitives/field/stories/field-reactive-forms.ts
@@ -1,11 +1,11 @@
-import { ChangeDetectionStrategy, Component, inject, signal } from '@angular/core';
-import { FormBuilder, ReactiveFormsModule, Validators } from '@angular/forms';
 import { RdxFieldControl } from '../src/field-control';
 import { RdxFieldDescription } from '../src/field-description';
 import { RdxFieldError } from '../src/field-error';
 import { RdxFieldLabel } from '../src/field-label';
 import { RdxFieldRoot } from '../src/field-root';
 import { fieldDescription, fieldError, fieldInputInvalid, fieldLabel, fieldSubmitButton } from './field.shared';
+import { ChangeDetectionStrategy, Component, inject, signal } from '@angular/core';
+import { FormBuilder, ReactiveFormsModule, Validators } from '@angular/forms';
 
 @Component({
     changeDetection: ChangeDetectionStrategy.Eager,
@@ -15,17 +15,17 @@ import { fieldDescription, fieldError, fieldInputInvalid, fieldLabel, fieldSubmi
         <form class="flex w-80 flex-col gap-3" [formGroup]="form" (ngSubmit)="submit()">
             <div
                 class="flex flex-col gap-2"
+                rdxFieldRoot
+                required
                 [invalid]="email.invalid && (email.touched || submitted())"
                 [dirty]="email.dirty"
                 [touched]="email.touched"
                 [disabled]="email.disabled"
-                rdxFieldRoot
-                required
             >
-                <label [class]="labelClass" rdxFieldLabel>Email</label>
-                <input [class]="inputClass" rdxFieldControl type="email" formControlName="email" />
-                <p [class]="descriptionClass" rdxFieldDescription>Use the email connected to your account.</p>
-                <p [class]="errorClass" rdxFieldError>
+                <label rdxFieldLabel [class]="labelClass">Email</label>
+                <input rdxFieldControl type="email" formControlName="email" [class]="inputClass" />
+                <p rdxFieldDescription [class]="descriptionClass">Use the email connected to your account.</p>
+                <p rdxFieldError [class]="errorClass">
                     @if (email.hasError('required')) {
                         Email is required.
                     } @else {
@@ -34,7 +34,7 @@ import { fieldDescription, fieldError, fieldInputInvalid, fieldLabel, fieldSubmi
                 </p>
             </div>
 
-            <button [class]="buttonClass" type="submit">Submit</button>
+            <button type="submit" [class]="buttonClass">Submit</button>
         </form>
     `
 })
diff --git a/packages/primitives/field/stories/field.stories.ts b/packages/primitives/field/stories/field.stories.ts
index 661a4ea37..26b083149 100644
--- a/packages/primitives/field/stories/field.stories.ts
+++ b/packages/primitives/field/stories/field.stories.ts
@@ -1,4 +1,3 @@
-import { Meta, moduleMetadata, StoryObj } from '@storybook/angular';
 import { tailwindDemoDecorator } from '../../storybook/tailwind-demo';
 import { FieldCustomControlExample } from './field-custom-control';
 import customControlSource from './field-custom-control?raw';
@@ -8,6 +7,7 @@ import { FieldInvalidExample } from './field-invalid';
 import invalidSource from './field-invalid?raw';
 import { FieldReactiveFormsExample } from './field-reactive-forms';
 import reactiveFormsSource from './field-reactive-forms?raw';
+import { Meta, moduleMetadata, StoryObj } from '@storybook/angular';
 
 const source = (code: string) => ({ docs: { source: { code, language: 'typescript' } } });
 const html = String.raw;
diff --git a/packages/primitives/fieldset/__tests__/fieldset.directive.spec.ts b/packages/primitives/fieldset/__tests__/fieldset.directive.spec.ts
index 45b2857d5..1bc47876f 100644
--- a/packages/primitives/fieldset/__tests__/fieldset.directive.spec.ts
+++ b/packages/primitives/fieldset/__tests__/fieldset.directive.spec.ts
@@ -1,12 +1,12 @@
-import { ChangeDetectionStrategy, Component } from '@angular/core';
-import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { RdxFieldsetLegend } from '../src/fieldset-legend';
 import { RdxFieldsetRoot } from '../src/fieldset-root';
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
 
 @Component({
     changeDetection: ChangeDetectionStrategy.Eager,
     template: `
-        <fieldset [disabled]="disabled" rdxFieldsetRoot>
+        <fieldset rdxFieldsetRoot [disabled]="disabled">
             <legend rdxFieldsetLegend>Account details</legend>
             <input name="email" />
         </fieldset>
diff --git a/packages/primitives/fieldset/src/fieldset-legend.ts b/packages/primitives/fieldset/src/fieldset-legend.ts
index 52c7eb92d..b31d6effb 100644
--- a/packages/primitives/fieldset/src/fieldset-legend.ts
+++ b/packages/primitives/fieldset/src/fieldset-legend.ts
@@ -1,5 +1,5 @@
-import { Directive } from '@angular/core';
 import { injectFieldsetRootContext } from './fieldset-root';
+import { Directive } from '@angular/core';
 
 const attr = (value: boolean) => (value ? '' : undefined);
 
diff --git a/packages/primitives/fieldset/stories/fieldset-signup-form.ts b/packages/primitives/fieldset/stories/fieldset-signup-form.ts
index 65cacaa3f..9e97df684 100644
--- a/packages/primitives/fieldset/stories/fieldset-signup-form.ts
+++ b/packages/primitives/fieldset/stories/fieldset-signup-form.ts
@@ -1,9 +1,9 @@
+import { cn, demoButton, demoInput } from '../../storybook/styles';
 import { ChangeDetectionStrategy, Component, inject } from '@angular/core';
 import { FormBuilder, ReactiveFormsModule, Validators } from '@angular/forms';
 import { RdxFieldDescription, RdxFieldError, RdxFieldLabel, RdxFieldRoot } from '@radix-ng/primitives/field';
 import { RdxFieldsetLegend, RdxFieldsetRoot } from '@radix-ng/primitives/fieldset';
 import { RdxInputDirective } from '@radix-ng/primitives/input';
-import { cn, demoButton, demoInput } from '../../storybook/styles';
 
 @Component({
     changeDetection: ChangeDetectionStrategy.Eager,
@@ -20,21 +20,21 @@ import { cn, demoButton, demoInput } from '../../storybook/styles';
     ],
     template: `
         <form class="w-96 space-y-5" [formGroup]="form" (ngSubmit)="submit()">
-            <fieldset class="border-border space-y-4 rounded-md border p-4" [disabled]="submitting" rdxFieldsetRoot>
+            <fieldset class="border-border space-y-4 rounded-md border p-4" rdxFieldsetRoot [disabled]="submitting">
                 <legend class="text-foreground px-1 text-sm font-semibold data-[disabled]:opacity-50" rdxFieldsetLegend>
                     Account details
                 </legend>
 
-                <div class="space-y-2" [invalid]="isInvalid('firstName')" [disabled]="submitting" rdxFieldRoot required>
+                <div class="space-y-2" rdxFieldRoot required [invalid]="isInvalid('firstName')" [disabled]="submitting">
                     <label class="text-foreground text-sm font-medium" rdxFieldLabel>First name</label>
-                    <input [class]="inputClass" rdxInput autocomplete="given-name" formControlName="firstName" />
+                    <input rdxInput autocomplete="given-name" formControlName="firstName" [class]="inputClass" />
                     <p class="text-muted-foreground text-sm" rdxFieldDescription>Used in your workspace profile.</p>
                     <p class="text-destructive text-sm" rdxFieldError>First name is required.</p>
                 </div>
 
-                <div class="space-y-2" [invalid]="isInvalid('email')" [disabled]="submitting" rdxFieldRoot required>
+                <div class="space-y-2" rdxFieldRoot required [invalid]="isInvalid('email')" [disabled]="submitting">
                     <label class="text-foreground text-sm font-medium" rdxFieldLabel>Email</label>
-                    <input [class]="inputClass" rdxInput autocomplete="email" formControlName="email" type="email" />
+                    <input rdxInput autocomplete="email" formControlName="email" type="email" [class]="inputClass" />
                     <p class="text-muted-foreground text-sm" rdxFieldDescription>
                         We'll send the invite confirmation here.
                     </p>
@@ -57,7 +57,7 @@ import { cn, demoButton, demoInput } from '../../storybook/styles';
                 </div>
             </fieldset>
 
-            <button [class]="cn(button.base, button.primary, button.size.md)" type="submit">
+            <button type="submit" [class]="cn(button.base, button.primary, button.size.md)">
                 {{ submitting ? 'Submitting...' : 'Create account' }}
             </button>
 
diff --git a/packages/primitives/fieldset/stories/fieldset.stories.ts b/packages/primitives/fieldset/stories/fieldset.stories.ts
index 5682057ad..3af7830c5 100644
--- a/packages/primitives/fieldset/stories/fieldset.stories.ts
+++ b/packages/primitives/fieldset/stories/fieldset.stories.ts
@@ -1,5 +1,3 @@
-import { ReactiveFormsModule } from '@angular/forms';
-import { Meta, moduleMetadata, StoryObj } from '@storybook/angular';
 import { RdxFieldDescription, RdxFieldError, RdxFieldLabel, RdxFieldRoot } from '../../field';
 import { RdxInputDirective } from '../../input';
 import { demoInput } from '../../storybook/styles';
@@ -8,6 +6,8 @@ import { RdxFieldsetLegend } from '../src/fieldset-legend';
 import { RdxFieldsetRoot } from '../src/fieldset-root';
 import { FieldsetSignupFormExample } from './fieldset-signup-form';
 import signupFormSource from './fieldset-signup-form?raw';
+import { ReactiveFormsModule } from '@angular/forms';
+import { Meta, moduleMetadata, StoryObj } from '@storybook/angular';
 
 const source = (code: string) => ({ docs: { source: { code, language: 'typescript' } } });
 const html = String.raw;
diff --git a/packages/primitives/floating-focus-manager/__tests__/floating-focus-manager.spec.ts b/packages/primitives/floating-focus-manager/__tests__/floating-focus-manager.spec.ts
index 8a53ba945..ed2ac7f0d 100644
--- a/packages/primitives/floating-focus-manager/__tests__/floating-focus-manager.spec.ts
+++ b/packages/primitives/floating-focus-manager/__tests__/floating-focus-manager.spec.ts
@@ -1,9 +1,4 @@
 // @vitest-environment jsdom
-import { ChangeDetectionStrategy, Component, ElementRef, signal, viewChild } from '@angular/core';
-import { TestBed } from '@angular/core/testing';
-import { createFloatingRootContext, provideFloatingRootContext } from '@radix-ng/primitives/core';
-import { FOCUS_GUARD_ATTR } from '@radix-ng/primitives/focus-scope';
-import { afterEach, beforeEach, describe, expect, it } from 'vitest';
 import {
     provideFloatingFocusManagerConfig,
     RdxFloatingFocusManager,
@@ -15,6 +10,11 @@ import {
 } from '../src/floating-focus-manager';
 import { RDX_FLOATING_MARKER } from '../src/mark-others';
 import { createRdxTriggerInteraction, RdxTriggerInteraction } from '../src/trigger-interaction';
+import { ChangeDetectionStrategy, Component, ElementRef, signal, viewChild } from '@angular/core';
+import { TestBed } from '@angular/core/testing';
+import { createFloatingRootContext, provideFloatingRootContext } from '@radix-ng/primitives/core';
+import { FOCUS_GUARD_ATTR } from '@radix-ng/primitives/focus-scope';
+import { afterEach, beforeEach, describe, expect, it } from 'vitest';
 
 const flush = (): Promise<void> => new Promise((resolve) => requestAnimationFrame(() => setTimeout(resolve, 0)));
 
@@ -24,12 +24,12 @@ const flush = (): Promise<void> => new Promise((resolve) => requestAnimationFram
     template: `
         <div
             #scope
+            rdxFloatingFocusManager
             [modal]="modal()"
             [enabled]="enabled()"
             [closeOnFocusOut]="closeOnFocusOut()"
             [initialFocus]="initialFocus()"
             [returnFocus]="returnFocus()"
-            rdxFloatingFocusManager
         >
             <button #a>A</button>
             <button #b>B</button>
@@ -55,11 +55,11 @@ class ManagerHost {
         <button #previous>Previous</button>
         <div
             #scope
+            rdxFloatingFocusManager
             [beforeContentFocusGuardRef]="setBeforeGuard"
             [getInsideElements]="getInsideElements"
             [nextFocusableElement]="next"
             [previousFocusableElement]="previous"
-            rdxFloatingFocusManager
         >
             <button #inside>Inside</button>
         </div>
@@ -304,7 +304,7 @@ describe('RdxFloatingFocusManager (skeleton)', () => {
             imports: [RdxFloatingFocusManager],
             providers: [provideFloatingRootContext(() => context)],
             template: `
-                <div #scope [modal]="true" [enabled]="true" rdxFloatingFocusManager></div>
+                <div #scope rdxFloatingFocusManager [modal]="true" [enabled]="true"></div>
             `
         })
         class OpenHost {
diff --git a/packages/primitives/floating-focus-manager/__tests__/mark-others.spec.ts b/packages/primitives/floating-focus-manager/__tests__/mark-others.spec.ts
index 7900b1b64..9486ee712 100644
--- a/packages/primitives/floating-focus-manager/__tests__/mark-others.spec.ts
+++ b/packages/primitives/floating-focus-manager/__tests__/mark-others.spec.ts
@@ -1,6 +1,6 @@
 // @vitest-environment jsdom
-import { afterEach, describe, expect, it } from 'vitest';
 import { markOthers, RDX_FLOATING_MARKER } from '../src/mark-others';
+import { afterEach, describe, expect, it } from 'vitest';
 
 describe('markOthers', () => {
     const undos: Array<() => void> = [];
diff --git a/packages/primitives/floating-focus-manager/src/floating-focus-manager.ts b/packages/primitives/floating-focus-manager/src/floating-focus-manager.ts
index 77a3293f3..ebcab8e01 100644
--- a/packages/primitives/floating-focus-manager/src/floating-focus-manager.ts
+++ b/packages/primitives/floating-focus-manager/src/floating-focus-manager.ts
@@ -1,3 +1,4 @@
+import { markOthers } from './mark-others';
 import { isPlatformBrowser } from '@angular/common';
 import {
     booleanAttribute,
@@ -38,7 +39,6 @@ import {
     RdxFocusScopeConfigToken,
     useFocusGuardsTabbability
 } from '@radix-ng/primitives/focus-scope';
-import { markOthers } from './mark-others';
 
 /**
  * How a popup was opened / closed (Base UI `InteractionType`). `null` = a **programmatic** open (prefer
diff --git a/packages/primitives/floating-focus-manager/src/trigger-interaction.ts b/packages/primitives/floating-focus-manager/src/trigger-interaction.ts
index 7bff97ef0..f9878a141 100644
--- a/packages/primitives/floating-focus-manager/src/trigger-interaction.ts
+++ b/packages/primitives/floating-focus-manager/src/trigger-interaction.ts
@@ -1,3 +1,4 @@
+import { getInteractionTypeFromEvent, RdxInteractionType } from './floating-focus-manager';
 import { computed, effect, Signal, signal } from '@angular/core';
 import {
     composedContains,
@@ -9,7 +10,6 @@ import {
     getTabbableBeforeElement,
     isOutsideEvent
 } from '@radix-ng/primitives/focus-scope';
-import { getInteractionTypeFromEvent, RdxInteractionType } from './floating-focus-manager';
 
 export interface RdxTriggerInteractionOptions {
     trigger: () => HTMLElement;
diff --git a/packages/primitives/focus-scope/__tests__/focus-guards.spec.ts b/packages/primitives/focus-scope/__tests__/focus-guards.spec.ts
index 17458f8cd..255e9c7f3 100644
--- a/packages/primitives/focus-scope/__tests__/focus-guards.spec.ts
+++ b/packages/primitives/focus-scope/__tests__/focus-guards.spec.ts
@@ -1,7 +1,4 @@
 // @vitest-environment jsdom
-import { ChangeDetectionStrategy, Component, ElementRef, viewChild } from '@angular/core';
-import { TestBed } from '@angular/core/testing';
-import { afterEach, describe, expect, it } from 'vitest';
 import {
     createAriaOwnsAnchor,
     createFocusGuard,
@@ -11,6 +8,9 @@ import {
     isOutsideEvent,
     useFocusGuardsTabbability
 } from '../src/focus-guards';
+import { ChangeDetectionStrategy, Component, ElementRef, viewChild } from '@angular/core';
+import { TestBed } from '@angular/core/testing';
+import { afterEach, describe, expect, it } from 'vitest';
 
 describe('focus guards', () => {
     const appended: Element[] = [];
diff --git a/packages/primitives/focus-scope/__tests__/focus-scope-characterization.spec.ts b/packages/primitives/focus-scope/__tests__/focus-scope-characterization.spec.ts
index b4802e61b..81ca39f92 100644
--- a/packages/primitives/focus-scope/__tests__/focus-scope-characterization.spec.ts
+++ b/packages/primitives/focus-scope/__tests__/focus-scope-characterization.spec.ts
@@ -1,10 +1,10 @@
 // @vitest-environment jsdom
-import { ChangeDetectionStrategy, Component, ElementRef, signal, viewChild } from '@angular/core';
-import { TestBed } from '@angular/core/testing';
-import { afterEach, beforeEach, describe, expect, it } from 'vitest';
 import { RdxFocusScope } from '../src/focus-scope';
 import { createFocusScopesStack, FocusScopeAPI, removeLinks } from '../src/stack';
 import { getTabbableCandidates, getTabbableEdges } from '../src/utils';
+import { ChangeDetectionStrategy, Component, ElementRef, signal, viewChild } from '@angular/core';
+import { TestBed } from '@angular/core/testing';
+import { afterEach, beforeEach, describe, expect, it } from 'vitest';
 
 /**
  * Characterization of the CURRENT `RdxFocusScope` behavior (ADR 0017 Phase 0 / 1a). These lock the
@@ -22,7 +22,7 @@ const flush = (): Promise<void> => new Promise((resolve) => requestAnimationFram
     changeDetection: ChangeDetectionStrategy.Eager,
     imports: [RdxFocusScope],
     template: `
-        <div #scope [loop]="loop()" rdxFocusScope>
+        <div #scope rdxFocusScope [loop]="loop()">
             <button #a>A</button>
             <button #b>B</button>
             <button #c>C</button>
@@ -227,7 +227,7 @@ describe('RdxFocusScope characterization', () => {
                 changeDetection: ChangeDetectionStrategy.Eager,
                 imports: [RdxFocusScope],
                 template: `
-                    <div (mountAutoFocus)="$event.preventDefault()" rdxFocusScope>
+                    <div rdxFocusScope (mountAutoFocus)="$event.preventDefault()">
                         <button #a>A</button>
                     </div>
                 `
diff --git a/packages/primitives/focus-scope/__tests__/tabbable-navigation.spec.ts b/packages/primitives/focus-scope/__tests__/tabbable-navigation.spec.ts
index f384ef538..e10a9b831 100644
--- a/packages/primitives/focus-scope/__tests__/tabbable-navigation.spec.ts
+++ b/packages/primitives/focus-scope/__tests__/tabbable-navigation.spec.ts
@@ -1,6 +1,6 @@
 // @vitest-environment jsdom
-import { afterEach, beforeEach, describe, expect, it } from 'vitest';
 import { getNextTabbable, getPreviousTabbable, getTabbableAfterElement, getTabbableBeforeElement } from '../src/utils';
+import { afterEach, beforeEach, describe, expect, it } from 'vitest';
 
 /**
  * The tab-order navigation helpers (Base UI `tabbable.ts`) walk the whole document `<body>`, so each
diff --git a/packages/primitives/focus-scope/src/focus-guards.ts b/packages/primitives/focus-scope/src/focus-guards.ts
index fe458bacc..50d00fe86 100644
--- a/packages/primitives/focus-scope/src/focus-guards.ts
+++ b/packages/primitives/focus-scope/src/focus-guards.ts
@@ -1,5 +1,5 @@
-import { effect } from '@angular/core';
 import { composedContains, getTabbableCandidates } from './utils';
+import { effect } from '@angular/core';
 
 /** Marks the leading / trailing focus-guard spans (Base UI `data-base-ui-focus-guard`). */
 export const FOCUS_GUARD_ATTR = 'data-rdx-focus-guard';
diff --git a/packages/primitives/focus-scope/src/focus-scope.ts b/packages/primitives/focus-scope/src/focus-scope.ts
index 32eea5a43..b229eb44f 100644
--- a/packages/primitives/focus-scope/src/focus-scope.ts
+++ b/packages/primitives/focus-scope/src/focus-scope.ts
@@ -1,3 +1,16 @@
+import { RdxFocusScopeConfigToken } from './focus-scope.config';
+import { createFocusScopesStack, FocusScopeAPI, removeLinks } from './stack';
+import {
+    AUTOFOCUS_ON_MOUNT,
+    AUTOFOCUS_ON_UNMOUNT,
+    composedContains,
+    EVENT_OPTIONS,
+    focus,
+    focusFirst,
+    getEventTarget,
+    getTabbableCandidates,
+    getTabbableEdges
+} from './utils';
 import {
     afterNextRender,
     booleanAttribute,
@@ -14,19 +27,6 @@ import {
     signal
 } from '@angular/core';
 import { BooleanInput, createContext, getActiveElement } from '@radix-ng/primitives/core';
-import { RdxFocusScopeConfigToken } from './focus-scope.config';
-import { createFocusScopesStack, FocusScopeAPI, removeLinks } from './stack';
-import {
-    AUTOFOCUS_ON_MOUNT,
-    AUTOFOCUS_ON_UNMOUNT,
-    composedContains,
-    EVENT_OPTIONS,
-    focus,
-    focusFirst,
-    getEventTarget,
-    getTabbableCandidates,
-    getTabbableEdges
-} from './utils';
 
 export interface FocusScopeContext {
     loop?: Signal<boolean>;
diff --git a/packages/primitives/focus-scope/stories/focus-scope.stories.ts b/packages/primitives/focus-scope/stories/focus-scope.stories.ts
index c75b7377a..e7c8660c2 100644
--- a/packages/primitives/focus-scope/stories/focus-scope.stories.ts
+++ b/packages/primitives/focus-scope/stories/focus-scope.stories.ts
@@ -1,6 +1,6 @@
-import { Meta, moduleMetadata, StoryObj } from '@storybook/angular';
 import { tailwindDemoDecorator } from '../../storybook/tailwind-demo';
 import { FocusScope, FocusScopeEvents, FocusScopeLoop } from './focus-scope';
+import { Meta, moduleMetadata, StoryObj } from '@storybook/angular';
 
 const html = String.raw;
 
diff --git a/packages/primitives/focus-scope/stories/focus-scope.ts b/packages/primitives/focus-scope/stories/focus-scope.ts
index 35ad46c17..b4547a9a6 100644
--- a/packages/primitives/focus-scope/stories/focus-scope.ts
+++ b/packages/primitives/focus-scope/stories/focus-scope.ts
@@ -1,5 +1,5 @@
-import { ChangeDetectionStrategy, Component, signal } from '@angular/core';
 import { RdxFocusScope } from '../src/focus-scope';
+import { ChangeDetectionStrategy, Component, signal } from '@angular/core';
 
 const demoClasses = 'flex w-xl flex-col gap-4';
 const focusScopeClasses = 'border-border bg-card flex flex-col gap-3 rounded-xl border p-5 shadow-sm';
@@ -22,7 +22,7 @@ const primaryButtonClasses =
                 </p>
             </div>
             <div class="flex items-center gap-3">
-                <button class="${primaryButtonClasses}" (click)="open.set(true)" type="button">Open scope</button>
+                <button class="${primaryButtonClasses}" type="button" (click)="open.set(true)">Open scope</button>
                 <button class="${buttonClasses}" type="button">Outside action</button>
             </div>
             @if (open()) {
@@ -30,7 +30,7 @@ const primaryButtonClasses =
                     <p class="text-sm font-medium">Profile actions</p>
                     <button class="${buttonClasses}" type="button">Edit profile</button>
                     <button class="${buttonClasses}" type="button">Change password</button>
-                    <button class="${buttonClasses}" (click)="open.set(false)" type="button">Close scope</button>
+                    <button class="${buttonClasses}" type="button" (click)="open.set(false)">Close scope</button>
                 </div>
             }
         </section>
@@ -76,19 +76,19 @@ export class FocusScopeLoop {}
                 </p>
             </div>
             <div class="flex items-center gap-3">
-                <button class="${primaryButtonClasses}" (click)="open.set(true)" type="button">Open scope</button>
+                <button class="${primaryButtonClasses}" type="button" (click)="open.set(true)">Open scope</button>
                 <span class="text-muted-foreground text-sm">{{ status() }}</span>
             </div>
             @if (open()) {
                 <div
                     class="${focusScopeClasses}"
+                    rdxFocusScope
                     (mountAutoFocus)="handleAutoFocus('Mount', $event)"
                     (unmountAutoFocus)="handleAutoFocus('Unmount', $event)"
-                    rdxFocusScope
                 >
                     <button class="${buttonClasses}" type="button">Action 1</button>
                     <button class="${buttonClasses}" type="button">Action 2</button>
-                    <button class="${buttonClasses}" (click)="open.set(false)" type="button">Close scope</button>
+                    <button class="${buttonClasses}" type="button" (click)="open.set(false)">Close scope</button>
                 </div>
             }
         </section>
diff --git a/packages/primitives/form/__tests__/form-a11y.spec.ts b/packages/primitives/form/__tests__/form-a11y.spec.ts
index 194fce459..20a011159 100644
--- a/packages/primitives/form/__tests__/form-a11y.spec.ts
+++ b/packages/primitives/form/__tests__/form-a11y.spec.ts
@@ -1,10 +1,10 @@
+import { _importsForm, RdxFormErrors } from '../index';
 import { ChangeDetectionStrategy, Component, signal } from '@angular/core';
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { RdxFieldControl, RdxFieldError, RdxFieldLabel, RdxFieldRoot } from '@radix-ng/primitives/field';
 import { RdxFieldsetLegend, RdxFieldsetRoot } from '@radix-ng/primitives/fieldset';
 import { axe } from 'jest-axe';
 import { beforeEach, describe, expect, it } from 'vitest';
-import { _importsForm, RdxFormErrors } from '../index';
 
 @Component({
     changeDetection: ChangeDetectionStrategy.Eager,
@@ -18,7 +18,7 @@ import { _importsForm, RdxFormErrors } from '../index';
         RdxFieldError
     ],
     template: `
-        <form [errors]="errors()" rdxFormRoot>
+        <form rdxFormRoot [errors]="errors()">
             <fieldset rdxFieldsetRoot>
                 <legend rdxFieldsetLegend>Account</legend>
                 <div name="email" rdxFieldRoot>
diff --git a/packages/primitives/form/__tests__/form-field-integration.spec.ts b/packages/primitives/form/__tests__/form-field-integration.spec.ts
index 553625170..f490ff6ff 100644
--- a/packages/primitives/form/__tests__/form-field-integration.spec.ts
+++ b/packages/primitives/form/__tests__/form-field-integration.spec.ts
@@ -1,15 +1,15 @@
+import { _importsForm, RdxFormErrors } from '../index';
 import { ChangeDetectionStrategy, Component, signal } from '@angular/core';
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { By } from '@angular/platform-browser';
 import { RdxFieldControl, RdxFieldError, RdxFieldRoot, RdxFieldState } from '@radix-ng/primitives/field';
 import { beforeEach, describe, expect, it } from 'vitest';
-import { _importsForm, RdxFormErrors } from '../index';
 
 @Component({
     changeDetection: ChangeDetectionStrategy.Eager,
     imports: [_importsForm, RdxFieldRoot, RdxFieldControl, RdxFieldError],
     template: `
-        <form [errors]="errors()" rdxFormRoot>
+        <form rdxFormRoot [errors]="errors()">
             <div #emailField="rdxFieldRoot" name="email" rdxFieldRoot>
                 <input id="email-input" name="email" rdxFieldControl />
                 <p #emailErr="rdxFieldError" rdxFieldError>{{ emailErr.messages().join(' | ') }}</p>
@@ -18,7 +18,7 @@ import { _importsForm, RdxFormErrors } from '../index';
                 <input id="anon-input" rdxFieldControl />
             </div>
             @if (showOptional()) {
-                <div [invalid]="true" name="optional" rdxFieldRoot>
+                <div name="optional" rdxFieldRoot [invalid]="true">
                     <input id="optional-input" rdxFieldControl />
                 </div>
             }
diff --git a/packages/primitives/form/__tests__/form-state-provider.spec.ts b/packages/primitives/form/__tests__/form-state-provider.spec.ts
index c2110f3cd..2466b5abd 100644
--- a/packages/primitives/form/__tests__/form-state-provider.spec.ts
+++ b/packages/primitives/form/__tests__/form-state-provider.spec.ts
@@ -1,19 +1,19 @@
+import { _importsForm, RdxFormErrors, RdxFormRoot, RdxFormState, RdxFormSubmitEvent } from '../index';
 import { ChangeDetectionStrategy, Component, signal } from '@angular/core';
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { By } from '@angular/platform-browser';
 import { RdxFieldControl, RdxFieldError, RdxFieldRoot } from '@radix-ng/primitives/field';
 import { beforeEach, describe, expect, it } from 'vitest';
-import { _importsForm, RdxFormErrors, RdxFormRoot, RdxFormState, RdxFormSubmitEvent } from '../index';
 
 @Component({
     changeDetection: ChangeDetectionStrategy.Eager,
     imports: [_importsForm, RdxFieldRoot, RdxFieldControl, RdxFieldError],
     template: `
         <form
+            rdxFormRoot
             [errors]="errors()"
             (onFormSubmit)="submitted.set($event)"
             (onClearErrors)="clearedCount.set(clearedCount() + 1)"
-            rdxFormRoot
         >
             <div name="email" rdxFieldRoot>
                 <input id="email-input" name="email" rdxFieldControl />
diff --git a/packages/primitives/form/__tests__/form.spec.ts b/packages/primitives/form/__tests__/form.spec.ts
index a7bf98a58..298cf5955 100644
--- a/packages/primitives/form/__tests__/form.spec.ts
+++ b/packages/primitives/form/__tests__/form.spec.ts
@@ -1,19 +1,19 @@
+import { _importsForm, RdxFormErrors, RdxFormSubmitEvent } from '../index';
 import { ChangeDetectionStrategy, Component, signal } from '@angular/core';
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { By } from '@angular/platform-browser';
 import { RdxFieldControl, RdxFieldError, RdxFieldRoot } from '@radix-ng/primitives/field';
 import { beforeEach, describe, expect, it, vi } from 'vitest';
-import { _importsForm, RdxFormErrors, RdxFormSubmitEvent } from '../index';
 
 @Component({
     changeDetection: ChangeDetectionStrategy.Eager,
     imports: [_importsForm, RdxFieldRoot, RdxFieldControl, RdxFieldError],
     template: `
         <form
+            rdxFormRoot
             [errors]="errors()"
             (onFormSubmit)="submitted.set($event)"
             (onClearErrors)="cleared.set($event)"
-            rdxFormRoot
         >
             <div name="email" rdxFieldRoot>
                 <input id="email-input" name="email" rdxFieldControl />
diff --git a/packages/primitives/form/index.ts b/packages/primitives/form/index.ts
index 33449d982..f93ab24e3 100644
--- a/packages/primitives/form/index.ts
+++ b/packages/primitives/form/index.ts
@@ -1,5 +1,5 @@
-import { NgModule } from '@angular/core';
 import { RdxFormRoot } from './src/form-root';
+import { NgModule } from '@angular/core';
 
 export * from './src/form-root';
 
diff --git a/packages/primitives/form/src/form-root.ts b/packages/primitives/form/src/form-root.ts
index 9e31767b1..e8b4c993c 100644
--- a/packages/primitives/form/src/form-root.ts
+++ b/packages/primitives/form/src/form-root.ts
@@ -7,8 +7,8 @@ import {
     input,
     linkedSignal,
     output,
-    signal,
-    Signal
+    Signal,
+    signal
 } from '@angular/core';
 import { createContext } from '@radix-ng/primitives/core';
 
diff --git a/packages/primitives/form/stories/form-default.ts b/packages/primitives/form/stories/form-default.ts
index 2d3023bf5..000820b3f 100644
--- a/packages/primitives/form/stories/form-default.ts
+++ b/packages/primitives/form/stories/form-default.ts
@@ -1,7 +1,7 @@
-import { ChangeDetectionStrategy, Component, signal } from '@angular/core';
-import { RdxFieldControl, RdxFieldError, RdxFieldLabel, RdxFieldRoot } from '@radix-ng/primitives/field';
 import { RdxFormErrors, RdxFormRoot, RdxFormSubmitEvent } from '../index';
 import { formError, formField, formInput, formLabel, formSubmit } from './form.shared';
+import { ChangeDetectionStrategy, Component, signal } from '@angular/core';
+import { RdxFieldControl, RdxFieldError, RdxFieldLabel, RdxFieldRoot } from '@radix-ng/primitives/field';
 
 /**
  * Server-error mapping with clear-on-edit. The submit handler simulates a backend that rejects a
@@ -15,18 +15,18 @@ import { formError, formField, formInput, formLabel, formSubmit } from './form.s
     template: `
         <form
             class="flex w-80 flex-col gap-4"
+            rdxFormRoot
             [errors]="errors()"
             (onFormSubmit)="onSubmit($event)"
             (onClearErrors)="errors.set($event)"
-            rdxFormRoot
         >
-            <div [class]="field" name="email" rdxFieldRoot>
-                <label [class]="label" rdxFieldLabel>Email</label>
-                <input [class]="input" name="email" type="email" rdxFieldControl placeholder="name@example.com" />
-                <p #emailError="rdxFieldError" [class]="error" rdxFieldError>{{ emailError.messages().join(' ') }}</p>
+            <div name="email" rdxFieldRoot [class]="field">
+                <label rdxFieldLabel [class]="label">Email</label>
+                <input name="email" type="email" rdxFieldControl placeholder="name@example.com" [class]="input" />
+                <p #emailError="rdxFieldError" rdxFieldError [class]="error">{{ emailError.messages().join(' ') }}</p>
             </div>
 
-            <button [class]="submit" type="submit">Create account</button>
+            <button type="submit" [class]="submit">Create account</button>
             @if (success()) {
                 <p class="text-muted-foreground text-sm">Account created for {{ success() }}.</p>
             }
diff --git a/packages/primitives/form/stories/form-native-controls.ts b/packages/primitives/form/stories/form-native-controls.ts
index 940c7a8aa..62bfbad6e 100644
--- a/packages/primitives/form/stories/form-native-controls.ts
+++ b/packages/primitives/form/stories/form-native-controls.ts
@@ -1,7 +1,7 @@
-import { ChangeDetectionStrategy, Component, signal } from '@angular/core';
-import { RdxFieldControl, RdxFieldLabel, RdxFieldRoot } from '@radix-ng/primitives/field';
 import { RdxFormRoot, RdxFormSubmitEvent } from '../index';
 import { formField, formInput, formLabel, formSubmit } from './form.shared';
+import { ChangeDetectionStrategy, Component, signal } from '@angular/core';
+import { RdxFieldControl, RdxFieldLabel, RdxFieldRoot } from '@radix-ng/primitives/field';
 
 /**
  * No `@angular/forms` at all — just native controls. On a valid submit the Form serializes the form's
@@ -12,17 +12,17 @@ import { formField, formInput, formLabel, formSubmit } from './form.shared';
     selector: 'form-native-controls-example',
     imports: [RdxFormRoot, RdxFieldRoot, RdxFieldLabel, RdxFieldControl],
     template: `
-        <form class="flex w-80 flex-col gap-4" (onFormSubmit)="onSubmit($event)" rdxFormRoot>
-            <div [class]="field" name="name" rdxFieldRoot>
-                <label [class]="label" rdxFieldLabel>Name</label>
-                <input [class]="input" name="name" rdxFieldControl value="Ada" />
+        <form class="flex w-80 flex-col gap-4" rdxFormRoot (onFormSubmit)="onSubmit($event)">
+            <div name="name" rdxFieldRoot [class]="field">
+                <label rdxFieldLabel [class]="label">Name</label>
+                <input name="name" rdxFieldControl value="Ada" [class]="input" />
             </div>
-            <div [class]="field" name="role" rdxFieldRoot>
-                <label [class]="label" rdxFieldLabel>Role</label>
-                <input [class]="input" name="role" rdxFieldControl value="Engineer" />
+            <div name="role" rdxFieldRoot [class]="field">
+                <label rdxFieldLabel [class]="label">Role</label>
+                <input name="role" rdxFieldControl value="Engineer" [class]="input" />
             </div>
 
-            <button [class]="submit" type="submit">Submit</button>
+            <button type="submit" [class]="submit">Submit</button>
             @if (values()) {
                 <pre class="bg-muted text-foreground rounded-md p-3 text-xs">{{ values() }}</pre>
             }
diff --git a/packages/primitives/form/stories/form-reactive-forms.ts b/packages/primitives/form/stories/form-reactive-forms.ts
index 59bcc384e..102a058f0 100644
--- a/packages/primitives/form/stories/form-reactive-forms.ts
+++ b/packages/primitives/form/stories/form-reactive-forms.ts
@@ -1,8 +1,8 @@
+import { RdxFormRoot } from '../index';
+import { formError, formField, formInput, formLabel, formSubmit } from './form.shared';
 import { ChangeDetectionStrategy, Component, inject, signal } from '@angular/core';
 import { FormBuilder, ReactiveFormsModule, Validators } from '@angular/forms';
 import { RdxFieldControl, RdxFieldError, RdxFieldLabel, RdxFieldRoot } from '@radix-ng/primitives/field';
-import { RdxFormRoot } from '../index';
-import { formError, formField, formInput, formLabel, formSubmit } from './form.shared';
 
 /**
  * Reactive Forms owns validity; `RdxFormRoot` adds the aggregate `data-*` attributes and submit/reset
@@ -14,19 +14,19 @@ import { formError, formField, formInput, formLabel, formSubmit } from './form.s
     selector: 'form-reactive-forms-example',
     imports: [ReactiveFormsModule, RdxFormRoot, RdxFieldRoot, RdxFieldLabel, RdxFieldControl, RdxFieldError],
     template: `
-        <form class="flex w-80 flex-col gap-4" [formGroup]="form" (ngSubmit)="submit()" rdxFormRoot>
+        <form class="flex w-80 flex-col gap-4" rdxFormRoot [formGroup]="form" (ngSubmit)="submit()">
             <div
+                name="email"
+                rdxFieldRoot
+                required
                 [class]="field"
                 [invalid]="email.invalid && (email.touched || submitted())"
                 [touched]="email.touched"
                 [dirty]="email.dirty"
-                name="email"
-                rdxFieldRoot
-                required
             >
-                <label [class]="label" rdxFieldLabel>Email</label>
-                <input [class]="input" type="email" formControlName="email" rdxFieldControl />
-                <p [class]="error" rdxFieldError>
+                <label rdxFieldLabel [class]="label">Email</label>
+                <input type="email" formControlName="email" rdxFieldControl [class]="input" />
+                <p rdxFieldError [class]="error">
                     @if (email.hasError('required')) {
                         Email is required.
                     } @else {
@@ -35,7 +35,7 @@ import { formError, formField, formInput, formLabel, formSubmit } from './form.s
                 </p>
             </div>
 
-            <button [class]="submitButton" type="submit">Submit</button>
+            <button type="submit" [class]="submitButton">Submit</button>
         </form>
     `
 })
diff --git a/packages/primitives/form/stories/form-reset.ts b/packages/primitives/form/stories/form-reset.ts
index 377482a30..38b5315d4 100644
--- a/packages/primitives/form/stories/form-reset.ts
+++ b/packages/primitives/form/stories/form-reset.ts
@@ -1,7 +1,7 @@
-import { ChangeDetectionStrategy, Component, signal } from '@angular/core';
-import { RdxFieldControl, RdxFieldError, RdxFieldLabel, RdxFieldRoot } from '@radix-ng/primitives/field';
 import { RdxFormErrors, RdxFormRoot, RdxFormSubmitEvent } from '../index';
 import { formError, formField, formInput, formLabel, formReset, formSubmit } from './form.shared';
+import { ChangeDetectionStrategy, Component, signal } from '@angular/core';
+import { RdxFieldControl, RdxFieldError, RdxFieldLabel, RdxFieldRoot } from '@radix-ng/primitives/field';
 
 /**
  * Native `reset` clears external errors and every field's interaction state (touched/dirty/focused),
@@ -15,21 +15,21 @@ import { formError, formField, formInput, formLabel, formReset, formSubmit } fro
     template: `
         <form
             class="flex w-80 flex-col gap-4"
+            rdxFormRoot
             [errors]="errors()"
             (onFormSubmit)="onSubmit($event)"
             (onClearErrors)="errors.set($event)"
             (reset)="verified.set(false)"
-            rdxFormRoot
         >
-            <div [class]="field" name="code" rdxFieldRoot>
-                <label [class]="label" rdxFieldLabel>Access code</label>
-                <input [class]="input" name="code" rdxFieldControl placeholder="1234" />
-                <p #codeError="rdxFieldError" [class]="error" rdxFieldError>{{ codeError.messages().join(' ') }}</p>
+            <div name="code" rdxFieldRoot [class]="field">
+                <label rdxFieldLabel [class]="label">Access code</label>
+                <input name="code" rdxFieldControl placeholder="1234" [class]="input" />
+                <p #codeError="rdxFieldError" rdxFieldError [class]="error">{{ codeError.messages().join(' ') }}</p>
             </div>
 
             <div class="flex gap-2">
-                <button [class]="submit" type="submit">Verify</button>
-                <button [class]="reset" type="reset">Reset</button>
+                <button type="submit" [class]="submit">Verify</button>
+                <button type="reset" [class]="reset">Reset</button>
             </div>
             @if (verified()) {
                 <p class="text-muted-foreground text-sm">Code accepted.</p>
diff --git a/packages/primitives/form/stories/form.stories.ts b/packages/primitives/form/stories/form.stories.ts
index cbb587584..7738362cf 100644
--- a/packages/primitives/form/stories/form.stories.ts
+++ b/packages/primitives/form/stories/form.stories.ts
@@ -1,4 +1,3 @@
-import { Meta, moduleMetadata, StoryObj } from '@storybook/angular';
 import { tailwindDemoDecorator } from '../../storybook/tailwind-demo';
 import { FormDefaultExample } from './form-default';
 import defaultSource from './form-default?raw';
@@ -8,6 +7,7 @@ import { FormReactiveFormsExample } from './form-reactive-forms';
 import reactiveFormsSource from './form-reactive-forms?raw';
 import { FormResetExample } from './form-reset';
 import resetSource from './form-reset?raw';
+import { Meta, moduleMetadata, StoryObj } from '@storybook/angular';
 
 const html = String.raw;
 
diff --git a/packages/primitives/input/__tests__/input.directive.spec.ts b/packages/primitives/input/__tests__/input.directive.spec.ts
index ef9ce2743..ddd4bf7c1 100644
--- a/packages/primitives/input/__tests__/input.directive.spec.ts
+++ b/packages/primitives/input/__tests__/input.directive.spec.ts
@@ -1,13 +1,14 @@
+import { RdxInputDirective, RdxInputValueChangeEvent } from '../src/input.directive';
 import { ChangeDetectionStrategy, Component } from '@angular/core';
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { RdxValidationError } from '@radix-ng/primitives/core';
 import { RdxFieldDescription, RdxFieldError, RdxFieldLabel, RdxFieldRoot } from '@radix-ng/primitives/field';
-import { RdxInputDirective, RdxInputValueChangeEvent } from '../src/input.directive';
 
 @Component({
     changeDetection: ChangeDetectionStrategy.Eager,
     template: `
         <input
+            rdxInput
             [value]="value"
             [defaultValue]="defaultValue"
             [disabled]="disabled"
@@ -24,7 +25,6 @@ import { RdxInputDirective, RdxInputValueChangeEvent } from '../src/input.direct
             (onValueChange)="onValueChange($event)"
             (touchedChange)="touches = touches + 1"
             (touch)="touchEmits = touchEmits + 1"
-            rdxInput
         />
     `,
     imports: [RdxInputDirective]
diff --git a/packages/primitives/input/index.ts b/packages/primitives/input/index.ts
index 1c57a743b..594c3ab90 100644
--- a/packages/primitives/input/index.ts
+++ b/packages/primitives/input/index.ts
@@ -1,3 +1,2 @@
-export * from './src/input.directive';
-
 export type { RdxInputValue, RdxInputValueChangeEvent, RdxInputValueChangeEventDetails } from './src/input.directive';
+export * from './src/input.directive';
diff --git a/packages/primitives/input/stories/input-field.ts b/packages/primitives/input/stories/input-field.ts
index 7748873a7..94ef342ad 100644
--- a/packages/primitives/input/stories/input-field.ts
+++ b/packages/primitives/input/stories/input-field.ts
@@ -1,7 +1,7 @@
-import { ChangeDetectionStrategy, Component } from '@angular/core';
-import { RdxFieldDescription, RdxFieldError, RdxFieldLabel, RdxFieldRoot } from '@radix-ng/primitives/field';
 import { demoInput } from '../../storybook/styles';
 import { RdxInputDirective } from '../src/input.directive';
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { RdxFieldDescription, RdxFieldError, RdxFieldLabel, RdxFieldRoot } from '@radix-ng/primitives/field';
 
 @Component({
     changeDetection: ChangeDetectionStrategy.Eager,
@@ -10,7 +10,7 @@ import { RdxInputDirective } from '../src/input.directive';
     template: `
         <div class="flex w-80 flex-col gap-2" rdxFieldRoot required>
             <label class="text-foreground text-sm font-medium" rdxFieldLabel>Email</label>
-            <input [class]="inputClass" rdxInput type="email" placeholder="name@example.com" />
+            <input rdxInput type="email" placeholder="name@example.com" [class]="inputClass" />
             <p class="text-muted-foreground text-sm" rdxFieldDescription>Used for account notifications.</p>
             <p class="text-destructive text-sm" rdxFieldError>Enter a valid email address.</p>
         </div>
diff --git a/packages/primitives/input/stories/input-reactive-forms.ts b/packages/primitives/input/stories/input-reactive-forms.ts
index dfd63f465..9d7619698 100644
--- a/packages/primitives/input/stories/input-reactive-forms.ts
+++ b/packages/primitives/input/stories/input-reactive-forms.ts
@@ -1,8 +1,8 @@
+import { demoInput } from '../../storybook/styles';
+import { RdxInputDirective } from '../src/input.directive';
 import { ChangeDetectionStrategy, Component } from '@angular/core';
 import { FormControl, ReactiveFormsModule, Validators } from '@angular/forms';
 import { RdxFieldDescription, RdxFieldError, RdxFieldLabel, RdxFieldRoot } from '@radix-ng/primitives/field';
-import { demoInput } from '../../storybook/styles';
-import { RdxInputDirective } from '../src/input.directive';
 
 @Component({
     changeDetection: ChangeDetectionStrategy.Eager,
@@ -11,14 +11,14 @@ import { RdxInputDirective } from '../src/input.directive';
     template: `
         <div
             class="flex w-80 flex-col gap-2"
+            rdxFieldRoot
+            required
             [invalid]="email.invalid && (email.dirty || email.touched)"
             [dirty]="email.dirty"
             [touched]="email.touched"
-            rdxFieldRoot
-            required
         >
             <label class="text-foreground text-sm font-medium" rdxFieldLabel>Email</label>
-            <input [class]="inputClass" [formControl]="email" rdxInput type="email" placeholder="name@example.com" />
+            <input rdxInput type="email" placeholder="name@example.com" [class]="inputClass" [formControl]="email" />
             <p class="text-muted-foreground text-sm" rdxFieldDescription>Use the email connected to your account.</p>
             <p class="text-destructive text-sm" rdxFieldError>Email must be valid.</p>
         </div>
diff --git a/packages/primitives/input/stories/input-signup-form.ts b/packages/primitives/input/stories/input-signup-form.ts
index 3cf436e90..5e9b57138 100644
--- a/packages/primitives/input/stories/input-signup-form.ts
+++ b/packages/primitives/input/stories/input-signup-form.ts
@@ -1,3 +1,5 @@
+import { cn, demoButton, demoCheckbox, demoInput } from '../../storybook/styles';
+import { RdxInputDirective } from '../src/input.directive';
 import { ChangeDetectionStrategy, Component } from '@angular/core';
 import { FormControl, FormGroup, ReactiveFormsModule, Validators } from '@angular/forms';
 import { LucideCheck } from '@lucide/angular';
@@ -9,8 +11,6 @@ import {
     RdxCheckboxRootDirective
 } from '@radix-ng/primitives/checkbox';
 import { RdxFieldDescription, RdxFieldError, RdxFieldLabel, RdxFieldRoot } from '@radix-ng/primitives/field';
-import { cn, demoButton, demoCheckbox, demoInput } from '../../storybook/styles';
-import { RdxInputDirective } from '../src/input.directive';
 
 @Component({
     changeDetection: ChangeDetectionStrategy.Eager,
@@ -34,47 +34,47 @@ import { RdxInputDirective } from '../src/input.directive';
             <div class="grid grid-cols-2 gap-3">
                 <div
                     class="flex flex-col gap-2"
+                    rdxFieldRoot
+                    required
                     [invalid]="firstName.invalid && (firstName.dirty || firstName.touched)"
                     [dirty]="firstName.dirty"
                     [touched]="firstName.touched"
-                    rdxFieldRoot
-                    required
                 >
                     <label class="text-foreground text-sm font-medium" rdxFieldLabel>First name</label>
-                    <input [class]="inputClass" rdxInput autocomplete="given-name" formControlName="firstName" />
+                    <input rdxInput autocomplete="given-name" formControlName="firstName" [class]="inputClass" />
                     <p class="text-destructive text-sm" rdxFieldError>Enter your first name.</p>
                 </div>
 
                 <div
                     class="flex flex-col gap-2"
+                    rdxFieldRoot
+                    required
                     [invalid]="lastName.invalid && (lastName.dirty || lastName.touched)"
                     [dirty]="lastName.dirty"
                     [touched]="lastName.touched"
-                    rdxFieldRoot
-                    required
                 >
                     <label class="text-foreground text-sm font-medium" rdxFieldLabel>Last name</label>
-                    <input [class]="inputClass" rdxInput autocomplete="family-name" formControlName="lastName" />
+                    <input rdxInput autocomplete="family-name" formControlName="lastName" [class]="inputClass" />
                     <p class="text-destructive text-sm" rdxFieldError>Enter your last name.</p>
                 </div>
             </div>
 
             <div
                 class="flex flex-col gap-2"
+                rdxFieldRoot
+                required
                 [invalid]="email.invalid && (email.dirty || email.touched)"
                 [dirty]="email.dirty"
                 [touched]="email.touched"
-                rdxFieldRoot
-                required
             >
                 <label class="text-foreground text-sm font-medium" rdxFieldLabel>Email</label>
                 <input
-                    [class]="inputClass"
                     rdxInput
                     type="email"
                     autocomplete="email"
                     placeholder="name@example.com"
                     formControlName="email"
+                    [class]="inputClass"
                 />
                 <p class="text-muted-foreground text-sm" rdxFieldDescription>
                     Used for product updates and account recovery.
@@ -84,19 +84,19 @@ import { RdxInputDirective } from '../src/input.directive';
 
             <div
                 class="flex flex-col gap-2"
+                rdxFieldRoot
+                required
                 [invalid]="password.invalid && (password.dirty || password.touched)"
                 [dirty]="password.dirty"
                 [touched]="password.touched"
-                rdxFieldRoot
-                required
             >
                 <label class="text-foreground text-sm font-medium" rdxFieldLabel>Password</label>
                 <input
-                    [class]="inputClass"
                     rdxInput
                     type="password"
                     autocomplete="new-password"
                     formControlName="password"
+                    [class]="inputClass"
                 />
                 <p class="text-muted-foreground text-sm" rdxFieldDescription>Use at least 8 characters.</p>
                 <p class="text-destructive text-sm" rdxFieldError>Password must be at least 8 characters.</p>
@@ -104,8 +104,8 @@ import { RdxInputDirective } from '../src/input.directive';
 
             <div class="flex items-start gap-3">
                 <div rdxCheckboxRoot required formControlName="terms">
-                    <button id="signup-terms" [class]="checkbox.button" type="button" rdxCheckboxButton>
-                        <svg [class]="checkbox.indicator" rdxCheckboxIndicator size="16" lucideCheck />
+                    <button id="signup-terms" type="button" rdxCheckboxButton [class]="checkbox.button">
+                        <svg rdxCheckboxIndicator size="16" lucideCheck [class]="checkbox.indicator" />
                     </button>
                     <input rdxCheckboxInput />
                 </div>
@@ -115,7 +115,7 @@ import { RdxInputDirective } from '../src/input.directive';
                 </label>
             </div>
 
-            <button [class]="submitClass" rdxButton type="submit">Create workspace</button>
+            <button rdxButton type="submit" [class]="submitClass">Create workspace</button>
         </form>
     `
 })
diff --git a/packages/primitives/input/stories/input.stories.ts b/packages/primitives/input/stories/input.stories.ts
index c957c5a21..253747167 100644
--- a/packages/primitives/input/stories/input.stories.ts
+++ b/packages/primitives/input/stories/input.stories.ts
@@ -1,5 +1,3 @@
-import { FormsModule, ReactiveFormsModule } from '@angular/forms';
-import { Meta, moduleMetadata, StoryObj } from '@storybook/angular';
 import { demoInput } from '../../storybook/styles';
 import { tailwindDemoDecorator } from '../../storybook/tailwind-demo';
 import { RdxInputDirective } from '../src/input.directive';
@@ -9,6 +7,8 @@ import { InputReactiveFormsExample } from './input-reactive-forms';
 import reactiveFormsSource from './input-reactive-forms?raw';
 import { InputSignupFormExample } from './input-signup-form';
 import signupFormSource from './input-signup-form?raw';
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { Meta, moduleMetadata, StoryObj } from '@storybook/angular';
 
 const source = (code: string) => ({ docs: { source: { code, language: 'typescript' } } });
 const html = String.raw;
diff --git a/packages/primitives/label/__tests__/label-root.directive.spec.ts b/packages/primitives/label/__tests__/label-root.directive.spec.ts
index c2b6badab..a968b9447 100644
--- a/packages/primitives/label/__tests__/label-root.directive.spec.ts
+++ b/packages/primitives/label/__tests__/label-root.directive.spec.ts
@@ -1,8 +1,8 @@
+import { RdxLabelDirective } from '../src/label.directive';
 import { ChangeDetectionStrategy, Component, DebugElement } from '@angular/core';
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { By } from '@angular/platform-browser';
 import { vi } from 'vitest';
-import { RdxLabelDirective } from '../src/label.directive';
 
 /* Explanation:
 
diff --git a/packages/primitives/label/stories/label.stories.ts b/packages/primitives/label/stories/label.stories.ts
index 198bd1954..2fa723d7d 100644
--- a/packages/primitives/label/stories/label.stories.ts
+++ b/packages/primitives/label/stories/label.stories.ts
@@ -1,7 +1,7 @@
-import { CommonModule } from '@angular/common';
-import { Meta, moduleMetadata, StoryObj } from '@storybook/angular';
 import { tailwindDemoDecorator } from '../../storybook/tailwind-demo';
 import { RdxLabelDirective } from '../src/label.directive';
+import { CommonModule } from '@angular/common';
+import { Meta, moduleMetadata, StoryObj } from '@storybook/angular';
 
 export default {
     component: RdxLabelDirective,
diff --git a/packages/primitives/menu/__tests__/menu.spec.ts b/packages/primitives/menu/__tests__/menu.spec.ts
index e77d4f69c..8d340a0d9 100644
--- a/packages/primitives/menu/__tests__/menu.spec.ts
+++ b/packages/primitives/menu/__tests__/menu.spec.ts
@@ -47,15 +47,15 @@ afterEach(() => {
     changeDetection: ChangeDetectionStrategy.Eager,
     imports: [RdxMenuRoot, RdxMenuTrigger, RdxMenuPositioner, RdxMenuPopup, RdxMenuItem],
     template: `
-        <div #root="rdxMenuRoot" [(open)]="open" rdxMenuRoot>
+        <div #root="rdxMenuRoot" rdxMenuRoot [(open)]="open">
             <button rdxMenuTrigger>Open</button>
 
             @if (root.open()) {
                 <div rdxMenuPositioner>
                     <div rdxMenuPopup>
-                        <button (onSelect)="selected.push('a')" rdxMenuItem>Alpha</button>
-                        <button (onSelect)="selected.push('b')" rdxMenuItem>Beta</button>
-                        <button (onSelect)="selected.push('c')" rdxMenuItem>Charlie</button>
+                        <button rdxMenuItem (onSelect)="selected.push('a')">Alpha</button>
+                        <button rdxMenuItem (onSelect)="selected.push('b')">Beta</button>
+                        <button rdxMenuItem (onSelect)="selected.push('c')">Charlie</button>
                     </div>
                 </div>
             }
@@ -71,13 +71,13 @@ class BasicMenuComponent {
     changeDetection: ChangeDetectionStrategy.Eager,
     imports: [RdxMenuRoot, RdxMenuTrigger, RdxMenuPositioner, RdxMenuPopup, RdxMenuItem],
     template: `
-        <div #root="rdxMenuRoot" [(open)]="open" rdxMenuRoot>
+        <div #root="rdxMenuRoot" rdxMenuRoot [(open)]="open">
             <button rdxMenuTrigger>Open</button>
 
             @if (root.open()) {
                 <div rdxMenuPositioner>
                     <div rdxMenuPopup>
-                        <button [closeOnClick]="false" (onSelect)="selected.push('a')" rdxMenuItem>Alpha</button>
+                        <button rdxMenuItem [closeOnClick]="false" (onSelect)="selected.push('a')">Alpha</button>
                     </div>
                 </div>
             }
@@ -93,14 +93,14 @@ class NonClosingItemMenuComponent {
     changeDetection: ChangeDetectionStrategy.Eager,
     imports: [RdxMenuRoot, RdxMenuTrigger, RdxMenuPositioner, RdxMenuPopup, RdxMenuLinkItem],
     template: `
-        <div #root="rdxMenuRoot" [(open)]="open" rdxMenuRoot>
+        <div #root="rdxMenuRoot" rdxMenuRoot [(open)]="open">
             <button rdxMenuTrigger>Open</button>
 
             @if (root.open()) {
                 <div rdxMenuPositioner>
                     <div rdxMenuPopup>
-                        <a (onSelect)="selected.push('alpha')" href="#alpha" rdxMenuLinkItem>Alpha</a>
-                        <a (onSelect)="selected.push('beta')" href="#beta" rdxMenuLinkItem>Beta</a>
+                        <a href="#alpha" rdxMenuLinkItem (onSelect)="selected.push('alpha')">Alpha</a>
+                        <a href="#beta" rdxMenuLinkItem (onSelect)="selected.push('beta')">Beta</a>
                     </div>
                 </div>
             }
@@ -117,7 +117,7 @@ class LinkMenuComponent {
     imports: [RdxMenuRoot, RdxMenuTrigger, RdxMenuPositioner, RdxMenuPopup, RdxMenuItem],
     template: `
         <button data-testid="previous">Previous</button>
-        <div #root="rdxMenuRoot" [(open)]="open" rdxMenuRoot>
+        <div #root="rdxMenuRoot" rdxMenuRoot [(open)]="open">
             <button rdxMenuTrigger>Open</button>
 
             @if (root.open()) {
@@ -158,7 +158,7 @@ class HoverMenuComponent {}
     changeDetection: ChangeDetectionStrategy.Eager,
     imports: [RdxMenuRoot, RdxMenuTrigger, RdxMenuPositioner, RdxMenuPopup, RdxMenuItem],
     template: `
-        <div #root="rdxMenuRoot" [modal]="false" rdxMenuRoot>
+        <div #root="rdxMenuRoot" rdxMenuRoot [modal]="false">
             <button rdxMenuTrigger>Open</button>
 
             @if (root.open()) {
@@ -177,7 +177,7 @@ class NonModalMenuComponent {}
     changeDetection: ChangeDetectionStrategy.Eager,
     imports: [RdxMenuRoot, RdxMenuTrigger, RdxMenuPositioner, RdxMenuPopup, RdxMenuItem],
     template: `
-        <div #root="rdxMenuRoot" [defaultOpen]="true" rdxMenuRoot>
+        <div #root="rdxMenuRoot" rdxMenuRoot [defaultOpen]="true">
             <button rdxMenuTrigger>Open</button>
 
             @if (root.open()) {
@@ -196,7 +196,7 @@ class DefaultOpenMenuComponent {}
     changeDetection: ChangeDetectionStrategy.Eager,
     imports: [RdxMenuRoot, RdxMenuTrigger, RdxMenuPositioner, RdxMenuPopup, RdxMenuItem],
     template: `
-        <div #root="rdxMenuRoot" [disabled]="disabled" rdxMenuRoot>
+        <div #root="rdxMenuRoot" rdxMenuRoot [disabled]="disabled">
             <button rdxMenuTrigger>Open</button>
 
             @if (root.open()) {
@@ -227,15 +227,15 @@ class DisabledRootMenuComponent {
         RdxMenuSubTrigger
     ],
     template: `
-        <div [open]="true" [disabled]="true" rdxMenuRoot>
+        <div rdxMenuRoot [open]="true" [disabled]="true">
             <div rdxMenuPositioner>
                 <div rdxMenuPopup>
-                    <button (onSelect)="selections.push('item')" rdxMenuItem>Item</button>
-                    <button [(checked)]="checked" rdxMenuCheckboxItem>Checkbox</button>
-                    <div [(value)]="radioValue" rdxMenuRadioGroup>
+                    <button rdxMenuItem (onSelect)="selections.push('item')">Item</button>
+                    <button rdxMenuCheckboxItem [(checked)]="checked">Checkbox</button>
+                    <div rdxMenuRadioGroup [(value)]="radioValue">
                         <button value="radio" rdxMenuRadioItem>Radio</button>
                     </div>
-                    <a (onSelect)="selections.push('link')" href="#disabled-link" rdxMenuLinkItem>Link</a>
+                    <a href="#disabled-link" rdxMenuLinkItem (onSelect)="selections.push('link')">Link</a>
 
                     <ng-container #submenu="rdxMenuRoot" rdxMenuRoot>
                         <button rdxMenuSubTrigger>Submenu</button>
@@ -269,7 +269,7 @@ class DisabledRootItemsMenuComponent {
                 <div rdxMenuPositioner>
                     <div rdxMenuPopup>
                         <button rdxMenuItem>Enabled</button>
-                        <button [disabled]="true" rdxMenuItem>Disabled</button>
+                        <button rdxMenuItem [disabled]="true">Disabled</button>
                         <button rdxMenuItem>Last</button>
                     </div>
                 </div>
@@ -297,14 +297,14 @@ class DisabledItemMenuComponent {}
                 <div rdxMenuPositioner>
                     <div rdxMenuPopup>
                         <label
+                            rdxMenuCheckboxItem
                             [(checked)]="bookmarks"
                             (onCheckedChange)="changes.push($event.checked)"
-                            rdxMenuCheckboxItem
                         >
                             <span rdxMenuCheckboxItemIndicator></span>
                             Bookmarks
                         </label>
-                        <label [checked]="'indeterminate'" rdxMenuCheckboxItem>Indeterminate</label>
+                        <label rdxMenuCheckboxItem [checked]="'indeterminate'">Indeterminate</label>
                     </div>
                 </div>
             }
@@ -334,7 +334,7 @@ class CheckboxMenuComponent {
             @if (root.open()) {
                 <div rdxMenuPositioner>
                     <div rdxMenuPopup>
-                        <div [(value)]="selected" (onValueChange)="changes.push($event.value)" rdxMenuRadioGroup>
+                        <div rdxMenuRadioGroup [(value)]="selected" (onValueChange)="changes.push($event.value)">
                             <label value="a" rdxMenuRadioItem>
                                 <span rdxMenuRadioItemIndicator></span>
                                 A
@@ -360,14 +360,14 @@ class RadioMenuComponent {
     imports: [RdxMenuRadioGroup, RdxMenuRadioItem, RdxMenuGroupLabel],
     template: `
         <div
+            rdxMenuRadioGroup
             [defaultValue]="first"
             [disabled]="disabled"
             (onValueChange)="changes.push($event.value)"
-            rdxMenuRadioGroup
         >
             <div rdxMenuGroupLabel>Choices</div>
-            <button [value]="first" rdxMenuRadioItem>First</button>
-            <button [value]="second" rdxMenuRadioItem>Second</button>
+            <button rdxMenuRadioItem [value]="first">First</button>
+            <button rdxMenuRadioItem [value]="second">Second</button>
         </div>
     `
 })
@@ -1290,7 +1290,7 @@ describe('Menu', () => {
                         @if (root.open()) {
                             <div rdxMenuPositioner>
                                 <div rdxMenuPopup>
-                                    <button [closeOnClick]="false" rdxMenuItem>Item</button>
+                                    <button rdxMenuItem [closeOnClick]="false">Item</button>
                                 </div>
                             </div>
                         }
@@ -1369,7 +1369,7 @@ describe('Menu', () => {
                             <div rdxMenuPositioner>
                                 <div rdxMenuPopup>
                                     <div rdxMenuRadioGroup>
-                                        <label [closeOnClick]="true" value="a" rdxMenuRadioItem>A</label>
+                                        <label value="a" rdxMenuRadioItem [closeOnClick]="true">A</label>
                                     </div>
                                 </div>
                             </div>
@@ -1400,7 +1400,7 @@ describe('Menu', () => {
                 changeDetection: ChangeDetectionStrategy.Eager,
                 imports: [RdxMenuRoot, RdxMenuTrigger, RdxMenuPositioner, RdxMenuPopup, RdxMenuItem],
                 template: `
-                    <div #root="rdxMenuRoot" [loopFocus]="loop" rdxMenuRoot>
+                    <div #root="rdxMenuRoot" rdxMenuRoot [loopFocus]="loop">
                         <button rdxMenuTrigger>Open</button>
                         @if (root.open()) {
                             <div rdxMenuPositioner>
@@ -1597,7 +1597,7 @@ describe('Menu', () => {
                             <div rdxMenuPositioner>
                                 <div rdxMenuPopup>
                                     <label rdxMenuCheckboxItem>
-                                        <span [keepMounted]="true" rdxMenuCheckboxItemIndicator></span>
+                                        <span rdxMenuCheckboxItemIndicator [keepMounted]="true"></span>
                                     </label>
                                 </div>
                             </div>
@@ -1639,7 +1639,7 @@ describe('Menu', () => {
                                 <div rdxMenuPopup>
                                     <div rdxMenuRadioGroup>
                                         <label value="a" rdxMenuRadioItem>
-                                            <span [keepMounted]="true" rdxMenuRadioItemIndicator></span>
+                                            <span rdxMenuRadioItemIndicator [keepMounted]="true"></span>
                                         </label>
                                     </div>
                                 </div>
@@ -1750,7 +1750,7 @@ describe('Menu', () => {
                 changeDetection: ChangeDetectionStrategy.Eager,
                 imports: [RdxMenuRoot, RdxMenuTrigger, RdxMenuPositioner, RdxMenuPopup, RdxMenuItem, RdxMenuSubTrigger],
                 template: `
-                    <div #root="rdxMenuRoot" [modal]="false" rdxMenuRoot>
+                    <div #root="rdxMenuRoot" rdxMenuRoot [modal]="false">
                         <button rdxMenuTrigger>Open</button>
                         @if (root.open()) {
                             <div rdxMenuPositioner>
@@ -2041,7 +2041,7 @@ describe('Menu', () => {
                 changeDetection: ChangeDetectionStrategy.Eager,
                 imports: [RdxMenuRoot, RdxMenuTrigger, RdxMenuPositioner, RdxMenuPopup, RdxMenuItem],
                 template: `
-                    <div #root="rdxMenuRoot" [highlightItemOnHover]="false" rdxMenuRoot>
+                    <div #root="rdxMenuRoot" rdxMenuRoot [highlightItemOnHover]="false">
                         <button rdxMenuTrigger>Open</button>
                         @if (root.open()) {
                             <div rdxMenuPositioner>
@@ -2111,7 +2111,7 @@ describe('Menu', () => {
                         @if (root.open()) {
                             <div rdxMenuPositioner>
                                 <div rdxMenuPopup>
-                                    <ng-container #sub="rdxMenuRoot" [closeParentOnEsc]="true" rdxMenuRoot>
+                                    <ng-container #sub="rdxMenuRoot" rdxMenuRoot [closeParentOnEsc]="true">
                                         <button rdxMenuSubTrigger>Sub</button>
                                         @if (sub.open()) {
                                             <div rdxMenuPositioner>
@@ -2256,7 +2256,7 @@ describe('Menu', () => {
                 changeDetection: ChangeDetectionStrategy.Eager,
                 imports: [RdxMenuRoot, RdxMenuTrigger, RdxMenuPositioner, RdxMenuPopup, RdxMenuItem],
                 template: `
-                    <div #root="rdxMenuRoot" [(open)]="open" (onOpenChangeComplete)="events.push($event)" rdxMenuRoot>
+                    <div #root="rdxMenuRoot" rdxMenuRoot [(open)]="open" (onOpenChangeComplete)="events.push($event)">
                         <button rdxMenuTrigger>Open</button>
                         @if (root.open()) {
                             <div rdxMenuPositioner>
@@ -2294,7 +2294,7 @@ describe('Menu', () => {
                 changeDetection: ChangeDetectionStrategy.Eager,
                 imports: [RdxMenuRoot, RdxMenuTrigger, RdxMenuPositioner, RdxMenuPopup, RdxMenuItem],
                 template: `
-                    <div #root="rdxMenuRoot" (onOpenChangeComplete)="events.push($event)" rdxMenuRoot>
+                    <div #root="rdxMenuRoot" rdxMenuRoot (onOpenChangeComplete)="events.push($event)">
                         <button rdxMenuTrigger>Open</button>
                         @if (root.open()) {
                             <div rdxMenuPositioner>
@@ -2327,7 +2327,7 @@ describe('Menu', () => {
                 changeDetection: ChangeDetectionStrategy.Eager,
                 imports: [RdxMenuRoot, RdxMenuTrigger, RdxMenuPositioner, RdxMenuPopup, RdxMenuItem],
                 template: `
-                    <div #root="rdxMenuRoot" (onOpenChange)="events.push($event)" rdxMenuRoot>
+                    <div #root="rdxMenuRoot" rdxMenuRoot (onOpenChange)="events.push($event)">
                         <button rdxMenuTrigger>Open</button>
                         @if (root.open()) {
                             <div rdxMenuPositioner>
@@ -2378,7 +2378,7 @@ describe('Menu', () => {
                 changeDetection: ChangeDetectionStrategy.Eager,
                 imports: [RdxMenuRoot, RdxMenuTrigger, RdxMenuPositioner, RdxMenuPopup, RdxMenuItem],
                 template: `
-                    <div [(open)]="open" (onOpenChange)="handleOpenChange($event)" rdxMenuRoot>
+                    <div rdxMenuRoot [(open)]="open" (onOpenChange)="handleOpenChange($event)">
                         <button rdxMenuTrigger>Open</button>
                         @if (open) {
                             <div rdxMenuPositioner>
@@ -2424,7 +2424,7 @@ describe('Menu', () => {
                 changeDetection: ChangeDetectionStrategy.Eager,
                 imports: [RdxMenuRoot, RdxMenuTrigger, RdxMenuPositioner, RdxMenuPopup, RdxMenuItem],
                 template: `
-                    <div #root="rdxMenuRoot" [(open)]="open" (onOpenChange)="handleOpenChange($event)" rdxMenuRoot>
+                    <div #root="rdxMenuRoot" rdxMenuRoot [(open)]="open" (onOpenChange)="handleOpenChange($event)">
                         <button rdxMenuTrigger>Open</button>
                         @if (open) {
                             <div rdxMenuPositioner>
@@ -2473,7 +2473,7 @@ describe('Menu', () => {
                 changeDetection: ChangeDetectionStrategy.Eager,
                 imports: [RdxMenuRoot, RdxMenuTrigger, RdxMenuPortal, RdxMenuPositioner, RdxMenuPopup, RdxMenuItem],
                 template: `
-                    <div #root="rdxMenuRoot" [(open)]="open" (onOpenChange)="handleOpenChange($event)" rdxMenuRoot>
+                    <div #root="rdxMenuRoot" rdxMenuRoot [(open)]="open" (onOpenChange)="handleOpenChange($event)">
                         <button rdxMenuTrigger>Open</button>
                         <div *rdxMenuPortal rdxMenuPositioner>
                             <div rdxMenuPopup>
diff --git a/packages/primitives/menu/index.ts b/packages/primitives/menu/index.ts
index b06896a09..18470218d 100644
--- a/packages/primitives/menu/index.ts
+++ b/packages/primitives/menu/index.ts
@@ -1,4 +1,3 @@
-import { NgModule } from '@angular/core';
 import { RdxMenuArrow } from './src/menu-arrow';
 import { RdxMenuBackdrop } from './src/menu-backdrop';
 import { RdxMenuCheckboxItem } from './src/menu-checkbox-item';
@@ -18,6 +17,7 @@ import { RdxMenuSeparator } from './src/menu-separator';
 import { RdxMenuSubTrigger } from './src/menu-sub-trigger';
 import { RdxMenuTrigger } from './src/menu-trigger';
 import { RdxMenuViewport } from './src/menu-viewport';
+import { NgModule } from '@angular/core';
 
 export * from './src/menu-arrow';
 export * from './src/menu-backdrop';
diff --git a/packages/primitives/menu/src/menu-arrow.ts b/packages/primitives/menu/src/menu-arrow.ts
index dcab29aa9..2e70db181 100644
--- a/packages/primitives/menu/src/menu-arrow.ts
+++ b/packages/primitives/menu/src/menu-arrow.ts
@@ -1,6 +1,6 @@
+import { injectRdxMenuRootContext } from './menu-root';
 import { computed, Directive, inject } from '@angular/core';
 import { RdxPopperArrow, RdxPopperContentWrapper } from '@radix-ng/primitives/popper';
-import { injectRdxMenuRootContext } from './menu-root';
 
 /**
  * An optional visual arrow connecting the popup to its trigger.
diff --git a/packages/primitives/menu/src/menu-backdrop.ts b/packages/primitives/menu/src/menu-backdrop.ts
index a8fd45a9d..30a9c0d1d 100644
--- a/packages/primitives/menu/src/menu-backdrop.ts
+++ b/packages/primitives/menu/src/menu-backdrop.ts
@@ -1,5 +1,5 @@
-import { Directive } from '@angular/core';
 import { injectRdxMenuRootContext } from './menu-root';
+import { Directive } from '@angular/core';
 
 /**
  * An optional overlay rendered behind the menu popup.
diff --git a/packages/primitives/menu/src/menu-checkbox-item-indicator.ts b/packages/primitives/menu/src/menu-checkbox-item-indicator.ts
index e44ee86d8..2ad9ff205 100644
--- a/packages/primitives/menu/src/menu-checkbox-item-indicator.ts
+++ b/packages/primitives/menu/src/menu-checkbox-item-indicator.ts
@@ -1,7 +1,7 @@
-import { booleanAttribute, computed, Directive, input } from '@angular/core';
-import { BooleanInput } from '@radix-ng/primitives/core';
 import { injectRdxMenuCheckboxItemContext } from './menu-checkbox-item';
 import { isIndeterminate } from './menu-utils';
+import { booleanAttribute, computed, Directive, input } from '@angular/core';
+import { BooleanInput } from '@radix-ng/primitives/core';
 
 /**
  * Renders when the parent checkbox item is checked or indeterminate.
diff --git a/packages/primitives/menu/src/menu-checkbox-item.ts b/packages/primitives/menu/src/menu-checkbox-item.ts
index 1f8e96748..05a679744 100644
--- a/packages/primitives/menu/src/menu-checkbox-item.ts
+++ b/packages/primitives/menu/src/menu-checkbox-item.ts
@@ -1,3 +1,5 @@
+import { injectRdxMenuRootContext } from './menu-root';
+import { CheckedState, isIndeterminate } from './menu-utils';
 import {
     booleanAttribute,
     computed,
@@ -8,8 +10,8 @@ import {
     input,
     model,
     output,
-    signal,
-    Signal
+    Signal,
+    signal
 } from '@angular/core';
 import { RdxCompositeListItem } from '@radix-ng/primitives/composite';
 import {
@@ -18,8 +20,6 @@ import {
     createContext,
     RdxCancelableChangeEventDetails
 } from '@radix-ng/primitives/core';
-import { injectRdxMenuRootContext } from './menu-root';
-import { CheckedState, isIndeterminate } from './menu-utils';
 
 export interface RdxMenuCheckboxItemContext {
     checked: Signal<CheckedState>;
diff --git a/packages/primitives/menu/src/menu-focus.ts b/packages/primitives/menu/src/menu-focus.ts
index 28cd2f595..1ccdbe4b1 100644
--- a/packages/primitives/menu/src/menu-focus.ts
+++ b/packages/primitives/menu/src/menu-focus.ts
@@ -1,4 +1,4 @@
-import { RdxCompositeList, RdxCompositeMetadata, isElementVisible } from '@radix-ng/primitives/composite';
+import { isElementVisible, RdxCompositeList, RdxCompositeMetadata } from '@radix-ng/primitives/composite';
 
 export type RdxMenuCompositeItemType =
     | 'regular-item'
diff --git a/packages/primitives/menu/src/menu-group-label.ts b/packages/primitives/menu/src/menu-group-label.ts
index bab202be5..0eb289c6a 100644
--- a/packages/primitives/menu/src/menu-group-label.ts
+++ b/packages/primitives/menu/src/menu-group-label.ts
@@ -1,6 +1,6 @@
+import { injectRdxMenuGroupContext } from './menu-group-context';
 import { DestroyRef, Directive, inject } from '@angular/core';
 import { injectId } from '@radix-ng/primitives/core';
-import { injectRdxMenuGroupContext } from './menu-group-context';
 
 /**
  * A label for a menu group.
diff --git a/packages/primitives/menu/src/menu-group.ts b/packages/primitives/menu/src/menu-group.ts
index 438c674b3..8c0a8baf1 100644
--- a/packages/primitives/menu/src/menu-group.ts
+++ b/packages/primitives/menu/src/menu-group.ts
@@ -1,5 +1,5 @@
-import { Directive, inject, signal } from '@angular/core';
 import { provideRdxMenuGroupContext, RdxMenuGroupContext } from './menu-group-context';
+import { Directive, inject, signal } from '@angular/core';
 
 const groupContextFactory = (): RdxMenuGroupContext => {
     const instance = inject(RdxMenuGroup);
diff --git a/packages/primitives/menu/src/menu-internal-backdrop.ts b/packages/primitives/menu/src/menu-internal-backdrop.ts
index 344bd863d..fc1bb9b52 100644
--- a/packages/primitives/menu/src/menu-internal-backdrop.ts
+++ b/packages/primitives/menu/src/menu-internal-backdrop.ts
@@ -1,6 +1,6 @@
+import { RdxMenuRootContext } from './menu-root';
 import { Injector } from '@angular/core';
 import { setupInternalBackdrop } from '@radix-ng/primitives/core';
-import { RdxMenuRootContext } from './menu-root';
 
 /** Marker attribute on the menu's internal backdrop element. */
 export const MENU_INTERNAL_BACKDROP_ATTR = 'data-rdx-menu-internal-backdrop';
diff --git a/packages/primitives/menu/src/menu-item.ts b/packages/primitives/menu/src/menu-item.ts
index 6148f3fd1..fcaf26875 100644
--- a/packages/primitives/menu/src/menu-item.ts
+++ b/packages/primitives/menu/src/menu-item.ts
@@ -1,3 +1,4 @@
+import { injectRdxMenuRootContext } from './menu-root';
 import {
     booleanAttribute,
     computed,
@@ -11,7 +12,6 @@ import {
 } from '@angular/core';
 import { RdxCompositeListItem } from '@radix-ng/primitives/composite';
 import { BooleanInput } from '@radix-ng/primitives/core';
-import { injectRdxMenuRootContext } from './menu-root';
 
 /**
  * An individual menu item.
diff --git a/packages/primitives/menu/src/menu-link-item.ts b/packages/primitives/menu/src/menu-link-item.ts
index deae30866..60c670f49 100644
--- a/packages/primitives/menu/src/menu-link-item.ts
+++ b/packages/primitives/menu/src/menu-link-item.ts
@@ -1,3 +1,4 @@
+import { injectRdxMenuRootContext } from './menu-root';
 import {
     booleanAttribute,
     computed,
@@ -11,7 +12,6 @@ import {
 } from '@angular/core';
 import { RdxCompositeListItem } from '@radix-ng/primitives/composite';
 import { BooleanInput } from '@radix-ng/primitives/core';
-import { injectRdxMenuRootContext } from './menu-root';
 
 /**
  * A menu item that renders as a link.
diff --git a/packages/primitives/menu/src/menu-popup.ts b/packages/primitives/menu/src/menu-popup.ts
index e86fbbea6..93cbfc931 100644
--- a/packages/primitives/menu/src/menu-popup.ts
+++ b/packages/primitives/menu/src/menu-popup.ts
@@ -1,3 +1,5 @@
+import { getCompositeMenuItems, getDomMenuItems, getFocusableMenuItems, RdxMenuCompositeItem } from './menu-focus';
+import { injectRdxMenuRootContext, RdxMenuOpenChangeReason } from './menu-root';
 import { computed, DestroyRef, Directive, effect, ElementRef, inject, output } from '@angular/core';
 import { outputFromObservable, outputToObservable } from '@angular/core/rxjs-interop';
 import { RdxCompositeList } from '@radix-ng/primitives/composite';
@@ -14,8 +16,6 @@ import {
 } from '@radix-ng/primitives/floating-focus-manager';
 import { RdxFocusScope } from '@radix-ng/primitives/focus-scope';
 import { RdxPopperContent, RdxPopperContentWrapper } from '@radix-ng/primitives/popper';
-import { getCompositeMenuItems, getDomMenuItems, getFocusableMenuItems, RdxMenuCompositeItem } from './menu-focus';
-import { injectRdxMenuRootContext, RdxMenuOpenChangeReason } from './menu-root';
 
 /**
  * A container for the menu contents.
diff --git a/packages/primitives/menu/src/menu-portal.ts b/packages/primitives/menu/src/menu-portal.ts
index a443c0cba..318c83682 100644
--- a/packages/primitives/menu/src/menu-portal.ts
+++ b/packages/primitives/menu/src/menu-portal.ts
@@ -1,8 +1,8 @@
+import { injectRdxMenuRootContext } from './menu-root';
 import { Directive, isDevMode } from '@angular/core';
 import { rdxDevError } from '@radix-ng/primitives/core';
 import { RdxPortalPresence } from '@radix-ng/primitives/portal';
 import { provideRdxPresenceContext } from '@radix-ng/primitives/presence';
-import { injectRdxMenuRootContext } from './menu-root';
 
 /**
  * Structural directive that teleports the menu popup into a container (default `document.body`) while
diff --git a/packages/primitives/menu/src/menu-positioner.ts b/packages/primitives/menu/src/menu-positioner.ts
index 4adf25e12..e86a07ba8 100644
--- a/packages/primitives/menu/src/menu-positioner.ts
+++ b/packages/primitives/menu/src/menu-positioner.ts
@@ -1,3 +1,5 @@
+import { setupMenuInternalBackdrop } from './menu-internal-backdrop';
+import { injectRdxMenuRootContext } from './menu-root';
 import { afterNextRender, Directive, ElementRef, inject, Injector } from '@angular/core';
 import {
     legacyPopperVars,
@@ -5,8 +7,6 @@ import {
     provideRdxPopperContentWrapper,
     RdxPopperContentWrapper
 } from '@radix-ng/primitives/popper';
-import { setupMenuInternalBackdrop } from './menu-internal-backdrop';
-import { injectRdxMenuRootContext } from './menu-root';
 
 /**
  * Positions the menu against its trigger.
diff --git a/packages/primitives/menu/src/menu-radio-group.ts b/packages/primitives/menu/src/menu-radio-group.ts
index 5e1309d2c..edbfdf6e6 100644
--- a/packages/primitives/menu/src/menu-radio-group.ts
+++ b/packages/primitives/menu/src/menu-radio-group.ts
@@ -1,11 +1,11 @@
-import { booleanAttribute, Directive, effect, inject, input, model, output, signal, Signal } from '@angular/core';
+import { provideRdxMenuGroupContext, RdxMenuGroupContext } from './menu-group-context';
+import { booleanAttribute, Directive, effect, inject, input, model, output, Signal, signal } from '@angular/core';
 import {
     BooleanInput,
     createCancelableChangeEventDetails,
     createContext,
     RdxCancelableChangeEventDetails
 } from '@radix-ng/primitives/core';
-import { provideRdxMenuGroupContext, RdxMenuGroupContext } from './menu-group-context';
 
 export interface RdxMenuRadioGroupContext<T = unknown> {
     value: Signal<T | undefined>;
diff --git a/packages/primitives/menu/src/menu-radio-item-indicator.ts b/packages/primitives/menu/src/menu-radio-item-indicator.ts
index cef9b893f..ee7292c1e 100644
--- a/packages/primitives/menu/src/menu-radio-item-indicator.ts
+++ b/packages/primitives/menu/src/menu-radio-item-indicator.ts
@@ -1,6 +1,6 @@
+import { injectRdxMenuRadioItemContext } from './menu-radio-item';
 import { booleanAttribute, computed, Directive, input } from '@angular/core';
 import { BooleanInput } from '@radix-ng/primitives/core';
-import { injectRdxMenuRadioItemContext } from './menu-radio-item';
 
 /**
  * Renders when the parent radio item is selected.
diff --git a/packages/primitives/menu/src/menu-radio-item.ts b/packages/primitives/menu/src/menu-radio-item.ts
index 3edb300fb..81defafa7 100644
--- a/packages/primitives/menu/src/menu-radio-item.ts
+++ b/packages/primitives/menu/src/menu-radio-item.ts
@@ -1,3 +1,5 @@
+import { injectRdxMenuRadioGroupContext } from './menu-radio-group';
+import { injectRdxMenuRootContext } from './menu-root';
 import {
     booleanAttribute,
     computed,
@@ -7,13 +9,11 @@ import {
     inject,
     input,
     output,
-    signal,
-    Signal
+    Signal,
+    signal
 } from '@angular/core';
 import { RdxCompositeListItem } from '@radix-ng/primitives/composite';
 import { BooleanInput, createContext } from '@radix-ng/primitives/core';
-import { injectRdxMenuRadioGroupContext } from './menu-radio-group';
-import { injectRdxMenuRootContext } from './menu-root';
 
 export interface RdxMenuRadioItemContext {
     checked: Signal<boolean>;
diff --git a/packages/primitives/menu/src/menu-root.ts b/packages/primitives/menu/src/menu-root.ts
index 71702f8ed..62ff8f98c 100644
--- a/packages/primitives/menu/src/menu-root.ts
+++ b/packages/primitives/menu/src/menu-root.ts
@@ -1,3 +1,4 @@
+import { getFocusableMenuItems } from './menu-focus';
 import {
     booleanAttribute,
     computed,
@@ -9,8 +10,8 @@ import {
     input,
     model,
     output,
-    signal,
     Signal,
+    signal,
     untracked
 } from '@angular/core';
 import {
@@ -28,7 +29,6 @@ import {
 import { injectDirection } from '@radix-ng/primitives/direction-provider';
 import { getInteractionTypeFromEvent, RdxInteractionType } from '@radix-ng/primitives/floating-focus-manager';
 import { RdxPopper } from '@radix-ng/primitives/popper';
-import { getFocusableMenuItems } from './menu-focus';
 
 export type RdxMenuTransitionStatus = 'starting' | 'ending' | undefined;
 /**
diff --git a/packages/primitives/menu/src/menu-sub-trigger.ts b/packages/primitives/menu/src/menu-sub-trigger.ts
index ce441ddde..1a56b3a19 100644
--- a/packages/primitives/menu/src/menu-sub-trigger.ts
+++ b/packages/primitives/menu/src/menu-sub-trigger.ts
@@ -1,3 +1,12 @@
+import { getFocusableMenuItems } from './menu-focus';
+import { injectRdxMenuRootContext, RdxMenuRoot } from './menu-root';
+import {
+    applyPointerTunnel,
+    createSafePolygonHandler,
+    hasOpenChildSubmenu,
+    MenuSide,
+    registerOpenSubmenu
+} from './menu-safe-polygon';
 import { isPlatformBrowser } from '@angular/common';
 import {
     booleanAttribute,
@@ -15,15 +24,6 @@ import {
 import { RdxCompositeListItem } from '@radix-ng/primitives/composite';
 import { BooleanInput, NumberInput } from '@radix-ng/primitives/core';
 import { RdxPopperAnchor } from '@radix-ng/primitives/popper';
-import { getFocusableMenuItems } from './menu-focus';
-import { injectRdxMenuRootContext, RdxMenuRoot } from './menu-root';
-import {
-    applyPointerTunnel,
-    createSafePolygonHandler,
-    hasOpenChildSubmenu,
-    MenuSide,
-    registerOpenSubmenu
-} from './menu-safe-polygon';
 
 const numberOrUndefined = (value: NumberInput | undefined) => (value == null ? undefined : numberAttribute(value));
 const submenuRootsByTrigger = new WeakMap<HTMLElement, RdxMenuRoot>();
diff --git a/packages/primitives/menu/src/menu-trigger.ts b/packages/primitives/menu/src/menu-trigger.ts
index f9c0422ee..4d14153bf 100644
--- a/packages/primitives/menu/src/menu-trigger.ts
+++ b/packages/primitives/menu/src/menu-trigger.ts
@@ -1,3 +1,6 @@
+import { getFocusableMenuItems } from './menu-focus';
+import { injectRdxMenuRootContext } from './menu-root';
+import { applyPointerTunnel, createSafePolygonHandler, hasOpenChildSubmenu, MenuSide } from './menu-safe-polygon';
 import { isPlatformBrowser } from '@angular/common';
 import {
     booleanAttribute,
@@ -15,9 +18,6 @@ import {
 import { BooleanInput, NumberInput } from '@radix-ng/primitives/core';
 import { createRdxTriggerInteraction, useTriggerFocusGuards } from '@radix-ng/primitives/floating-focus-manager';
 import { RdxPopperAnchor } from '@radix-ng/primitives/popper';
-import { getFocusableMenuItems } from './menu-focus';
-import { injectRdxMenuRootContext } from './menu-root';
-import { applyPointerTunnel, createSafePolygonHandler, hasOpenChildSubmenu, MenuSide } from './menu-safe-polygon';
 
 const numberOrUndefined = (value: NumberInput | undefined) => (value == null ? undefined : numberAttribute(value));
 
diff --git a/packages/primitives/menu/stories/components/menu-checkbox-items.ts b/packages/primitives/menu/stories/components/menu-checkbox-items.ts
index d3e3ab7b4..961568e21 100644
--- a/packages/primitives/menu/stories/components/menu-checkbox-items.ts
+++ b/packages/primitives/menu/stories/components/menu-checkbox-items.ts
@@ -1,6 +1,6 @@
+import { cn, demoButton, demoMenu } from '../../../storybook/styles';
 import { ChangeDetectionStrategy, Component, signal } from '@angular/core';
 import { RdxMenuModule } from '@radix-ng/primitives/menu';
-import { cn, demoButton, demoMenu } from '../../../storybook/styles';
 
 @Component({
     selector: 'menu-checkbox-items-story',
@@ -8,28 +8,28 @@ import { cn, demoButton, demoMenu } from '../../../storybook/styles';
     changeDetection: ChangeDetectionStrategy.OnPush,
     template: `
         <ng-container #root="rdxMenuRoot" rdxMenuRoot>
-            <button [class]="cn(b.base, b.outline, b.size.md)" rdxMenuTrigger>Options</button>
+            <button rdxMenuTrigger [class]="cn(b.base, b.outline, b.size.md)">Options</button>
 
-            <div *rdxMenuPortal [class]="m.positioner" sideOffset="4" rdxMenuPositioner>
-                <div [class]="m.popup" rdxMenuPopup>
+            <div *rdxMenuPortal sideOffset="4" rdxMenuPositioner [class]="m.positioner">
+                <div rdxMenuPopup [class]="m.popup">
                     <label
+                        rdxMenuCheckboxItem
                         [class]="m.selectableItem"
                         [checked]="checkedState()"
                         (onCheckedChange)="handleSelectAll()"
-                        rdxMenuCheckboxItem
                     >
-                        <span [class]="m.itemIndicator" rdxMenuCheckboxItemIndicator>✓</span>
+                        <span rdxMenuCheckboxItemIndicator [class]="m.itemIndicator">✓</span>
                         Select All
                     </label>
-                    <div [class]="m.separator" rdxMenuSeparator></div>
+                    <div rdxMenuSeparator [class]="m.separator"></div>
                     @for (item of options(); track item) {
                         <label
+                            rdxMenuCheckboxItem
                             [class]="m.selectableItem"
                             [checked]="selectedItems().includes(item)"
                             (onCheckedChange)="handleSelection(item)"
-                            rdxMenuCheckboxItem
                         >
-                            <span [class]="m.itemIndicator" rdxMenuCheckboxItemIndicator>✓</span>
+                            <span rdxMenuCheckboxItemIndicator [class]="m.itemIndicator">✓</span>
                             {{ item }}
                         </label>
                     }
diff --git a/packages/primitives/menu/stories/components/menu-radio-items.ts b/packages/primitives/menu/stories/components/menu-radio-items.ts
index 7bf0cbee5..27884a3c3 100644
--- a/packages/primitives/menu/stories/components/menu-radio-items.ts
+++ b/packages/primitives/menu/stories/components/menu-radio-items.ts
@@ -1,6 +1,6 @@
+import { cn, demoButton, demoMenu } from '../../../storybook/styles';
 import { ChangeDetectionStrategy, Component, signal } from '@angular/core';
 import { RdxMenuModule } from '@radix-ng/primitives/menu';
-import { cn, demoButton, demoMenu } from '../../../storybook/styles';
 
 @Component({
     selector: 'menu-radio-items-story',
@@ -8,17 +8,17 @@ import { cn, demoButton, demoMenu } from '../../../storybook/styles';
     changeDetection: ChangeDetectionStrategy.OnPush,
     template: `
         <ng-container #root="rdxMenuRoot" rdxMenuRoot>
-            <button [class]="cn(b.base, b.outline, b.size.md)" rdxMenuTrigger>View</button>
+            <button rdxMenuTrigger [class]="cn(b.base, b.outline, b.size.md)">View</button>
 
-            <div *rdxMenuPortal [class]="m.positioner" sideOffset="4" rdxMenuPositioner>
-                <div [class]="m.popup" rdxMenuPopup>
-                    <button [class]="m.item" rdxMenuItem>Minimize window</button>
-                    <button [class]="m.item" rdxMenuItem>Zoom</button>
-                    <div [class]="m.separator" rdxMenuSeparator></div>
-                    <div [(value)]="selectedItem" rdxMenuRadioGroup>
+            <div *rdxMenuPortal sideOffset="4" rdxMenuPositioner [class]="m.positioner">
+                <div rdxMenuPopup [class]="m.popup">
+                    <button rdxMenuItem [class]="m.item">Minimize window</button>
+                    <button rdxMenuItem [class]="m.item">Zoom</button>
+                    <div rdxMenuSeparator [class]="m.separator"></div>
+                    <div rdxMenuRadioGroup [(value)]="selectedItem">
                         @for (item of items(); track item) {
-                            <label [class]="m.selectableItem" [value]="item" rdxMenuRadioItem>
-                                <span [class]="m.itemIndicator" rdxMenuRadioItemIndicator>●</span>
+                            <label rdxMenuRadioItem [class]="m.selectableItem" [value]="item">
+                                <span rdxMenuRadioItemIndicator [class]="m.itemIndicator">●</span>
                                 {{ item }}
                             </label>
                         }
diff --git a/packages/primitives/menu/stories/components/menu-with-labels-items.ts b/packages/primitives/menu/stories/components/menu-with-labels-items.ts
index 11037d921..c5ed50cdd 100644
--- a/packages/primitives/menu/stories/components/menu-with-labels-items.ts
+++ b/packages/primitives/menu/stories/components/menu-with-labels-items.ts
@@ -1,6 +1,6 @@
+import { cn, demoButton, demoMenu } from '../../../storybook/styles';
 import { ChangeDetectionStrategy, Component } from '@angular/core';
 import { RdxMenuModule } from '@radix-ng/primitives/menu';
-import { cn, demoButton, demoMenu } from '../../../storybook/styles';
 
 @Component({
     selector: 'menu-with-labels-items-story',
@@ -8,28 +8,28 @@ import { cn, demoButton, demoMenu } from '../../../storybook/styles';
     changeDetection: ChangeDetectionStrategy.OnPush,
     template: `
         <ng-container #root="rdxMenuRoot" rdxMenuRoot>
-            <button [class]="cn(b.base, b.outline, b.size.md)" rdxMenuTrigger>Foods</button>
+            <button rdxMenuTrigger [class]="cn(b.base, b.outline, b.size.md)">Foods</button>
 
-            <div *rdxMenuPortal [class]="m.positioner" sideOffset="4" rdxMenuPositioner>
-                <div [class]="m.popup" rdxMenuPopup>
+            <div *rdxMenuPortal sideOffset="4" rdxMenuPositioner [class]="m.positioner">
+                <div rdxMenuPopup [class]="m.popup">
                     @for (group of foodGroups; track $index) {
                         <div rdxMenuGroup>
                             @if (group.label) {
-                                <span [class]="m.groupLabel" rdxMenuGroupLabel>{{ group.label }}</span>
+                                <span rdxMenuGroupLabel [class]="m.groupLabel">{{ group.label }}</span>
                             }
                             @for (food of group.foods; track food.value) {
                                 <button
+                                    rdxMenuItem
                                     [class]="m.item"
                                     [disabled]="food.disabled ?? false"
                                     (onSelect)="handleSelect(food.value)"
-                                    rdxMenuItem
                                 >
                                     {{ food.label }}
                                 </button>
                             }
                         </div>
                         @if ($index < foodGroups.length - 1) {
-                            <div [class]="m.separator" rdxMenuSeparator></div>
+                            <div rdxMenuSeparator [class]="m.separator"></div>
                         }
                     }
                 </div>
diff --git a/packages/primitives/menu/stories/menu-animated.ts b/packages/primitives/menu/stories/menu-animated.ts
index e2d1e34de..1c1a52474 100644
--- a/packages/primitives/menu/stories/menu-animated.ts
+++ b/packages/primitives/menu/stories/menu-animated.ts
@@ -1,6 +1,6 @@
+import { cn, demoButton, demoMenu } from '../../storybook/styles';
 import { ChangeDetectionStrategy, Component } from '@angular/core';
 import { RdxMenuModule } from '@radix-ng/primitives/menu';
-import { cn, demoButton, demoMenu } from '../../storybook/styles';
 
 @Component({
     selector: 'rdx-menu-animated',
@@ -67,14 +67,14 @@ import { cn, demoButton, demoMenu } from '../../storybook/styles';
     ],
     template: `
         <ng-container #root="rdxMenuRoot" rdxMenuRoot>
-            <button [class]="cn(b.base, b.outline, b.size.md)" rdxMenuTrigger>Animated</button>
+            <button rdxMenuTrigger [class]="cn(b.base, b.outline, b.size.md)">Animated</button>
 
-            <div *rdxMenuPortal [class]="cn(m.positioner, 'animated-positioner')" sideOffset="4" rdxMenuPositioner>
-                <div [class]="cn(m.popup, 'animated-popup')" rdxMenuPopup>
-                    <button [class]="m.item" rdxMenuItem>New Tab</button>
-                    <button [class]="m.item" rdxMenuItem>New Window</button>
-                    <div [class]="m.separator" rdxMenuSeparator></div>
-                    <button [class]="m.item" rdxMenuItem>Print…</button>
+            <div *rdxMenuPortal sideOffset="4" rdxMenuPositioner [class]="cn(m.positioner, 'animated-positioner')">
+                <div rdxMenuPopup [class]="cn(m.popup, 'animated-popup')">
+                    <button rdxMenuItem [class]="m.item">New Tab</button>
+                    <button rdxMenuItem [class]="m.item">New Window</button>
+                    <div rdxMenuSeparator [class]="m.separator"></div>
+                    <button rdxMenuItem [class]="m.item">Print…</button>
                 </div>
             </div>
         </ng-container>
diff --git a/packages/primitives/menu/stories/menu-arrow.ts b/packages/primitives/menu/stories/menu-arrow.ts
index 0019002ad..f8bffb2cd 100644
--- a/packages/primitives/menu/stories/menu-arrow.ts
+++ b/packages/primitives/menu/stories/menu-arrow.ts
@@ -1,6 +1,6 @@
+import { cn, demoButton, demoMenu } from '../../storybook/styles';
 import { ChangeDetectionStrategy, Component } from '@angular/core';
 import { RdxMenuModule } from '@radix-ng/primitives/menu';
-import { cn, demoButton, demoMenu } from '../../storybook/styles';
 
 @Component({
     selector: 'rdx-menu-arrow',
@@ -8,15 +8,15 @@ import { cn, demoButton, demoMenu } from '../../storybook/styles';
     changeDetection: ChangeDetectionStrategy.OnPush,
     template: `
         <ng-container #root="rdxMenuRoot" rdxMenuRoot>
-            <button [class]="cn(b.base, b.outline, b.size.md)" rdxMenuTrigger>With Arrow</button>
+            <button rdxMenuTrigger [class]="cn(b.base, b.outline, b.size.md)">With Arrow</button>
 
-            <div *rdxMenuPortal [class]="m.positioner" sideOffset="8" rdxMenuPositioner>
-                <div [class]="cn(m.popup, 'relative')" rdxMenuPopup>
-                    <span [class]="m.arrow" rdxMenuArrow></span>
-                    <button [class]="m.item" rdxMenuItem>New Tab</button>
-                    <button [class]="m.item" rdxMenuItem>New Window</button>
-                    <div [class]="m.separator" rdxMenuSeparator></div>
-                    <button [class]="m.item" rdxMenuItem>Print…</button>
+            <div *rdxMenuPortal sideOffset="8" rdxMenuPositioner [class]="m.positioner">
+                <div rdxMenuPopup [class]="cn(m.popup, 'relative')">
+                    <span rdxMenuArrow [class]="m.arrow"></span>
+                    <button rdxMenuItem [class]="m.item">New Tab</button>
+                    <button rdxMenuItem [class]="m.item">New Window</button>
+                    <div rdxMenuSeparator [class]="m.separator"></div>
+                    <button rdxMenuItem [class]="m.item">Print…</button>
                 </div>
             </div>
         </ng-container>
diff --git a/packages/primitives/menu/stories/menu-backdrop.ts b/packages/primitives/menu/stories/menu-backdrop.ts
index 67e0d55bb..8241f8984 100644
--- a/packages/primitives/menu/stories/menu-backdrop.ts
+++ b/packages/primitives/menu/stories/menu-backdrop.ts
@@ -1,25 +1,25 @@
+import { cn, demoButton, demoMenu } from '../../storybook/styles';
 import { ChangeDetectionStrategy, Component } from '@angular/core';
 import { RdxMenuModule } from '@radix-ng/primitives/menu';
-import { cn, demoButton, demoMenu } from '../../storybook/styles';
 
 @Component({
     selector: 'rdx-menu-backdrop',
     imports: [RdxMenuModule],
     changeDetection: ChangeDetectionStrategy.OnPush,
     template: `
-        <ng-container #root="rdxMenuRoot" [modal]="true" rdxMenuRoot>
-            <button [class]="cn(b.base, b.outline, b.size.md)" rdxMenuTrigger>With Backdrop</button>
+        <ng-container #root="rdxMenuRoot" rdxMenuRoot [modal]="true">
+            <button rdxMenuTrigger [class]="cn(b.base, b.outline, b.size.md)">With Backdrop</button>
 
             <ng-template rdxMenuPortal>
                 <div class="bg-foreground/10 fixed inset-0" rdxMenuBackdrop></div>
-                <div [class]="m.positioner" sideOffset="4" rdxMenuPositioner>
-                    <div [class]="m.popup" rdxMenuPopup>
-                        <button [class]="m.item" rdxMenuItem>New Tab</button>
-                        <button [class]="m.item" rdxMenuItem>New Window</button>
-                        <div [class]="m.separator" rdxMenuSeparator></div>
-                        <button [class]="m.item" [disabled]="true" rdxMenuItem>New Private Window</button>
-                        <div [class]="m.separator" rdxMenuSeparator></div>
-                        <button [class]="m.item" rdxMenuItem>Print…</button>
+                <div sideOffset="4" rdxMenuPositioner [class]="m.positioner">
+                    <div rdxMenuPopup [class]="m.popup">
+                        <button rdxMenuItem [class]="m.item">New Tab</button>
+                        <button rdxMenuItem [class]="m.item">New Window</button>
+                        <div rdxMenuSeparator [class]="m.separator"></div>
+                        <button rdxMenuItem [class]="m.item" [disabled]="true">New Private Window</button>
+                        <div rdxMenuSeparator [class]="m.separator"></div>
+                        <button rdxMenuItem [class]="m.item">Print…</button>
                     </div>
                 </div>
             </ng-template>
diff --git a/packages/primitives/menu/stories/menu-default.ts b/packages/primitives/menu/stories/menu-default.ts
index e34e964bd..0346c2c82 100644
--- a/packages/primitives/menu/stories/menu-default.ts
+++ b/packages/primitives/menu/stories/menu-default.ts
@@ -1,6 +1,6 @@
+import { cn, demoButton, demoMenu } from '../../storybook/styles';
 import { ChangeDetectionStrategy, Component } from '@angular/core';
 import { RdxMenuModule } from '@radix-ng/primitives/menu';
-import { cn, demoButton, demoMenu } from '../../storybook/styles';
 
 @Component({
     selector: 'rdx-menu-default',
@@ -8,16 +8,16 @@ import { cn, demoButton, demoMenu } from '../../storybook/styles';
     changeDetection: ChangeDetectionStrategy.OnPush,
     template: `
         <ng-container #root="rdxMenuRoot" rdxMenuRoot>
-            <button [class]="cn(b.base, b.outline, b.size.md)" rdxMenuTrigger>File</button>
+            <button rdxMenuTrigger [class]="cn(b.base, b.outline, b.size.md)">File</button>
 
-            <div *rdxMenuPortal [class]="m.positioner" sideOffset="4" rdxMenuPositioner>
-                <div [class]="m.popup" rdxMenuPopup>
-                    <button [class]="m.item" rdxMenuItem>New Tab</button>
-                    <button [class]="m.item" rdxMenuItem>New Window</button>
-                    <button [class]="m.item" [disabled]="true" rdxMenuItem>New Private Window</button>
-                    <div [class]="m.separator" rdxMenuSeparator></div>
-                    <button [class]="m.item" rdxMenuItem>Save Page As…</button>
-                    <button [class]="m.item" rdxMenuItem>Print…</button>
+            <div *rdxMenuPortal sideOffset="4" rdxMenuPositioner [class]="m.positioner">
+                <div rdxMenuPopup [class]="m.popup">
+                    <button rdxMenuItem [class]="m.item">New Tab</button>
+                    <button rdxMenuItem [class]="m.item">New Window</button>
+                    <button rdxMenuItem [class]="m.item" [disabled]="true">New Private Window</button>
+                    <div rdxMenuSeparator [class]="m.separator"></div>
+                    <button rdxMenuItem [class]="m.item">Save Page As…</button>
+                    <button rdxMenuItem [class]="m.item">Print…</button>
                 </div>
             </div>
         </ng-container>
diff --git a/packages/primitives/menu/stories/menu-nested-rtl.ts b/packages/primitives/menu/stories/menu-nested-rtl.ts
index b59ea732f..2a03b55b9 100644
--- a/packages/primitives/menu/stories/menu-nested-rtl.ts
+++ b/packages/primitives/menu/stories/menu-nested-rtl.ts
@@ -1,6 +1,6 @@
+import { cn, demoButton, demoMenu } from '../../storybook/styles';
 import { ChangeDetectionStrategy, Component } from '@angular/core';
 import { RdxMenuModule } from '@radix-ng/primitives/menu';
-import { cn, demoButton, demoMenu } from '../../storybook/styles';
 
 /**
  * RTL nested menu: submenus open to the *left* (`side="left"`), so the safe-polygon geometry must
@@ -13,66 +13,66 @@ import { cn, demoButton, demoMenu } from '../../storybook/styles';
     template: `
         <div dir="rtl">
             <ng-container #root="rdxMenuRoot" dir="rtl" rdxMenuRoot>
-                <button [class]="cn(b.base, b.outline, b.size.md)" rdxMenuTrigger>تحرير</button>
+                <button rdxMenuTrigger [class]="cn(b.base, b.outline, b.size.md)">تحرير</button>
 
-                <div *rdxMenuPortal [class]="m.positioner" side="bottom" align="end" sideOffset="4" rdxMenuPositioner>
-                    <div [class]="m.popup" rdxMenuPopup>
-                        <button [class]="m.item" rdxMenuItem>تراجع</button>
-                        <button [class]="m.item" rdxMenuItem>إعادة</button>
-                        <div [class]="m.separator" rdxMenuSeparator></div>
+                <div *rdxMenuPortal side="bottom" align="end" sideOffset="4" rdxMenuPositioner [class]="m.positioner">
+                    <div rdxMenuPopup [class]="m.popup">
+                        <button rdxMenuItem [class]="m.item">تراجع</button>
+                        <button rdxMenuItem [class]="m.item">إعادة</button>
+                        <div rdxMenuSeparator [class]="m.separator"></div>
 
                         <!-- Submenu opens to the left in RTL -->
                         <ng-container #findSub="rdxMenuRoot" rdxMenuRoot>
-                            <button [class]="cn(m.item, 'justify-between')" rdxMenuSubTrigger>
+                            <button rdxMenuSubTrigger [class]="cn(m.item, 'justify-between')">
                                 <span class="text-muted-foreground text-xs">‹</span>
                                 بحث
                             </button>
 
                             <div
                                 *rdxMenuPortal
-                                [class]="m.positioner"
                                 side="left"
                                 align="start"
                                 sideOffset="4"
                                 rdxMenuPositioner
+                                [class]="m.positioner"
                             >
-                                <div [class]="m.popup" rdxMenuPopup>
-                                    <button [class]="m.item" rdxMenuItem>بحث في الويب…</button>
-                                    <button [class]="m.item" rdxMenuItem>بحث…</button>
-                                    <button [class]="m.item" rdxMenuItem>بحث واستبدال…</button>
-                                    <button [class]="m.item" rdxMenuItem>استخدام التحديد للبحث</button>
+                                <div rdxMenuPopup [class]="m.popup">
+                                    <button rdxMenuItem [class]="m.item">بحث في الويب…</button>
+                                    <button rdxMenuItem [class]="m.item">بحث…</button>
+                                    <button rdxMenuItem [class]="m.item">بحث واستبدال…</button>
+                                    <button rdxMenuItem [class]="m.item">استخدام التحديد للبحث</button>
                                 </div>
                             </div>
                         </ng-container>
 
                         <ng-container #spellSub="rdxMenuRoot" rdxMenuRoot>
-                            <button [class]="cn(m.item, 'justify-between')" rdxMenuSubTrigger>
+                            <button rdxMenuSubTrigger [class]="cn(m.item, 'justify-between')">
                                 <span class="text-muted-foreground text-xs">‹</span>
                                 التدقيق الإملائي والنحوي
                             </button>
 
                             <div
                                 *rdxMenuPortal
-                                [class]="m.positioner"
                                 side="left"
                                 align="start"
                                 sideOffset="4"
                                 rdxMenuPositioner
+                                [class]="m.positioner"
                             >
-                                <div [class]="m.popup" rdxMenuPopup>
-                                    <button [class]="m.item" rdxMenuItem>عرض التدقيق الإملائي والنحوي</button>
-                                    <button [class]="m.item" rdxMenuItem>تدقيق المستند الآن</button>
-                                    <div [class]="m.separator" rdxMenuSeparator></div>
-                                    <button [class]="m.item" rdxMenuItem>التدقيق الإملائي أثناء الكتابة</button>
-                                    <button [class]="m.item" [disabled]="true" rdxMenuItem>التدقيق النحوي</button>
+                                <div rdxMenuPopup [class]="m.popup">
+                                    <button rdxMenuItem [class]="m.item">عرض التدقيق الإملائي والنحوي</button>
+                                    <button rdxMenuItem [class]="m.item">تدقيق المستند الآن</button>
+                                    <div rdxMenuSeparator [class]="m.separator"></div>
+                                    <button rdxMenuItem [class]="m.item">التدقيق الإملائي أثناء الكتابة</button>
+                                    <button rdxMenuItem [class]="m.item" [disabled]="true">التدقيق النحوي</button>
                                 </div>
                             </div>
                         </ng-container>
 
-                        <div [class]="m.separator" rdxMenuSeparator></div>
-                        <button [class]="m.item" rdxMenuItem>قص</button>
-                        <button [class]="m.item" rdxMenuItem>نسخ</button>
-                        <button [class]="m.item" rdxMenuItem>لصق</button>
+                        <div rdxMenuSeparator [class]="m.separator"></div>
+                        <button rdxMenuItem [class]="m.item">قص</button>
+                        <button rdxMenuItem [class]="m.item">نسخ</button>
+                        <button rdxMenuItem [class]="m.item">لصق</button>
                     </div>
                 </div>
             </ng-container>
diff --git a/packages/primitives/menu/stories/menu-nested.ts b/packages/primitives/menu/stories/menu-nested.ts
index 5f5fa7c27..222b6ca97 100644
--- a/packages/primitives/menu/stories/menu-nested.ts
+++ b/packages/primitives/menu/stories/menu-nested.ts
@@ -1,6 +1,6 @@
+import { cn, demoButton, demoMenu } from '../../storybook/styles';
 import { ChangeDetectionStrategy, Component } from '@angular/core';
 import { RdxMenuModule } from '@radix-ng/primitives/menu';
-import { cn, demoButton, demoMenu } from '../../storybook/styles';
 
 @Component({
     selector: 'rdx-menu-nested',
@@ -8,67 +8,67 @@ import { cn, demoButton, demoMenu } from '../../storybook/styles';
     changeDetection: ChangeDetectionStrategy.OnPush,
     template: `
         <ng-container #root="rdxMenuRoot" rdxMenuRoot>
-            <button [class]="cn(b.base, b.outline, b.size.md)" rdxMenuTrigger>Edit</button>
+            <button rdxMenuTrigger [class]="cn(b.base, b.outline, b.size.md)">Edit</button>
 
-            <div *rdxMenuPortal [class]="m.positioner" sideOffset="4" rdxMenuPositioner>
-                <div [class]="m.popup" rdxMenuPopup>
-                    <button [class]="m.item" rdxMenuItem>Undo</button>
-                    <button [class]="m.item" rdxMenuItem>Redo</button>
-                    <div [class]="m.separator" rdxMenuSeparator></div>
+            <div *rdxMenuPortal sideOffset="4" rdxMenuPositioner [class]="m.positioner">
+                <div rdxMenuPopup [class]="m.popup">
+                    <button rdxMenuItem [class]="m.item">Undo</button>
+                    <button rdxMenuItem [class]="m.item">Redo</button>
+                    <div rdxMenuSeparator [class]="m.separator"></div>
 
                     <!-- Submenu: inner rdxMenuRoot provides submenu context -->
                     <ng-container #findSub="rdxMenuRoot" rdxMenuRoot>
-                        <button [class]="cn(m.item, 'justify-between')" rdxMenuSubTrigger>
+                        <button rdxMenuSubTrigger [class]="cn(m.item, 'justify-between')">
                             Find
                             <span class="text-muted-foreground text-xs">›</span>
                         </button>
 
                         <div
                             *rdxMenuPortal
-                            [class]="m.positioner"
                             side="right"
                             align="start"
                             sideOffset="4"
                             rdxMenuPositioner
+                            [class]="m.positioner"
                         >
-                            <div [class]="m.popup" rdxMenuPopup>
-                                <button [class]="m.item" rdxMenuItem>Search Web…</button>
-                                <button [class]="m.item" rdxMenuItem>Find…</button>
-                                <button [class]="m.item" rdxMenuItem>Find and Replace…</button>
-                                <button [class]="m.item" rdxMenuItem>Use Selection for Find</button>
+                            <div rdxMenuPopup [class]="m.popup">
+                                <button rdxMenuItem [class]="m.item">Search Web…</button>
+                                <button rdxMenuItem [class]="m.item">Find…</button>
+                                <button rdxMenuItem [class]="m.item">Find and Replace…</button>
+                                <button rdxMenuItem [class]="m.item">Use Selection for Find</button>
                             </div>
                         </div>
                     </ng-container>
 
                     <!-- Second submenu -->
                     <ng-container #spellSub="rdxMenuRoot" rdxMenuRoot>
-                        <button [class]="cn(m.item, 'justify-between')" rdxMenuSubTrigger>
+                        <button rdxMenuSubTrigger [class]="cn(m.item, 'justify-between')">
                             Spelling and Grammar
                             <span class="text-muted-foreground text-xs">›</span>
                         </button>
 
                         <div
                             *rdxMenuPortal
-                            [class]="m.positioner"
                             side="right"
                             align="start"
                             sideOffset="4"
                             rdxMenuPositioner
+                            [class]="m.positioner"
                         >
-                            <div [class]="m.popup" rdxMenuPopup>
-                                <button [class]="m.item" rdxMenuItem>Show Spelling and Grammar</button>
-                                <button [class]="m.item" rdxMenuItem>Check Document Now</button>
-                                <div [class]="m.separator" rdxMenuSeparator></div>
-                                <button [class]="m.item" rdxMenuItem>Check Spelling While Typing</button>
-                                <button [class]="m.item" [disabled]="true" rdxMenuItem>Check Grammar</button>
+                            <div rdxMenuPopup [class]="m.popup">
+                                <button rdxMenuItem [class]="m.item">Show Spelling and Grammar</button>
+                                <button rdxMenuItem [class]="m.item">Check Document Now</button>
+                                <div rdxMenuSeparator [class]="m.separator"></div>
+                                <button rdxMenuItem [class]="m.item">Check Spelling While Typing</button>
+                                <button rdxMenuItem [class]="m.item" [disabled]="true">Check Grammar</button>
                             </div>
                         </div>
                     </ng-container>
 
-                    <div [class]="m.separator" rdxMenuSeparator></div>
-                    <button [class]="m.item" rdxMenuItem>Cut</button>
-                    <button [class]="m.item" rdxMenuItem>Copy</button>
-                    <button [class]="m.item" rdxMenuItem>Paste</button>
+                    <div rdxMenuSeparator [class]="m.separator"></div>
+                    <button rdxMenuItem [class]="m.item">Cut</button>
+                    <button rdxMenuItem [class]="m.item">Copy</button>
+                    <button rdxMenuItem [class]="m.item">Paste</button>
                 </div>
             </div>
         </ng-container>
diff --git a/packages/primitives/menu/stories/menu-viewport.ts b/packages/primitives/menu/stories/menu-viewport.ts
index c6ab9993f..d877d7c89 100644
--- a/packages/primitives/menu/stories/menu-viewport.ts
+++ b/packages/primitives/menu/stories/menu-viewport.ts
@@ -1,6 +1,6 @@
+import { cn, demoButton, demoMenu } from '../../storybook/styles';
 import { ChangeDetectionStrategy, Component, signal } from '@angular/core';
 import { RdxMenuModule } from '@radix-ng/primitives/menu';
-import { cn, demoButton, demoMenu } from '../../storybook/styles';
 
 /**
  * Demonstrates `rdxMenuViewport`: the popup smoothly resizes as its content
@@ -14,32 +14,32 @@ import { cn, demoButton, demoMenu } from '../../storybook/styles';
     changeDetection: ChangeDetectionStrategy.OnPush,
     template: `
         <ng-container #root="rdxMenuRoot" rdxMenuRoot>
-            <button [class]="cn(b.base, b.outline, b.size.md)" rdxMenuTrigger>Settings</button>
+            <button rdxMenuTrigger [class]="cn(b.base, b.outline, b.size.md)">Settings</button>
 
-            <div *rdxMenuPortal [class]="m.positioner" sideOffset="4" rdxMenuPositioner>
+            <div *rdxMenuPortal sideOffset="4" rdxMenuPositioner [class]="m.positioner">
                 <div
+                    rdxMenuPopup
                     [class]="
                         cn(
                             m.popup,
                             '[height:var(--popup-height)] [width:var(--popup-width)] overflow-hidden transition-[width,height] duration-200 ease-out'
                         )
                     "
-                    rdxMenuPopup
                 >
                     <div rdxMenuViewport>
-                        <button [class]="m.item" [closeOnClick]="false" (onSelect)="toggle()" rdxMenuItem>
+                        <button rdxMenuItem [class]="m.item" [closeOnClick]="false" (onSelect)="toggle()">
                             {{ expanded() ? 'Hide advanced' : 'Show advanced' }}
                         </button>
-                        <div [class]="m.separator" rdxMenuSeparator></div>
-                        <button [class]="m.item" rdxMenuItem>Profile</button>
-                        <button [class]="m.item" rdxMenuItem>Billing</button>
+                        <div rdxMenuSeparator [class]="m.separator"></div>
+                        <button rdxMenuItem [class]="m.item">Profile</button>
+                        <button rdxMenuItem [class]="m.item">Billing</button>
 
                         @if (expanded()) {
-                            <div [class]="m.separator" rdxMenuSeparator></div>
-                            <button [class]="m.item" rdxMenuItem>Keyboard shortcuts</button>
-                            <button [class]="m.item" rdxMenuItem>Developer tools</button>
-                            <button [class]="m.item" rdxMenuItem>Feature flags</button>
-                            <button [class]="m.item" rdxMenuItem>API tokens</button>
+                            <div rdxMenuSeparator [class]="m.separator"></div>
+                            <button rdxMenuItem [class]="m.item">Keyboard shortcuts</button>
+                            <button rdxMenuItem [class]="m.item">Developer tools</button>
+                            <button rdxMenuItem [class]="m.item">Feature flags</button>
+                            <button rdxMenuItem [class]="m.item">API tokens</button>
                         }
                     </div>
                 </div>
diff --git a/packages/primitives/menu/stories/menu.stories.ts b/packages/primitives/menu/stories/menu.stories.ts
index 0e2865f43..6c0799196 100644
--- a/packages/primitives/menu/stories/menu.stories.ts
+++ b/packages/primitives/menu/stories/menu.stories.ts
@@ -1,4 +1,3 @@
-import { Meta, moduleMetadata, StoryObj } from '@storybook/angular';
 import { tailwindDemoDecorator } from '../../storybook/tailwind-demo';
 import { MenuCheckboxItemsStory } from './components/menu-checkbox-items';
 import { MenuRadioItemsStory } from './components/menu-radio-items';
@@ -12,11 +11,12 @@ import backdropSource from './menu-backdrop?raw';
 import { RdxMenuDefaultComponent } from './menu-default';
 import defaultSource from './menu-default?raw';
 import { RdxMenuNestedComponent } from './menu-nested';
+import nestedSource from './menu-nested?raw';
 import { RdxMenuNestedRtlComponent } from './menu-nested-rtl';
 import nestedRtlSource from './menu-nested-rtl?raw';
-import nestedSource from './menu-nested?raw';
 import { RdxMenuViewportExampleComponent } from './menu-viewport';
 import viewportSource from './menu-viewport?raw';
+import { Meta, moduleMetadata, StoryObj } from '@storybook/angular';
 
 const html = String.raw;
 
diff --git a/packages/primitives/menubar/__tests__/menubar.spec.ts b/packages/primitives/menubar/__tests__/menubar.spec.ts
index e8507bbb5..9b77ed85f 100644
--- a/packages/primitives/menubar/__tests__/menubar.spec.ts
+++ b/packages/primitives/menubar/__tests__/menubar.spec.ts
@@ -70,7 +70,7 @@ class MenubarHost {}
             </ng-container>
 
             <ng-container #editMenu="rdxMenuRoot" rdxMenuRoot>
-                <button [disabled]="true" rdxMenuTrigger>Edit</button>
+                <button rdxMenuTrigger [disabled]="true">Edit</button>
                 @if (editMenu.open()) {
                     <div rdxMenuPositioner>
                         <div rdxMenuPopup>
diff --git a/packages/primitives/menubar/index.ts b/packages/primitives/menubar/index.ts
index 47fbb458b..afcb0e34c 100644
--- a/packages/primitives/menubar/index.ts
+++ b/packages/primitives/menubar/index.ts
@@ -1,5 +1,5 @@
-import { NgModule } from '@angular/core';
 import { RdxMenubarRoot } from './src/menubar-root';
+import { NgModule } from '@angular/core';
 
 export * from './src/menubar-root';
 
diff --git a/packages/primitives/menubar/src/menubar-root.ts b/packages/primitives/menubar/src/menubar-root.ts
index 808922f28..f39b00ab5 100644
--- a/packages/primitives/menubar/src/menubar-root.ts
+++ b/packages/primitives/menubar/src/menubar-root.ts
@@ -7,8 +7,8 @@ import {
     ElementRef,
     inject,
     input,
-    signal,
-    Signal
+    Signal,
+    signal
 } from '@angular/core';
 import { RdxCompositeList, RdxCompositeRoot } from '@radix-ng/primitives/composite';
 import { BooleanInput, createContext, provideFloatingTree } from '@radix-ng/primitives/core';
diff --git a/packages/primitives/menubar/stories/menubar-default.ts b/packages/primitives/menubar/stories/menubar-default.ts
index 7d6b5f873..34a9a47b9 100644
--- a/packages/primitives/menubar/stories/menubar-default.ts
+++ b/packages/primitives/menubar/stories/menubar-default.ts
@@ -1,51 +1,51 @@
+import { cn, demoMenu, demoMenubar } from '../../storybook/styles';
 import { ChangeDetectionStrategy, Component, signal } from '@angular/core';
 import { LucideCheck, LucideDot } from '@lucide/angular';
 import { RdxMenuModule } from '@radix-ng/primitives/menu';
 import { RdxMenubarRoot } from '@radix-ng/primitives/menubar';
-import { cn, demoMenu, demoMenubar } from '../../storybook/styles';
 
 @Component({
     selector: 'rdx-menubar-default',
     imports: [RdxMenuModule, RdxMenubarRoot, LucideCheck, LucideDot],
     changeDetection: ChangeDetectionStrategy.OnPush,
     template: `
-        <div [class]="mb.root" rdxMenubarRoot>
+        <div rdxMenubarRoot [class]="mb.root">
             <!-- File -->
             <ng-container #fileMenu="rdxMenuRoot" rdxMenuRoot>
-                <button [class]="mb.trigger" rdxMenuTrigger>File</button>
+                <button rdxMenuTrigger [class]="mb.trigger">File</button>
 
-                <div [class]="cn(m.positioner, 'data-[closed]:hidden')" align="start" sideOffset="4" rdxMenuPositioner>
-                    <div [class]="m.popup" rdxMenuPopup>
-                        <button [class]="m.item" rdxMenuItem>
+                <div align="start" sideOffset="4" rdxMenuPositioner [class]="cn(m.positioner, 'data-[closed]:hidden')">
+                    <div rdxMenuPopup [class]="m.popup">
+                        <button rdxMenuItem [class]="m.item">
                             New Tab
                             <span [class]="mb.shortcut">⌘ T</span>
                         </button>
-                        <button [class]="m.item" rdxMenuItem>
+                        <button rdxMenuItem [class]="m.item">
                             New Window
                             <span [class]="mb.shortcut">⌘ N</span>
                         </button>
-                        <button [class]="m.item" [disabled]="true" rdxMenuItem>New Incognito Window</button>
-                        <div [class]="m.separator" rdxMenuSeparator></div>
+                        <button rdxMenuItem [class]="m.item" [disabled]="true">New Incognito Window</button>
+                        <div rdxMenuSeparator [class]="m.separator"></div>
 
                         <!-- Share submenu -->
                         <ng-container #shareSub="rdxMenuRoot" rdxMenuRoot>
-                            <button [class]="cn(m.item, 'justify-between')" rdxMenuSubTrigger>
+                            <button rdxMenuSubTrigger [class]="cn(m.item, 'justify-between')">
                                 Share
                                 <span class="text-muted-foreground text-xs">›</span>
                             </button>
                             @if (shareSub.open()) {
-                                <div [class]="m.positioner" side="right" align="start" sideOffset="4" rdxMenuPositioner>
-                                    <div [class]="m.popup" rdxMenuPopup>
-                                        <button [class]="m.item" rdxMenuItem>Email Link</button>
-                                        <button [class]="m.item" rdxMenuItem>Messages</button>
-                                        <button [class]="m.item" rdxMenuItem>Notes</button>
+                                <div side="right" align="start" sideOffset="4" rdxMenuPositioner [class]="m.positioner">
+                                    <div rdxMenuPopup [class]="m.popup">
+                                        <button rdxMenuItem [class]="m.item">Email Link</button>
+                                        <button rdxMenuItem [class]="m.item">Messages</button>
+                                        <button rdxMenuItem [class]="m.item">Notes</button>
                                     </div>
                                 </div>
                             }
                         </ng-container>
 
-                        <div [class]="m.separator" rdxMenuSeparator></div>
-                        <button [class]="m.item" rdxMenuItem>
+                        <div rdxMenuSeparator [class]="m.separator"></div>
+                        <button rdxMenuItem [class]="m.item">
                             Print…
                             <span [class]="mb.shortcut">⌘ P</span>
                         </button>
@@ -55,28 +55,28 @@ import { cn, demoMenu, demoMenubar } from '../../storybook/styles';
 
             <!-- Edit -->
             <ng-container #editMenu="rdxMenuRoot" rdxMenuRoot>
-                <button [class]="mb.trigger" rdxMenuTrigger>Edit</button>
+                <button rdxMenuTrigger [class]="mb.trigger">Edit</button>
 
-                <div [class]="cn(m.positioner, 'data-[closed]:hidden')" align="start" sideOffset="4" rdxMenuPositioner>
-                    <div [class]="m.popup" rdxMenuPopup>
-                        <button [class]="m.item" rdxMenuItem>
+                <div align="start" sideOffset="4" rdxMenuPositioner [class]="cn(m.positioner, 'data-[closed]:hidden')">
+                    <div rdxMenuPopup [class]="m.popup">
+                        <button rdxMenuItem [class]="m.item">
                             Undo
                             <span [class]="mb.shortcut">⌘ Z</span>
                         </button>
-                        <button [class]="m.item" rdxMenuItem>
+                        <button rdxMenuItem [class]="m.item">
                             Redo
                             <span [class]="mb.shortcut">⇧ ⌘ Z</span>
                         </button>
-                        <div [class]="m.separator" rdxMenuSeparator></div>
-                        <button [class]="m.item" rdxMenuItem>
+                        <div rdxMenuSeparator [class]="m.separator"></div>
+                        <button rdxMenuItem [class]="m.item">
                             Cut
                             <span [class]="mb.shortcut">⌘ X</span>
                         </button>
-                        <button [class]="m.item" rdxMenuItem>
+                        <button rdxMenuItem [class]="m.item">
                             Copy
                             <span [class]="mb.shortcut">⌘ C</span>
                         </button>
-                        <button [class]="m.item" rdxMenuItem>
+                        <button rdxMenuItem [class]="m.item">
                             Paste
                             <span [class]="mb.shortcut">⌘ V</span>
                         </button>
@@ -86,60 +86,60 @@ import { cn, demoMenu, demoMenubar } from '../../storybook/styles';
 
             <!-- View -->
             <ng-container #viewMenu="rdxMenuRoot" rdxMenuRoot>
-                <button [class]="mb.trigger" rdxMenuTrigger>View</button>
+                <button rdxMenuTrigger [class]="mb.trigger">View</button>
 
-                <div [class]="cn(m.positioner, 'data-[closed]:hidden')" align="start" sideOffset="4" rdxMenuPositioner>
-                    <div [class]="m.popup" rdxMenuPopup>
-                        <label [(checked)]="showBookmarks" [class]="m.selectableItem" rdxMenuCheckboxItem>
-                            <span [class]="m.itemIndicator" rdxMenuCheckboxItemIndicator>
-                                <svg [size]="12" lucideCheck></svg>
+                <div align="start" sideOffset="4" rdxMenuPositioner [class]="cn(m.positioner, 'data-[closed]:hidden')">
+                    <div rdxMenuPopup [class]="m.popup">
+                        <label rdxMenuCheckboxItem [class]="m.selectableItem" [(checked)]="showBookmarks">
+                            <span rdxMenuCheckboxItemIndicator [class]="m.itemIndicator">
+                                <svg lucideCheck [size]="12"></svg>
                             </span>
                             Always Show Bookmarks Bar
                         </label>
-                        <label [(checked)]="showFullUrls" [class]="m.selectableItem" rdxMenuCheckboxItem>
-                            <span [class]="m.itemIndicator" rdxMenuCheckboxItemIndicator>
-                                <svg [size]="12" lucideCheck></svg>
+                        <label rdxMenuCheckboxItem [class]="m.selectableItem" [(checked)]="showFullUrls">
+                            <span rdxMenuCheckboxItemIndicator [class]="m.itemIndicator">
+                                <svg lucideCheck [size]="12"></svg>
                             </span>
                             Always Show Full URLs
                         </label>
-                        <div [class]="m.separator" rdxMenuSeparator></div>
-                        <button [class]="m.item" rdxMenuItem>
+                        <div rdxMenuSeparator [class]="m.separator"></div>
+                        <button rdxMenuItem [class]="m.item">
                             Reload
                             <span [class]="mb.shortcut">⌘ R</span>
                         </button>
-                        <button [class]="m.item" [disabled]="true" rdxMenuItem>
+                        <button rdxMenuItem [class]="m.item" [disabled]="true">
                             Force Reload
                             <span [class]="mb.shortcut">⇧ ⌘ R</span>
                         </button>
-                        <div [class]="m.separator" rdxMenuSeparator></div>
-                        <button [class]="m.item" rdxMenuItem>Toggle Fullscreen</button>
+                        <div rdxMenuSeparator [class]="m.separator"></div>
+                        <button rdxMenuItem [class]="m.item">Toggle Fullscreen</button>
                     </div>
                 </div>
             </ng-container>
 
             <!-- Profiles -->
             <ng-container #profilesMenu="rdxMenuRoot" rdxMenuRoot>
-                <button [class]="mb.trigger" rdxMenuTrigger>Profiles</button>
+                <button rdxMenuTrigger [class]="mb.trigger">Profiles</button>
 
-                <div [class]="cn(m.positioner, 'data-[closed]:hidden')" align="start" sideOffset="4" rdxMenuPositioner>
-                    <div [class]="m.popup" rdxMenuPopup>
-                        <div [(value)]="activeProfile" rdxMenuRadioGroup>
-                            <label [class]="m.selectableItem" value="andy" rdxMenuRadioItem>
-                                <span [class]="m.itemIndicator" rdxMenuRadioItemIndicator>
-                                    <svg [size]="10" strokeWidth="5" lucideDot></svg>
+                <div align="start" sideOffset="4" rdxMenuPositioner [class]="cn(m.positioner, 'data-[closed]:hidden')">
+                    <div rdxMenuPopup [class]="m.popup">
+                        <div rdxMenuRadioGroup [(value)]="activeProfile">
+                            <label value="andy" rdxMenuRadioItem [class]="m.selectableItem">
+                                <span rdxMenuRadioItemIndicator [class]="m.itemIndicator">
+                                    <svg strokeWidth="5" lucideDot [size]="10"></svg>
                                 </span>
                                 Andy
                             </label>
-                            <label [class]="m.selectableItem" value="luis" rdxMenuRadioItem>
-                                <span [class]="m.itemIndicator" rdxMenuRadioItemIndicator>
-                                    <svg [size]="10" strokeWidth="5" lucideDot></svg>
+                            <label value="luis" rdxMenuRadioItem [class]="m.selectableItem">
+                                <span rdxMenuRadioItemIndicator [class]="m.itemIndicator">
+                                    <svg strokeWidth="5" lucideDot [size]="10"></svg>
                                 </span>
                                 Luis
                             </label>
                         </div>
-                        <div [class]="m.separator" rdxMenuSeparator></div>
-                        <button [class]="cn(m.item, 'pl-8')" rdxMenuItem>Edit…</button>
-                        <button [class]="cn(m.item, 'pl-8')" rdxMenuItem>Add Profile…</button>
+                        <div rdxMenuSeparator [class]="m.separator"></div>
+                        <button rdxMenuItem [class]="cn(m.item, 'pl-8')">Edit…</button>
+                        <button rdxMenuItem [class]="cn(m.item, 'pl-8')">Add Profile…</button>
                     </div>
                 </div>
             </ng-container>
diff --git a/packages/primitives/menubar/stories/menubar.stories.ts b/packages/primitives/menubar/stories/menubar.stories.ts
index ae72a0da9..08919f3c4 100644
--- a/packages/primitives/menubar/stories/menubar.stories.ts
+++ b/packages/primitives/menubar/stories/menubar.stories.ts
@@ -1,7 +1,7 @@
-import { Meta, moduleMetadata, StoryObj } from '@storybook/angular';
 import { tailwindDemoDecorator } from '../../storybook/tailwind-demo';
 import { RdxMenubarDefaultComponent } from './menubar-default';
 import defaultSource from './menubar-default?raw';
+import { Meta, moduleMetadata, StoryObj } from '@storybook/angular';
 
 const html = String.raw;
 
diff --git a/packages/primitives/meter/__tests__/meter.spec.ts b/packages/primitives/meter/__tests__/meter.spec.ts
index ebd5eb52c..72dde6050 100644
--- a/packages/primitives/meter/__tests__/meter.spec.ts
+++ b/packages/primitives/meter/__tests__/meter.spec.ts
@@ -1,15 +1,18 @@
-import { ChangeDetectionStrategy, Component } from '@angular/core';
-import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { RdxMeterIndicatorDirective } from '../src/meter-indicator.directive';
 import { RdxMeterLabelDirective } from '../src/meter-label.directive';
 import { MeterValueFormatter, RdxMeterRootDirective } from '../src/meter-root.directive';
 import { RdxMeterTrackDirective } from '../src/meter-track.directive';
 import { RdxMeterValueDirective } from '../src/meter-value.directive';
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
 
 @Component({
     changeDetection: ChangeDetectionStrategy.Eager,
     template: `
         <div
+            labelId="storage-label"
+            valueId="storage-value"
+            rdxMeterRoot
             [value]="value"
             [min]="min"
             [max]="max"
@@ -17,9 +20,6 @@ import { RdxMeterValueDirective } from '../src/meter-value.directive';
             [format]="format"
             [aria-valuetext]="ariaValueText"
             [getAriaValueText]="getAriaValueText"
-            labelId="storage-label"
-            valueId="storage-value"
-            rdxMeterRoot
         >
             <span rdxMeterLabel>Storage</span>
             <span rdxMeterValue></span>
diff --git a/packages/primitives/meter/index.ts b/packages/primitives/meter/index.ts
index d89f2eeb3..faa46232f 100644
--- a/packages/primitives/meter/index.ts
+++ b/packages/primitives/meter/index.ts
@@ -1,18 +1,17 @@
-import { NgModule } from '@angular/core';
 import { RdxMeterIndicatorDirective } from './src/meter-indicator.directive';
 import { RdxMeterLabelDirective } from './src/meter-label.directive';
 import { RdxMeterRootDirective } from './src/meter-root.directive';
 import { RdxMeterTrackDirective } from './src/meter-track.directive';
 import { RdxMeterValueDirective } from './src/meter-value.directive';
+import { NgModule } from '@angular/core';
 
 export * from './src/meter-indicator.directive';
 export * from './src/meter-label.directive';
+export type { MeterProps, MeterValueFormatter } from './src/meter-root.directive';
 export * from './src/meter-root.directive';
 export * from './src/meter-track.directive';
 export * from './src/meter-value.directive';
 
-export type { MeterProps, MeterValueFormatter } from './src/meter-root.directive';
-
 const _imports = [
     RdxMeterRootDirective,
     RdxMeterLabelDirective,
diff --git a/packages/primitives/meter/src/meter-indicator.directive.ts b/packages/primitives/meter/src/meter-indicator.directive.ts
index 972cb218f..3e76951f7 100644
--- a/packages/primitives/meter/src/meter-indicator.directive.ts
+++ b/packages/primitives/meter/src/meter-indicator.directive.ts
@@ -1,5 +1,5 @@
-import { Directive } from '@angular/core';
 import { injectMeterRootContext } from './meter-root.directive';
+import { Directive } from '@angular/core';
 
 /**
  * Displays the visual meter fill.
diff --git a/packages/primitives/meter/src/meter-label.directive.ts b/packages/primitives/meter/src/meter-label.directive.ts
index 1b7181b15..d2a6c15f5 100644
--- a/packages/primitives/meter/src/meter-label.directive.ts
+++ b/packages/primitives/meter/src/meter-label.directive.ts
@@ -1,5 +1,5 @@
-import { Directive } from '@angular/core';
 import { injectMeterRootContext } from './meter-root.directive';
+import { Directive } from '@angular/core';
 
 /**
  * Labels the meter.
diff --git a/packages/primitives/meter/src/meter-track.directive.ts b/packages/primitives/meter/src/meter-track.directive.ts
index 0b02ce9e6..451101dca 100644
--- a/packages/primitives/meter/src/meter-track.directive.ts
+++ b/packages/primitives/meter/src/meter-track.directive.ts
@@ -1,5 +1,5 @@
-import { Directive } from '@angular/core';
 import { injectMeterRootContext } from './meter-root.directive';
+import { Directive } from '@angular/core';
 
 /**
  * Contains the visual meter indicator.
diff --git a/packages/primitives/meter/src/meter-value.directive.ts b/packages/primitives/meter/src/meter-value.directive.ts
index 5ad7e9d65..d79b20290 100644
--- a/packages/primitives/meter/src/meter-value.directive.ts
+++ b/packages/primitives/meter/src/meter-value.directive.ts
@@ -1,5 +1,5 @@
-import { Directive } from '@angular/core';
 import { injectMeterRootContext } from './meter-root.directive';
+import { Directive } from '@angular/core';
 
 /**
  * Displays the formatted meter value.
diff --git a/packages/primitives/meter/stories/meter.stories.ts b/packages/primitives/meter/stories/meter.stories.ts
index cfb0e6f8d..607774c43 100644
--- a/packages/primitives/meter/stories/meter.stories.ts
+++ b/packages/primitives/meter/stories/meter.stories.ts
@@ -1,4 +1,3 @@
-import { Meta, moduleMetadata, StoryObj } from '@storybook/angular';
 import { cn } from '../../storybook/styles';
 import { tailwindDemoDecorator } from '../../storybook/tailwind-demo';
 import { RdxMeterIndicatorDirective } from '../src/meter-indicator.directive';
@@ -8,6 +7,7 @@ import { RdxMeterTrackDirective } from '../src/meter-track.directive';
 import { RdxMeterValueDirective } from '../src/meter-value.directive';
 import { MeterStorageComponent } from './meter';
 import storageSource from './meter?raw';
+import { Meta, moduleMetadata, StoryObj } from '@storybook/angular';
 
 const source = (code: string) => ({ docs: { source: { code, language: 'typescript' } } });
 const html = String.raw;
diff --git a/packages/primitives/meter/stories/meter.ts b/packages/primitives/meter/stories/meter.ts
index 149f8af1b..e4a40f5c6 100644
--- a/packages/primitives/meter/stories/meter.ts
+++ b/packages/primitives/meter/stories/meter.ts
@@ -1,10 +1,10 @@
-import { ChangeDetectionStrategy, Component, computed, DestroyRef, inject, signal } from '@angular/core';
 import { cn } from '../../storybook/styles';
 import { RdxMeterIndicatorDirective } from '../src/meter-indicator.directive';
 import { RdxMeterLabelDirective } from '../src/meter-label.directive';
 import { RdxMeterRootDirective } from '../src/meter-root.directive';
 import { RdxMeterTrackDirective } from '../src/meter-track.directive';
 import { RdxMeterValueDirective } from '../src/meter-value.directive';
+import { ChangeDetectionStrategy, Component, computed, DestroyRef, inject, signal } from '@angular/core';
 
 const storageSteps = [24, 38, 52, 67, 81] as const;
 
@@ -21,10 +21,10 @@ const storageSteps = [24, 38, 52, 67, 81] as const;
     template: `
         <div
             class="flex w-80 flex-col gap-2"
+            rdxMeterRoot
             [value]="value()"
             [format]="format"
             [getAriaValueText]="getAriaValueText"
-            rdxMeterRoot
         >
             <div class="flex items-center justify-between gap-4">
                 <span class="text-foreground text-sm font-medium" rdxMeterLabel>Storage used</span>
@@ -32,7 +32,7 @@ const storageSteps = [24, 38, 52, 67, 81] as const;
             </div>
 
             <div class="bg-muted h-3 overflow-hidden rounded-full" rdxMeterTrack>
-                <div [class]="indicatorClass()" rdxMeterIndicator></div>
+                <div rdxMeterIndicator [class]="indicatorClass()"></div>
             </div>
         </div>
     `
diff --git a/packages/primitives/navigation-menu/__tests__/navigation-menu.spec.ts b/packages/primitives/navigation-menu/__tests__/navigation-menu.spec.ts
index 440db96fe..a6200917d 100644
--- a/packages/primitives/navigation-menu/__tests__/navigation-menu.spec.ts
+++ b/packages/primitives/navigation-menu/__tests__/navigation-menu.spec.ts
@@ -13,9 +13,9 @@ import {
     template: `
         <nav
             #root="rdxNavigationMenuRoot"
+            rdxNavigationMenuRoot
             [defaultValue]="defaultValue"
             (onOpenChange)="handleOpenChange($event)"
-            rdxNavigationMenuRoot
         >
             <ul rdxNavigationMenuList>
                 <li rdxNavigationMenuItem value="one">
@@ -79,7 +79,7 @@ class HostComponent {
                                 <li rdxNavigationMenuItem value="nested">
                                     <button rdxNavigationMenuTrigger>Nested</button>
                                     <ng-container *rdxNavigationMenuContent>
-                                        <a [closeOnClick]="true" data-test-nested-link rdxNavigationMenuLink href="#">
+                                        <a data-test-nested-link rdxNavigationMenuLink href="#" [closeOnClick]="true">
                                             Nested link
                                         </a>
                                     </ng-container>
@@ -105,13 +105,13 @@ class NestedHostComponent {}
             <ul rdxNavigationMenuList>
                 <li rdxNavigationMenuItem value="one">
                     <button rdxNavigationMenuTrigger>One</button>
-                    <ng-template [forceMount]="true" rdxNavigationMenuContent>
+                    <ng-template rdxNavigationMenuContent [forceMount]="true">
                         <div data-test-force-content>Forced content</div>
                     </ng-template>
                 </li>
             </ul>
 
-            <ng-template [keepMounted]="true" rdxNavigationMenuPortal>
+            <ng-template rdxNavigationMenuPortal [keepMounted]="true">
                 <div data-test-keep-positioner rdxNavigationMenuPositioner>
                     <div data-test-keep-popup rdxNavigationMenuPopup>
                         <div data-test-keep-viewport rdxNavigationMenuViewport></div>
diff --git a/packages/primitives/navigation-menu/index.ts b/packages/primitives/navigation-menu/index.ts
index d084af3f8..60757a2e2 100644
--- a/packages/primitives/navigation-menu/index.ts
+++ b/packages/primitives/navigation-menu/index.ts
@@ -1,4 +1,3 @@
-import { NgModule } from '@angular/core';
 import { RdxNavigationMenuArrow } from './src/navigation-menu-arrow';
 import { RdxNavigationMenuBackdrop } from './src/navigation-menu-backdrop';
 import { RdxNavigationMenuContent } from './src/navigation-menu-content';
@@ -12,6 +11,7 @@ import { RdxNavigationMenuPositioner } from './src/navigation-menu-positioner';
 import { RdxNavigationMenuRoot } from './src/navigation-menu-root';
 import { RdxNavigationMenuTrigger } from './src/navigation-menu-trigger';
 import { RdxNavigationMenuViewport } from './src/navigation-menu-viewport';
+import { NgModule } from '@angular/core';
 
 export * from './src/navigation-menu-arrow';
 export * from './src/navigation-menu-backdrop';
diff --git a/packages/primitives/navigation-menu/src/navigation-menu-arrow.ts b/packages/primitives/navigation-menu/src/navigation-menu-arrow.ts
index a240bfd10..0451b454f 100644
--- a/packages/primitives/navigation-menu/src/navigation-menu-arrow.ts
+++ b/packages/primitives/navigation-menu/src/navigation-menu-arrow.ts
@@ -1,6 +1,6 @@
+import { injectNavigationMenuRootContext } from './navigation-menu-root-context';
 import { computed, Directive, inject } from '@angular/core';
 import { RdxPopperArrow, RdxPopperContentWrapper } from '@radix-ng/primitives/popper';
-import { injectNavigationMenuRootContext } from './navigation-menu-root-context';
 
 /**
  * An optional arrow element pointing toward the active trigger.
diff --git a/packages/primitives/navigation-menu/src/navigation-menu-backdrop.ts b/packages/primitives/navigation-menu/src/navigation-menu-backdrop.ts
index 19fee1a6b..1b95b68a5 100644
--- a/packages/primitives/navigation-menu/src/navigation-menu-backdrop.ts
+++ b/packages/primitives/navigation-menu/src/navigation-menu-backdrop.ts
@@ -1,5 +1,5 @@
-import { Directive, ElementRef, inject } from '@angular/core';
 import { injectNavigationMenuRootContext } from './navigation-menu-root-context';
+import { Directive, ElementRef, inject } from '@angular/core';
 
 /**
  * An optional backdrop rendered behind the popup.
diff --git a/packages/primitives/navigation-menu/src/navigation-menu-content.ts b/packages/primitives/navigation-menu/src/navigation-menu-content.ts
index c67cb6eda..5b5213b41 100644
--- a/packages/primitives/navigation-menu/src/navigation-menu-content.ts
+++ b/packages/primitives/navigation-menu/src/navigation-menu-content.ts
@@ -1,6 +1,6 @@
-import { booleanAttribute, Directive, effect, inject, input, TemplateRef, untracked } from '@angular/core';
 import { RdxNavigationMenuItem } from './navigation-menu-item';
 import { injectNavigationMenuRootContext } from './navigation-menu-root-context';
+import { booleanAttribute, Directive, effect, inject, input, TemplateRef, untracked } from '@angular/core';
 
 /**
  * The content shown when its item is open. Used as a structural directive; its template is rendered
diff --git a/packages/primitives/navigation-menu/src/navigation-menu-icon.ts b/packages/primitives/navigation-menu/src/navigation-menu-icon.ts
index 22d9c6f0b..b873fd8a9 100644
--- a/packages/primitives/navigation-menu/src/navigation-menu-icon.ts
+++ b/packages/primitives/navigation-menu/src/navigation-menu-icon.ts
@@ -1,5 +1,5 @@
-import { computed, Directive, inject } from '@angular/core';
 import { RdxNavigationMenuItem } from './navigation-menu-item';
+import { computed, Directive, inject } from '@angular/core';
 
 /**
  * A visual indicator (e.g. a caret) rendered inside a trigger. Exposes the open state so the icon
diff --git a/packages/primitives/navigation-menu/src/navigation-menu-item.ts b/packages/primitives/navigation-menu/src/navigation-menu-item.ts
index a16363174..deaf2bb11 100644
--- a/packages/primitives/navigation-menu/src/navigation-menu-item.ts
+++ b/packages/primitives/navigation-menu/src/navigation-menu-item.ts
@@ -1,6 +1,6 @@
+import { injectNavigationMenuRootContext } from './navigation-menu-root-context';
 import { computed, Directive, input, signal } from '@angular/core';
 import { injectId } from '@radix-ng/primitives/core';
-import { injectNavigationMenuRootContext } from './navigation-menu-root-context';
 
 /**
  * A single navigation menu item. Holds a trigger + content pair, or a standalone link.
diff --git a/packages/primitives/navigation-menu/src/navigation-menu-link.ts b/packages/primitives/navigation-menu/src/navigation-menu-link.ts
index ec2b777e2..b48d79c31 100644
--- a/packages/primitives/navigation-menu/src/navigation-menu-link.ts
+++ b/packages/primitives/navigation-menu/src/navigation-menu-link.ts
@@ -1,7 +1,7 @@
+import { injectNavigationMenuRootContext } from './navigation-menu-root-context';
 import { booleanAttribute, Directive, ElementRef, inject, input, output } from '@angular/core';
 import { RdxCompositeItem } from '@radix-ng/primitives/composite';
 import { ENTER, SPACE } from '@radix-ng/primitives/core';
-import { injectNavigationMenuRootContext } from './navigation-menu-root-context';
 
 /**
  * A navigation link. Can close the menu on selection when `closeOnClick` is enabled.
diff --git a/packages/primitives/navigation-menu/src/navigation-menu-list.ts b/packages/primitives/navigation-menu/src/navigation-menu-list.ts
index 7b22ed0ec..7579956c9 100644
--- a/packages/primitives/navigation-menu/src/navigation-menu-list.ts
+++ b/packages/primitives/navigation-menu/src/navigation-menu-list.ts
@@ -1,7 +1,7 @@
+import { injectNavigationMenuRootContext } from './navigation-menu-root-context';
 import { DestroyRef, Directive, effect, ElementRef, inject } from '@angular/core';
 import { RdxCompositeRoot } from '@radix-ng/primitives/composite';
 import { ARROW_DOWN, ARROW_LEFT, ARROW_RIGHT, ARROW_UP } from '@radix-ng/primitives/core';
-import { injectNavigationMenuRootContext } from './navigation-menu-root-context';
 
 /**
  * Contains the navigation menu items and coordinates composite keyboard focus between triggers.
diff --git a/packages/primitives/navigation-menu/src/navigation-menu-popup.ts b/packages/primitives/navigation-menu/src/navigation-menu-popup.ts
index 48cf560ef..24b8311df 100644
--- a/packages/primitives/navigation-menu/src/navigation-menu-popup.ts
+++ b/packages/primitives/navigation-menu/src/navigation-menu-popup.ts
@@ -1,3 +1,5 @@
+import { injectNavigationMenuRootContext, RdxNavigationMenuOpenChangeReason } from './navigation-menu-root-context';
+import { focusFirst, getTabbableCandidates } from './utils';
 import { computed, DestroyRef, Directive, ElementRef, inject, output } from '@angular/core';
 import {
     ARROW_DOWN,
@@ -12,8 +14,6 @@ import {
 } from '@radix-ng/primitives/core';
 import { RdxDismiss, RdxOutsidePressDomEvent } from '@radix-ng/primitives/dismissable-layer';
 import { RdxPopperContent, RdxPopperContentWrapper } from '@radix-ng/primitives/popper';
-import { injectNavigationMenuRootContext, RdxNavigationMenuOpenChangeReason } from './navigation-menu-root-context';
-import { focusFirst, getTabbableCandidates } from './utils';
 
 /**
  * The shared container for the active item's content.
diff --git a/packages/primitives/navigation-menu/src/navigation-menu-portal.ts b/packages/primitives/navigation-menu/src/navigation-menu-portal.ts
index d6e70249f..8ac8729f3 100644
--- a/packages/primitives/navigation-menu/src/navigation-menu-portal.ts
+++ b/packages/primitives/navigation-menu/src/navigation-menu-portal.ts
@@ -1,8 +1,8 @@
+import { injectNavigationMenuRootContext } from './navigation-menu-root-context';
 import { booleanAttribute, computed, Directive, inject, input, isDevMode } from '@angular/core';
 import { rdxDevError } from '@radix-ng/primitives/core';
 import { RdxPortalPresence } from '@radix-ng/primitives/portal';
 import { provideRdxPresenceContext } from '@radix-ng/primitives/presence';
-import { injectNavigationMenuRootContext } from './navigation-menu-root-context';
 
 /**
  * Structural directive that teleports the navigation menu popup into a container (default
diff --git a/packages/primitives/navigation-menu/src/navigation-menu-positioner.ts b/packages/primitives/navigation-menu/src/navigation-menu-positioner.ts
index 908388694..a5f13ae5f 100644
--- a/packages/primitives/navigation-menu/src/navigation-menu-positioner.ts
+++ b/packages/primitives/navigation-menu/src/navigation-menu-positioner.ts
@@ -1,3 +1,4 @@
+import { injectNavigationMenuRootContext } from './navigation-menu-root-context';
 import { DestroyRef, Directive, effect, ElementRef, inject, signal } from '@angular/core';
 import { useGraceArea } from '@radix-ng/primitives/core';
 import {
@@ -5,7 +6,6 @@ import {
     provideRdxPopperContentWrapper,
     RdxPopperContentWrapper
 } from '@radix-ng/primitives/popper';
-import { injectNavigationMenuRootContext } from './navigation-menu-root-context';
 
 /**
  * Positions the shared popup against the active trigger.
diff --git a/packages/primitives/navigation-menu/src/navigation-menu-root.ts b/packages/primitives/navigation-menu/src/navigation-menu-root.ts
index b974c1d36..4c98f786c 100644
--- a/packages/primitives/navigation-menu/src/navigation-menu-root.ts
+++ b/packages/primitives/navigation-menu/src/navigation-menu-root.ts
@@ -1,3 +1,13 @@
+import {
+    NavigationMenuDirection,
+    NavigationMenuOrientation,
+    provideNavigationMenuRootContext,
+    RdxNavigationMenuContentEntry,
+    RdxNavigationMenuOpenChange,
+    RdxNavigationMenuOpenChangeEventDetails,
+    RdxNavigationMenuOpenChangeReason,
+    RdxNavigationMenuRootContext
+} from './navigation-menu-root-context';
 import {
     computed,
     DestroyRef,
@@ -26,16 +36,6 @@ import {
 } from '@radix-ng/primitives/core';
 import { injectDirection } from '@radix-ng/primitives/direction-provider';
 import { RdxPopper } from '@radix-ng/primitives/popper';
-import {
-    NavigationMenuDirection,
-    NavigationMenuOrientation,
-    provideNavigationMenuRootContext,
-    RdxNavigationMenuContentEntry,
-    RdxNavigationMenuOpenChange,
-    RdxNavigationMenuOpenChangeEventDetails,
-    RdxNavigationMenuOpenChangeReason,
-    RdxNavigationMenuRootContext
-} from './navigation-menu-root-context';
 
 const context = () => contextFor(inject(RdxNavigationMenuRoot));
 
diff --git a/packages/primitives/navigation-menu/src/navigation-menu-trigger.ts b/packages/primitives/navigation-menu/src/navigation-menu-trigger.ts
index aab887d70..27ffbcf55 100644
--- a/packages/primitives/navigation-menu/src/navigation-menu-trigger.ts
+++ b/packages/primitives/navigation-menu/src/navigation-menu-trigger.ts
@@ -1,3 +1,6 @@
+import { RdxNavigationMenuItem } from './navigation-menu-item';
+import { injectNavigationMenuRootContext } from './navigation-menu-root-context';
+import { focusFirst, getTabbableCandidates } from './utils';
 import {
     booleanAttribute,
     computed,
@@ -11,9 +14,6 @@ import {
 } from '@angular/core';
 import { RdxCompositeItem } from '@radix-ng/primitives/composite';
 import { ARROW_DOWN, ARROW_LEFT, ARROW_RIGHT, ENTER, injectDocument, SPACE } from '@radix-ng/primitives/core';
-import { RdxNavigationMenuItem } from './navigation-menu-item';
-import { injectNavigationMenuRootContext } from './navigation-menu-root-context';
-import { focusFirst, getTabbableCandidates } from './utils';
 
 /**
  * A button that opens its item's content in the shared popup.
diff --git a/packages/primitives/navigation-menu/src/navigation-menu-viewport.ts b/packages/primitives/navigation-menu/src/navigation-menu-viewport.ts
index 6994cbe46..f1dc409d0 100644
--- a/packages/primitives/navigation-menu/src/navigation-menu-viewport.ts
+++ b/packages/primitives/navigation-menu/src/navigation-menu-viewport.ts
@@ -1,3 +1,5 @@
+import { injectNavigationMenuRootContext, RdxNavigationMenuContentEntry } from './navigation-menu-root-context';
+import { getActivationDirection, removeIds } from './utils';
 import {
     booleanAttribute,
     computed,
@@ -14,8 +16,6 @@ import {
     ViewContainerRef
 } from '@angular/core';
 import { getMaxTransitionDuration } from '@radix-ng/primitives/core';
-import { injectNavigationMenuRootContext, RdxNavigationMenuContentEntry } from './navigation-menu-root-context';
-import { getActivationDirection, removeIds } from './utils';
 
 interface RenderedContent {
     value: string;
diff --git a/packages/primitives/navigation-menu/stories/navigation-menu-custom-links.ts b/packages/primitives/navigation-menu/stories/navigation-menu-custom-links.ts
index 262e5cc04..352002949 100644
--- a/packages/primitives/navigation-menu/stories/navigation-menu-custom-links.ts
+++ b/packages/primitives/navigation-menu/stories/navigation-menu-custom-links.ts
@@ -1,7 +1,7 @@
+import { cn, demoNavigationMenu } from '../../storybook/styles';
 import { ChangeDetectionStrategy, Component, signal } from '@angular/core';
 import { LucideArrowUpRight, LucideBookOpen, LucideChevronDown, LucideCode, LucideLifeBuoy } from '@lucide/angular';
 import { navigationMenuImports } from '@radix-ng/primitives/navigation-menu';
-import { cn, demoNavigationMenu } from '../../storybook/styles';
 
 /**
  * Custom links: `rdxNavigationMenuLink` composes onto your own anchor markup — rich rows with icons,
@@ -21,18 +21,18 @@ import { cn, demoNavigationMenu } from '../../storybook/styles';
         LucideLifeBuoy
     ],
     template: `
-        <nav [class]="m.root" rdxNavigationMenuRoot>
-            <ul [class]="m.list" rdxNavigationMenuList>
+        <nav rdxNavigationMenuRoot [class]="m.root">
+            <ul rdxNavigationMenuList [class]="m.list">
                 <li rdxNavigationMenuItem value="resources">
-                    <button [class]="m.trigger" rdxNavigationMenuTrigger>
+                    <button rdxNavigationMenuTrigger [class]="m.trigger">
                         Resources
-                        <svg [class]="m.icon" rdxNavigationMenuIcon lucideChevronDown></svg>
+                        <svg rdxNavigationMenuIcon lucideChevronDown [class]="m.icon"></svg>
                     </button>
 
                     <ng-container *rdxNavigationMenuContent>
                         <ul class="grid w-[420px] gap-1 p-2">
                             <li>
-                                <a [class]="row" rdxNavigationMenuLink href="#">
+                                <a rdxNavigationMenuLink href="#" [class]="row">
                                     <span [class]="iconBox"><svg lucideBookOpen size="18"></svg></span>
                                     <span class="flex min-w-0 flex-1 flex-col">
                                         <span [class]="m.cardHeading">Documentation</span>
@@ -41,7 +41,7 @@ import { cn, demoNavigationMenu } from '../../storybook/styles';
                                 </a>
                             </li>
                             <li>
-                                <a [class]="row" rdxNavigationMenuLink href="#">
+                                <a rdxNavigationMenuLink href="#" [class]="row">
                                     <span [class]="iconBox"><svg lucideLifeBuoy size="18"></svg></span>
                                     <span class="flex min-w-0 flex-1 flex-col">
                                         <span [class]="m.cardHeading">Support</span>
@@ -52,11 +52,11 @@ import { cn, demoNavigationMenu } from '../../storybook/styles';
                             <li>
                                 <!-- An external link — the directive sits on a normal anchor. -->
                                 <a
-                                    [class]="row"
                                     rel="noreferrer noopener"
                                     target="_blank"
                                     rdxNavigationMenuLink
                                     href="https://github.com/radix-ng/primitives"
+                                    [class]="row"
                                 >
                                     <span [class]="iconBox"><svg lucideCode size="18"></svg></span>
                                     <span class="flex min-w-0 flex-1 flex-col">
@@ -70,7 +70,7 @@ import { cn, demoNavigationMenu } from '../../storybook/styles';
                             </li>
                             <li>
                                 <!-- Action link: keeps the menu open and runs a handler instead of navigating. -->
-                                <a [class]="row" (onSelect)="copy($event)" rdxNavigationMenuLink href="#">
+                                <a rdxNavigationMenuLink href="#" [class]="row" (onSelect)="copy($event)">
                                     <span [class]="iconBox"><svg lucideCode size="18"></svg></span>
                                     <span class="flex min-w-0 flex-1 flex-col">
                                         <span [class]="m.cardHeading">
@@ -87,9 +87,9 @@ import { cn, demoNavigationMenu } from '../../storybook/styles';
                 </li>
             </ul>
 
-            <div *rdxNavigationMenuPortal [class]="m.positioner" sideOffset="8" rdxNavigationMenuPositioner>
-                <div [class]="m.popup" rdxNavigationMenuPopup>
-                    <div [class]="m.viewport" rdxNavigationMenuViewport></div>
+            <div *rdxNavigationMenuPortal sideOffset="8" rdxNavigationMenuPositioner [class]="m.positioner">
+                <div rdxNavigationMenuPopup [class]="m.popup">
+                    <div rdxNavigationMenuViewport [class]="m.viewport"></div>
                 </div>
             </div>
         </nav>
diff --git a/packages/primitives/navigation-menu/stories/navigation-menu-default.ts b/packages/primitives/navigation-menu/stories/navigation-menu-default.ts
index 7f410f966..2f39b8a9f 100644
--- a/packages/primitives/navigation-menu/stories/navigation-menu-default.ts
+++ b/packages/primitives/navigation-menu/stories/navigation-menu-default.ts
@@ -1,19 +1,19 @@
+import { cn, demoNavigationMenu } from '../../storybook/styles';
 import { ChangeDetectionStrategy, Component } from '@angular/core';
 import { LucideChevronDown } from '@lucide/angular';
 import { navigationMenuImports } from '@radix-ng/primitives/navigation-menu';
-import { cn, demoNavigationMenu } from '../../storybook/styles';
 
 @Component({
     changeDetection: ChangeDetectionStrategy.Eager,
     selector: 'rdx-navigation-menu-default',
     imports: [...navigationMenuImports, LucideChevronDown],
     template: `
-        <nav [class]="m.root" rdxNavigationMenuRoot>
-            <ul [class]="m.list" rdxNavigationMenuList>
+        <nav rdxNavigationMenuRoot [class]="m.root">
+            <ul rdxNavigationMenuList [class]="m.list">
                 <li rdxNavigationMenuItem value="overview">
-                    <button [class]="m.trigger" rdxNavigationMenuTrigger>
+                    <button rdxNavigationMenuTrigger [class]="m.trigger">
                         Overview
-                        <svg [class]="m.icon" rdxNavigationMenuIcon lucideChevronDown></svg>
+                        <svg rdxNavigationMenuIcon lucideChevronDown [class]="m.icon"></svg>
                     </button>
 
                     <ng-container *rdxNavigationMenuContent>
@@ -23,7 +23,7 @@ import { cn, demoNavigationMenu } from '../../storybook/styles';
                             <ul [class]="cn(m.contentGrid, 'grid-cols-1 min-[500px]:grid-cols-2')">
                                 @for (item of overviewLinks; track item.title) {
                                     <li>
-                                        <a [class]="m.cardLink" [href]="item.href" rdxNavigationMenuLink>
+                                        <a rdxNavigationMenuLink [class]="m.cardLink" [href]="item.href">
                                             <div [class]="m.cardHeading">{{ item.title }}</div>
                                             <p [class]="m.cardText">{{ item.description }}</p>
                                         </a>
@@ -35,9 +35,9 @@ import { cn, demoNavigationMenu } from '../../storybook/styles';
                 </li>
 
                 <li rdxNavigationMenuItem value="handbook">
-                    <button [class]="m.trigger" rdxNavigationMenuTrigger>
+                    <button rdxNavigationMenuTrigger [class]="m.trigger">
                         Handbook
-                        <svg [class]="m.icon" rdxNavigationMenuIcon lucideChevronDown></svg>
+                        <svg rdxNavigationMenuIcon lucideChevronDown [class]="m.icon"></svg>
                     </button>
 
                     <ng-container *rdxNavigationMenuContent>
@@ -47,7 +47,7 @@ import { cn, demoNavigationMenu } from '../../storybook/styles';
                             <ul [class]="cn(m.contentGrid, 'max-w-[400px]')">
                                 @for (item of handbookLinks; track item.title) {
                                     <li>
-                                        <a [class]="m.cardLink" [href]="item.href" rdxNavigationMenuLink>
+                                        <a rdxNavigationMenuLink [class]="m.cardLink" [href]="item.href">
                                             <div [class]="m.cardHeading">{{ item.title }}</div>
                                             <p [class]="m.cardText">{{ item.description }}</p>
                                         </a>
@@ -59,23 +59,23 @@ import { cn, demoNavigationMenu } from '../../storybook/styles';
                 </li>
 
                 <li rdxNavigationMenuItem>
-                    <a [class]="m.link" rdxNavigationMenuLink href="https://github.com/mui/base-ui">GitHub</a>
+                    <a rdxNavigationMenuLink href="https://github.com/mui/base-ui" [class]="m.link">GitHub</a>
                 </li>
             </ul>
 
-            <div *rdxNavigationMenuPortal [class]="m.positioner" sideOffset="8" rdxNavigationMenuPositioner>
-                <div [class]="m.popup" rdxNavigationMenuPopup>
+            <div *rdxNavigationMenuPortal sideOffset="8" rdxNavigationMenuPositioner [class]="m.positioner">
+                <div rdxNavigationMenuPopup [class]="m.popup">
                     <svg
-                        [class]="m.arrow"
                         width="10"
                         height="5"
                         viewBox="0 0 30 10"
                         preserveAspectRatio="none"
                         rdxNavigationMenuArrow
+                        [class]="m.arrow"
                     >
                         <polygon points="0,0 30,0 15,10" />
                     </svg>
-                    <div [class]="m.viewport" rdxNavigationMenuViewport></div>
+                    <div rdxNavigationMenuViewport [class]="m.viewport"></div>
                 </div>
             </div>
         </nav>
diff --git a/packages/primitives/navigation-menu/stories/navigation-menu-large.ts b/packages/primitives/navigation-menu/stories/navigation-menu-large.ts
index d49466954..8be1a0b0e 100644
--- a/packages/primitives/navigation-menu/stories/navigation-menu-large.ts
+++ b/packages/primitives/navigation-menu/stories/navigation-menu-large.ts
@@ -1,7 +1,7 @@
+import { cn, demoNavigationMenu } from '../../storybook/styles';
 import { ChangeDetectionStrategy, Component } from '@angular/core';
 import { LucideChevronDown } from '@lucide/angular';
 import { navigationMenuImports } from '@radix-ng/primitives/navigation-menu';
-import { cn, demoNavigationMenu } from '../../storybook/styles';
 
 /**
  * Large menus: when the content exceeds the available space, constrain the content with a
@@ -13,12 +13,12 @@ import { cn, demoNavigationMenu } from '../../storybook/styles';
     selector: 'rdx-navigation-menu-large',
     imports: [...navigationMenuImports, LucideChevronDown],
     template: `
-        <nav [class]="m.root" rdxNavigationMenuRoot>
-            <ul [class]="m.list" rdxNavigationMenuList>
+        <nav rdxNavigationMenuRoot [class]="m.root">
+            <ul rdxNavigationMenuList [class]="m.list">
                 <li rdxNavigationMenuItem value="components">
-                    <button [class]="m.trigger" rdxNavigationMenuTrigger>
+                    <button rdxNavigationMenuTrigger [class]="m.trigger">
                         Components
-                        <svg [class]="m.icon" rdxNavigationMenuIcon lucideChevronDown></svg>
+                        <svg rdxNavigationMenuIcon lucideChevronDown [class]="m.icon"></svg>
                     </button>
 
                     <ng-container *rdxNavigationMenuContent>
@@ -26,7 +26,7 @@ import { cn, demoNavigationMenu } from '../../storybook/styles';
                             <ul class="grid max-h-[320px] gap-1 overflow-y-auto p-2">
                                 @for (item of components; track item.title) {
                                     <li>
-                                        <a [class]="cn(m.cardLink, 'p-2.5')" rdxNavigationMenuLink href="#">
+                                        <a rdxNavigationMenuLink href="#" [class]="cn(m.cardLink, 'p-2.5')">
                                             <div [class]="m.cardHeading">{{ item.title }}</div>
                                             <p [class]="m.cardText">{{ item.text }}</p>
                                         </a>
@@ -38,9 +38,9 @@ import { cn, demoNavigationMenu } from '../../storybook/styles';
                 </li>
             </ul>
 
-            <div *rdxNavigationMenuPortal [class]="m.positioner" sideOffset="8" rdxNavigationMenuPositioner>
-                <div [class]="m.popup" rdxNavigationMenuPopup>
-                    <div [class]="m.viewport" rdxNavigationMenuViewport></div>
+            <div *rdxNavigationMenuPortal sideOffset="8" rdxNavigationMenuPositioner [class]="m.positioner">
+                <div rdxNavigationMenuPopup [class]="m.popup">
+                    <div rdxNavigationMenuViewport [class]="m.viewport"></div>
                 </div>
             </div>
         </nav>
diff --git a/packages/primitives/navigation-menu/stories/navigation-menu-links.ts b/packages/primitives/navigation-menu/stories/navigation-menu-links.ts
index 8883affed..b55a3d0a3 100644
--- a/packages/primitives/navigation-menu/stories/navigation-menu-links.ts
+++ b/packages/primitives/navigation-menu/stories/navigation-menu-links.ts
@@ -1,25 +1,25 @@
+import { demoNavigationMenu } from '../../storybook/styles';
 import { ChangeDetectionStrategy, Component } from '@angular/core';
 import { navigationMenuImports } from '@radix-ng/primitives/navigation-menu';
-import { demoNavigationMenu } from '../../storybook/styles';
 
 @Component({
     changeDetection: ChangeDetectionStrategy.Eager,
     selector: 'rdx-navigation-menu-links',
     imports: [...navigationMenuImports],
     template: `
-        <nav [class]="m.root" rdxNavigationMenuRoot>
-            <ul [class]="m.list" rdxNavigationMenuList>
+        <nav rdxNavigationMenuRoot [class]="m.root">
+            <ul rdxNavigationMenuList [class]="m.list">
                 <li rdxNavigationMenuItem>
-                    <a [class]="m.link" rdxNavigationMenuLink active href="#">Home</a>
+                    <a rdxNavigationMenuLink active href="#" [class]="m.link">Home</a>
                 </li>
                 <li rdxNavigationMenuItem>
-                    <a [class]="m.link" rdxNavigationMenuLink href="#">Docs</a>
+                    <a rdxNavigationMenuLink href="#" [class]="m.link">Docs</a>
                 </li>
                 <li rdxNavigationMenuItem>
-                    <a [class]="m.link" rdxNavigationMenuLink href="#">Pricing</a>
+                    <a rdxNavigationMenuLink href="#" [class]="m.link">Pricing</a>
                 </li>
                 <li rdxNavigationMenuItem>
-                    <a [class]="m.link" rdxNavigationMenuLink href="#">Blog</a>
+                    <a rdxNavigationMenuLink href="#" [class]="m.link">Blog</a>
                 </li>
             </ul>
         </nav>
diff --git a/packages/primitives/navigation-menu/stories/navigation-menu-nested-inline.ts b/packages/primitives/navigation-menu/stories/navigation-menu-nested-inline.ts
index 08b17a67e..b3dcaa461 100644
--- a/packages/primitives/navigation-menu/stories/navigation-menu-nested-inline.ts
+++ b/packages/primitives/navigation-menu/stories/navigation-menu-nested-inline.ts
@@ -1,7 +1,7 @@
+import { cn, demoNavigationMenu } from '../../storybook/styles';
 import { ChangeDetectionStrategy, Component, signal } from '@angular/core';
 import { LucideChevronDown } from '@lucide/angular';
 import { navigationMenuImports } from '@radix-ng/primitives/navigation-menu';
-import { cn, demoNavigationMenu } from '../../storybook/styles';
 
 /**
  * Nested inline submenus: a second level that stays in the same panel. Inside the outer Content we
@@ -14,32 +14,32 @@ import { cn, demoNavigationMenu } from '../../storybook/styles';
     selector: 'rdx-navigation-menu-nested-inline',
     imports: [...navigationMenuImports, LucideChevronDown],
     template: `
-        <nav [class]="m.root" rdxNavigationMenuRoot>
-            <ul [class]="m.list" rdxNavigationMenuList>
+        <nav rdxNavigationMenuRoot [class]="m.root">
+            <ul rdxNavigationMenuList [class]="m.list">
                 <li rdxNavigationMenuItem value="browse">
-                    <button [class]="m.trigger" rdxNavigationMenuTrigger>
+                    <button rdxNavigationMenuTrigger [class]="m.trigger">
                         Browse
-                        <svg [class]="m.icon" rdxNavigationMenuIcon lucideChevronDown></svg>
+                        <svg rdxNavigationMenuIcon lucideChevronDown [class]="m.icon"></svg>
                     </button>
 
                     <ng-container *rdxNavigationMenuContent>
                         <!-- Inline second-level menu (flex row): categories left, viewport right. -->
                         <nav
                             class="flex w-[560px]"
-                            [value]="active()"
-                            (onValueChange)="onActive($event)"
                             orientation="vertical"
                             rdxNavigationMenuRoot
+                            [value]="active()"
+                            (onValueChange)="onActive($event)"
                         >
                             <ul
                                 class="border-border flex w-44 shrink-0 flex-col gap-1 border-r p-2"
                                 rdxNavigationMenuList
                             >
                                 @for (cat of categories; track cat.value) {
-                                    <li [value]="cat.value" rdxNavigationMenuItem>
+                                    <li rdxNavigationMenuItem [value]="cat.value">
                                         <button
-                                            [class]="cn(m.trigger, 'w-full justify-start')"
                                             rdxNavigationMenuTrigger
+                                            [class]="cn(m.trigger, 'w-full justify-start')"
                                         >
                                             {{ cat.label }}
                                         </button>
@@ -48,7 +48,7 @@ import { cn, demoNavigationMenu } from '../../storybook/styles';
                                             <ul class="grid gap-1">
                                                 @for (link of cat.links; track link.title) {
                                                     <li>
-                                                        <a [class]="m.cardLink" rdxNavigationMenuLink href="#">
+                                                        <a rdxNavigationMenuLink href="#" [class]="m.cardLink">
                                                             <div [class]="m.cardHeading">{{ link.title }}</div>
                                                             <p [class]="m.cardText">{{ link.text }}</p>
                                                         </a>
@@ -60,19 +60,19 @@ import { cn, demoNavigationMenu } from '../../storybook/styles';
                                 }
                             </ul>
 
-                            <div [class]="inlineViewport" rdxNavigationMenuViewport></div>
+                            <div rdxNavigationMenuViewport [class]="inlineViewport"></div>
                         </nav>
                     </ng-container>
                 </li>
 
                 <li rdxNavigationMenuItem>
-                    <a [class]="m.link" rdxNavigationMenuLink href="#">Pricing</a>
+                    <a rdxNavigationMenuLink href="#" [class]="m.link">Pricing</a>
                 </li>
             </ul>
 
-            <div *rdxNavigationMenuPortal [class]="m.positioner" sideOffset="8" rdxNavigationMenuPositioner>
-                <div [class]="m.popup" rdxNavigationMenuPopup>
-                    <div [class]="m.viewport" rdxNavigationMenuViewport></div>
+            <div *rdxNavigationMenuPortal sideOffset="8" rdxNavigationMenuPositioner [class]="m.positioner">
+                <div rdxNavigationMenuPopup [class]="m.popup">
+                    <div rdxNavigationMenuViewport [class]="m.viewport"></div>
                 </div>
             </div>
         </nav>
diff --git a/packages/primitives/navigation-menu/stories/navigation-menu-nested.ts b/packages/primitives/navigation-menu/stories/navigation-menu-nested.ts
index ee0bacb0f..844d7aa0b 100644
--- a/packages/primitives/navigation-menu/stories/navigation-menu-nested.ts
+++ b/packages/primitives/navigation-menu/stories/navigation-menu-nested.ts
@@ -1,19 +1,19 @@
+import { cn, demoNavigationMenu } from '../../storybook/styles';
 import { ChangeDetectionStrategy, Component } from '@angular/core';
 import { LucideChevronDown, LucideChevronRight } from '@lucide/angular';
 import { navigationMenuImports } from '@radix-ng/primitives/navigation-menu';
-import { cn, demoNavigationMenu } from '../../storybook/styles';
 
 @Component({
     changeDetection: ChangeDetectionStrategy.Eager,
     selector: 'rdx-navigation-menu-nested',
     imports: [...navigationMenuImports, LucideChevronDown, LucideChevronRight],
     template: `
-        <nav [class]="m.root" rdxNavigationMenuRoot>
-            <ul [class]="m.list" rdxNavigationMenuList>
+        <nav rdxNavigationMenuRoot [class]="m.root">
+            <ul rdxNavigationMenuList [class]="m.list">
                 <li rdxNavigationMenuItem value="overview">
-                    <button [class]="m.trigger" rdxNavigationMenuTrigger>
+                    <button rdxNavigationMenuTrigger [class]="m.trigger">
                         Overview
-                        <svg [class]="m.icon" rdxNavigationMenuIcon lucideChevronDown></svg>
+                        <svg rdxNavigationMenuIcon lucideChevronDown [class]="m.icon"></svg>
                     </button>
 
                     <ng-container *rdxNavigationMenuContent>
@@ -23,7 +23,7 @@ import { cn, demoNavigationMenu } from '../../storybook/styles';
                             <ul [class]="cn(m.contentGrid, 'grid-cols-1 min-[640px]:grid-cols-[12rem_12rem]')">
                                 @for (item of overviewLinks; track item.href) {
                                     <li>
-                                        <a [class]="m.cardLink" [href]="item.href" rdxNavigationMenuLink>
+                                        <a rdxNavigationMenuLink [class]="m.cardLink" [href]="item.href">
                                             <div [class]="m.cardHeading">{{ item.title }}</div>
                                             <p [class]="m.cardText">{{ item.description }}</p>
                                         </a>
@@ -32,28 +32,28 @@ import { cn, demoNavigationMenu } from '../../storybook/styles';
 
                                 <li>
                                     <nav orientation="vertical" rdxNavigationMenuRoot>
-                                        <ul [class]="m.contentGrid" rdxNavigationMenuList>
+                                        <ul rdxNavigationMenuList [class]="m.contentGrid">
                                             <li rdxNavigationMenuItem value="handbook">
                                                 <button
+                                                    rdxNavigationMenuTrigger
                                                     [class]="
                                                         cn(
                                                             m.cardLink,
                                                             'relative w-full border-0 bg-transparent text-left text-inherit'
                                                         )
                                                     "
-                                                    rdxNavigationMenuTrigger
                                                 >
                                                     <span [class]="m.cardHeading">Handbook</span>
                                                     <p [class]="m.cardText">How to use Base UI effectively.</p>
                                                     <svg
+                                                        rdxNavigationMenuIcon
+                                                        lucideChevronRight
                                                         [class]="
                                                             cn(
                                                                 m.icon,
                                                                 'absolute top-1/2 right-2.5 -translate-y-1/2 data-[popup-open]:rotate-0'
                                                             )
                                                         "
-                                                        rdxNavigationMenuIcon
-                                                        lucideChevronRight
                                                     ></svg>
                                                 </button>
 
@@ -67,9 +67,9 @@ import { cn, demoNavigationMenu } from '../../storybook/styles';
                                                             @for (item of handbookLinks; track item.href) {
                                                                 <li>
                                                                     <a
+                                                                        rdxNavigationMenuLink
                                                                         [class]="m.cardLink"
                                                                         [href]="item.href"
-                                                                        rdxNavigationMenuLink
                                                                     >
                                                                         <div [class]="m.cardHeading">
                                                                             {{ item.title }}
@@ -88,15 +88,15 @@ import { cn, demoNavigationMenu } from '../../storybook/styles';
 
                                         <div
                                             *rdxNavigationMenuPortal
-                                            [class]="m.positioner"
-                                            [align]="'end'"
-                                            [alignOffset]="-8"
                                             side="right"
                                             sideOffset="8"
                                             rdxNavigationMenuPositioner
+                                            [class]="m.positioner"
+                                            [align]="'end'"
+                                            [alignOffset]="-8"
                                         >
-                                            <div [class]="cn(m.popup, 'text-left')" rdxNavigationMenuPopup>
-                                                <div [class]="m.viewport" rdxNavigationMenuViewport></div>
+                                            <div rdxNavigationMenuPopup [class]="cn(m.popup, 'text-left')">
+                                                <div rdxNavigationMenuViewport [class]="m.viewport"></div>
                                             </div>
                                         </div>
                                     </nav>
@@ -107,19 +107,19 @@ import { cn, demoNavigationMenu } from '../../storybook/styles';
                 </li>
             </ul>
 
-            <div *rdxNavigationMenuPortal [class]="m.positioner" sideOffset="10" rdxNavigationMenuPositioner>
-                <div [class]="m.popup" rdxNavigationMenuPopup>
+            <div *rdxNavigationMenuPortal sideOffset="10" rdxNavigationMenuPositioner [class]="m.positioner">
+                <div rdxNavigationMenuPopup [class]="m.popup">
                     <svg
-                        [class]="m.arrow"
                         width="10"
                         height="5"
                         viewBox="0 0 30 10"
                         preserveAspectRatio="none"
                         rdxNavigationMenuArrow
+                        [class]="m.arrow"
                     >
                         <polygon points="0,0 30,0 15,10" />
                     </svg>
-                    <div [class]="m.viewport" rdxNavigationMenuViewport></div>
+                    <div rdxNavigationMenuViewport [class]="m.viewport"></div>
                 </div>
             </div>
         </nav>
diff --git a/packages/primitives/navigation-menu/stories/navigation-menu-rtl.ts b/packages/primitives/navigation-menu/stories/navigation-menu-rtl.ts
index 3ccd61cd8..61e4c495a 100644
--- a/packages/primitives/navigation-menu/stories/navigation-menu-rtl.ts
+++ b/packages/primitives/navigation-menu/stories/navigation-menu-rtl.ts
@@ -1,20 +1,20 @@
+import { cn, demoNavigationMenu } from '../../storybook/styles';
 import { ChangeDetectionStrategy, Component } from '@angular/core';
 import { LucideChevronDown } from '@lucide/angular';
 import { navigationMenuImports } from '@radix-ng/primitives/navigation-menu';
-import { cn, demoNavigationMenu } from '../../storybook/styles';
 
 @Component({
     changeDetection: ChangeDetectionStrategy.Eager,
     selector: 'rdx-navigation-menu-rtl',
     imports: [...navigationMenuImports, LucideChevronDown],
     template: `
-        <nav [class]="m.root" dir="rtl" rdxNavigationMenuRoot>
-            <ul [class]="m.list" dir="rtl" rdxNavigationMenuList>
+        <nav dir="rtl" rdxNavigationMenuRoot [class]="m.root">
+            <ul dir="rtl" rdxNavigationMenuList [class]="m.list">
                 @for (group of groups; track group.value) {
-                    <li [value]="group.value" rdxNavigationMenuItem>
-                        <button [class]="m.trigger" rdxNavigationMenuTrigger>
+                    <li rdxNavigationMenuItem [value]="group.value">
+                        <button rdxNavigationMenuTrigger [class]="m.trigger">
                             {{ group.label }}
-                            <svg [class]="m.icon" rdxNavigationMenuIcon lucideChevronDown></svg>
+                            <svg rdxNavigationMenuIcon lucideChevronDown [class]="m.icon"></svg>
                         </button>
 
                         <ng-container *rdxNavigationMenuContent>
@@ -22,7 +22,7 @@ import { cn, demoNavigationMenu } from '../../storybook/styles';
                                 <ul [class]="m.contentGrid">
                                     @for (link of group.links; track link) {
                                         <li>
-                                            <a [class]="m.cardLink" rdxNavigationMenuLink href="#">
+                                            <a rdxNavigationMenuLink href="#" [class]="m.cardLink">
                                                 <div [class]="m.cardHeading">{{ link }}</div>
                                             </a>
                                         </li>
@@ -34,9 +34,9 @@ import { cn, demoNavigationMenu } from '../../storybook/styles';
                 }
             </ul>
 
-            <div *rdxNavigationMenuPortal [class]="m.positioner" sideOffset="8" rdxNavigationMenuPositioner>
-                <div [class]="m.popup" rdxNavigationMenuPopup>
-                    <div [class]="m.viewport" rdxNavigationMenuViewport></div>
+            <div *rdxNavigationMenuPortal sideOffset="8" rdxNavigationMenuPositioner [class]="m.positioner">
+                <div rdxNavigationMenuPopup [class]="m.popup">
+                    <div rdxNavigationMenuViewport [class]="m.viewport"></div>
                 </div>
             </div>
         </nav>
diff --git a/packages/primitives/navigation-menu/stories/navigation-menu-vertical.ts b/packages/primitives/navigation-menu/stories/navigation-menu-vertical.ts
index 6949a45ef..18e111039 100644
--- a/packages/primitives/navigation-menu/stories/navigation-menu-vertical.ts
+++ b/packages/primitives/navigation-menu/stories/navigation-menu-vertical.ts
@@ -1,20 +1,20 @@
+import { cn, demoNavigationMenu } from '../../storybook/styles';
 import { ChangeDetectionStrategy, Component } from '@angular/core';
 import { LucideChevronRight } from '@lucide/angular';
 import { navigationMenuImports } from '@radix-ng/primitives/navigation-menu';
-import { cn, demoNavigationMenu } from '../../storybook/styles';
 
 @Component({
     changeDetection: ChangeDetectionStrategy.Eager,
     selector: 'rdx-navigation-menu-vertical',
     imports: [...navigationMenuImports, LucideChevronRight],
     template: `
-        <nav [class]="m.root" orientation="vertical" rdxNavigationMenuRoot>
-            <ul [class]="cn(m.list, 'w-48 flex-col items-stretch')" rdxNavigationMenuList>
+        <nav orientation="vertical" rdxNavigationMenuRoot [class]="m.root">
+            <ul rdxNavigationMenuList [class]="cn(m.list, 'w-48 flex-col items-stretch')">
                 @for (group of groups; track group.value) {
-                    <li [value]="group.value" rdxNavigationMenuItem>
-                        <button [class]="cn(m.trigger, 'justify-between')" rdxNavigationMenuTrigger>
+                    <li rdxNavigationMenuItem [value]="group.value">
+                        <button rdxNavigationMenuTrigger [class]="cn(m.trigger, 'justify-between')">
                             {{ group.label }}
-                            <svg [class]="m.icon" rdxNavigationMenuIcon lucideChevronRight></svg>
+                            <svg rdxNavigationMenuIcon lucideChevronRight [class]="m.icon"></svg>
                         </button>
 
                         <ng-container *rdxNavigationMenuContent>
@@ -22,7 +22,7 @@ import { cn, demoNavigationMenu } from '../../storybook/styles';
                                 <ul [class]="m.contentGrid">
                                     @for (link of group.links; track link) {
                                         <li>
-                                            <a [class]="m.cardLink" rdxNavigationMenuLink href="#">
+                                            <a rdxNavigationMenuLink href="#" [class]="m.cardLink">
                                                 <div [class]="m.cardHeading">{{ link }}</div>
                                             </a>
                                         </li>
@@ -36,14 +36,14 @@ import { cn, demoNavigationMenu } from '../../storybook/styles';
 
             <div
                 *rdxNavigationMenuPortal
-                [class]="m.positioner"
                 side="right"
                 sideOffset="8"
                 align="start"
                 rdxNavigationMenuPositioner
+                [class]="m.positioner"
             >
-                <div [class]="m.popup" rdxNavigationMenuPopup>
-                    <div [class]="m.viewport" rdxNavigationMenuViewport></div>
+                <div rdxNavigationMenuPopup [class]="m.popup">
+                    <div rdxNavigationMenuViewport [class]="m.viewport"></div>
                 </div>
             </div>
         </nav>
diff --git a/packages/primitives/navigation-menu/stories/navigation-menu.stories.ts b/packages/primitives/navigation-menu/stories/navigation-menu.stories.ts
index 652112c88..14b4e5f6b 100644
--- a/packages/primitives/navigation-menu/stories/navigation-menu.stories.ts
+++ b/packages/primitives/navigation-menu/stories/navigation-menu.stories.ts
@@ -1,4 +1,3 @@
-import { Meta, moduleMetadata, StoryObj } from '@storybook/angular';
 import { tailwindDemoDecorator } from '../../storybook/tailwind-demo';
 import { RdxNavigationMenuCustomLinksComponent } from './navigation-menu-custom-links';
 import customLinksSource from './navigation-menu-custom-links?raw';
@@ -9,13 +8,14 @@ import largeSource from './navigation-menu-large?raw';
 import { RdxNavigationMenuLinksComponent } from './navigation-menu-links';
 import linksSource from './navigation-menu-links?raw';
 import { RdxNavigationMenuNestedComponent } from './navigation-menu-nested';
+import nestedSource from './navigation-menu-nested?raw';
 import { RdxNavigationMenuNestedInlineComponent } from './navigation-menu-nested-inline';
 import nestedInlineSource from './navigation-menu-nested-inline?raw';
-import nestedSource from './navigation-menu-nested?raw';
 import { RdxNavigationMenuRtlComponent } from './navigation-menu-rtl';
 import rtlSource from './navigation-menu-rtl?raw';
 import { RdxNavigationMenuVerticalComponent } from './navigation-menu-vertical';
 import verticalSource from './navigation-menu-vertical?raw';
+import { Meta, moduleMetadata, StoryObj } from '@storybook/angular';
 
 const html = String.raw;
 
diff --git a/packages/primitives/number-field/__tests__/number-field.spec.ts b/packages/primitives/number-field/__tests__/number-field.spec.ts
index d7d77a3e2..40569f38c 100644
--- a/packages/primitives/number-field/__tests__/number-field.spec.ts
+++ b/packages/primitives/number-field/__tests__/number-field.spec.ts
@@ -1,14 +1,14 @@
-import { ChangeDetectionStrategy, Component, signal } from '@angular/core';
-import { ComponentFixture, TestBed } from '@angular/core/testing';
-import { form, FormField } from '@angular/forms/signals';
-import { By } from '@angular/platform-browser';
-import { vi } from 'vitest';
 import { RdxNumberFieldDecrement } from '../src/number-field-decrement';
 import { RdxNumberFieldGroup } from '../src/number-field-group';
 import { RdxNumberFieldHiddenInput } from '../src/number-field-hidden-input';
 import { RdxNumberFieldIncrement } from '../src/number-field-increment';
 import { RdxNumberFieldInput } from '../src/number-field-input';
 import { RdxNumberFieldRoot, RdxNumberFieldValueChangeEvent } from '../src/number-field-root';
+import { ChangeDetectionStrategy, Component, signal } from '@angular/core';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { form, FormField } from '@angular/forms/signals';
+import { By } from '@angular/platform-browser';
+import { vi } from 'vitest';
 
 @Component({
     changeDetection: ChangeDetectionStrategy.Eager,
@@ -22,7 +22,7 @@ import { RdxNumberFieldRoot, RdxNumberFieldValueChangeEvent } from '../src/numbe
     ],
     template: `
         <div
-            [(value)]="value"
+            rdxNumberFieldRoot
             [defaultValue]="defaultValue()"
             [min]="min()"
             [max]="max()"
@@ -32,9 +32,9 @@ import { RdxNumberFieldRoot, RdxNumberFieldValueChangeEvent } from '../src/numbe
             [readonly]="readonly()"
             [required]="required()"
             [format]="format()"
+            [(value)]="value"
             (onValueChange)="onValueChange($event)"
             (onValueCommitted)="onValueCommitted($event)"
-            rdxNumberFieldRoot
         >
             <input rdxNumberFieldHiddenInput />
             <div rdxNumberFieldGroup>
@@ -280,7 +280,7 @@ describe('RdxNumberField', () => {
     changeDetection: ChangeDetectionStrategy.Eager,
     imports: [RdxNumberFieldRoot, RdxNumberFieldInput, RdxNumberFieldIncrement],
     template: `
-        <div [invalid]="invalid()" [errors]="errors()" rdxNumberFieldRoot>
+        <div rdxNumberFieldRoot [invalid]="invalid()" [errors]="errors()">
             <input rdxNumberFieldInput />
             <button rdxNumberFieldIncrement>+</button>
         </div>
@@ -347,7 +347,7 @@ describe('RdxNumberField validation state (batch #4)', () => {
     changeDetection: ChangeDetectionStrategy.Eager,
     imports: [FormField, RdxNumberFieldRoot, RdxNumberFieldInput, RdxNumberFieldIncrement],
     template: `
-        <div [formField]="amount" rdxNumberFieldRoot>
+        <div rdxNumberFieldRoot [formField]="amount">
             <input rdxNumberFieldInput />
             <button rdxNumberFieldIncrement>+</button>
         </div>
diff --git a/packages/primitives/number-field/index.ts b/packages/primitives/number-field/index.ts
index f03cb18d7..f757ae4e7 100644
--- a/packages/primitives/number-field/index.ts
+++ b/packages/primitives/number-field/index.ts
@@ -1,4 +1,3 @@
-import { NgModule } from '@angular/core';
 import { RdxNumberFieldDecrement } from './src/number-field-decrement';
 import { RdxNumberFieldGroup } from './src/number-field-group';
 import { RdxNumberFieldHiddenInput } from './src/number-field-hidden-input';
@@ -7,7 +6,9 @@ import { RdxNumberFieldInput } from './src/number-field-input';
 import { RdxNumberFieldRoot } from './src/number-field-root';
 import { RdxNumberFieldScrubArea } from './src/number-field-scrub-area';
 import { RdxNumberFieldScrubAreaCursor } from './src/number-field-scrub-area-cursor';
+import { NgModule } from '@angular/core';
 
+export * from './src/number-field.utils';
 export * from './src/number-field-button';
 export * from './src/number-field-context';
 export * from './src/number-field-decrement';
@@ -19,7 +20,6 @@ export * from './src/number-field-root';
 export * from './src/number-field-scrub-area';
 export * from './src/number-field-scrub-area-context';
 export * from './src/number-field-scrub-area-cursor';
-export * from './src/number-field.utils';
 export * from './src/types';
 
 const _imports = [
diff --git a/packages/primitives/number-field/src/number-field-button.ts b/packages/primitives/number-field/src/number-field-button.ts
index b2bff9f02..6d4144ab1 100644
--- a/packages/primitives/number-field/src/number-field-button.ts
+++ b/packages/primitives/number-field/src/number-field-button.ts
@@ -1,6 +1,3 @@
-import { booleanAttribute, computed, Directive, input } from '@angular/core';
-import { BooleanInput } from '@radix-ng/primitives/core';
-import { injectNumberFieldRootContext } from './number-field-context';
 import {
     CHANGE_VALUE_TICK_DELAY,
     createPressAndHold,
@@ -8,7 +5,10 @@ import {
     SCROLLING_POINTER_MOVE_DISTANCE,
     START_AUTO_CHANGE_DELAY
 } from './number-field.utils';
+import { injectNumberFieldRootContext } from './number-field-context';
 import { Direction, NumberFieldChangeReason } from './types';
+import { booleanAttribute, computed, Directive, input } from '@angular/core';
+import { BooleanInput } from '@radix-ng/primitives/core';
 
 // Treat pen as touch-like to avoid forcing the software keyboard on stylus taps.
 function isTouchLikePointerType(pointerType: string): boolean {
diff --git a/packages/primitives/number-field/src/number-field-context.ts b/packages/primitives/number-field/src/number-field-context.ts
index 03c143ca9..145c60c37 100644
--- a/packages/primitives/number-field/src/number-field-context.ts
+++ b/packages/primitives/number-field/src/number-field-context.ts
@@ -1,5 +1,5 @@
-import { createContext } from '@radix-ng/primitives/core';
 import type { RdxNumberFieldRoot } from './number-field-root';
+import { createContext } from '@radix-ng/primitives/core';
 
 /**
  * The Number Field context exposes the root directive instance to every child part.
diff --git a/packages/primitives/number-field/src/number-field-decrement.ts b/packages/primitives/number-field/src/number-field-decrement.ts
index eaf811d69..eebb362ef 100644
--- a/packages/primitives/number-field/src/number-field-decrement.ts
+++ b/packages/primitives/number-field/src/number-field-decrement.ts
@@ -1,5 +1,5 @@
-import { Directive } from '@angular/core';
 import { RdxNumberFieldButton } from './number-field-button';
+import { Directive } from '@angular/core';
 
 /**
  * A stepper button that decreases the field value when clicked or held.
diff --git a/packages/primitives/number-field/src/number-field-group.ts b/packages/primitives/number-field/src/number-field-group.ts
index 52f48453d..451427e0a 100644
--- a/packages/primitives/number-field/src/number-field-group.ts
+++ b/packages/primitives/number-field/src/number-field-group.ts
@@ -1,5 +1,5 @@
-import { Directive } from '@angular/core';
 import { injectNumberFieldRootContext } from './number-field-context';
+import { Directive } from '@angular/core';
 
 /**
  * Groups the input with the increment and decrement buttons.
diff --git a/packages/primitives/number-field/src/number-field-hidden-input.ts b/packages/primitives/number-field/src/number-field-hidden-input.ts
index 5f34a2a7f..df303b616 100644
--- a/packages/primitives/number-field/src/number-field-hidden-input.ts
+++ b/packages/primitives/number-field/src/number-field-hidden-input.ts
@@ -1,5 +1,5 @@
-import { Directive } from '@angular/core';
 import { injectNumberFieldRootContext } from './number-field-context';
+import { Directive } from '@angular/core';
 
 /**
  * The hidden native `input[type=number]` that mirrors the field value for native form submission
diff --git a/packages/primitives/number-field/src/number-field-increment.ts b/packages/primitives/number-field/src/number-field-increment.ts
index 1640c396c..9b6004ab9 100644
--- a/packages/primitives/number-field/src/number-field-increment.ts
+++ b/packages/primitives/number-field/src/number-field-increment.ts
@@ -1,5 +1,5 @@
-import { Directive } from '@angular/core';
 import { RdxNumberFieldButton } from './number-field-button';
+import { Directive } from '@angular/core';
 
 /**
  * A stepper button that increases the field value when clicked or held.
diff --git a/packages/primitives/number-field/src/number-field-input.ts b/packages/primitives/number-field/src/number-field-input.ts
index eb286d8ed..b6cf63d0f 100644
--- a/packages/primitives/number-field/src/number-field-input.ts
+++ b/packages/primitives/number-field/src/number-field-input.ts
@@ -1,6 +1,6 @@
+import { injectNumberFieldRootContext } from './number-field-context';
 import { Directive, ElementRef, inject } from '@angular/core';
 import { getActiveElement } from '@radix-ng/primitives/core';
-import { injectNumberFieldRootContext } from './number-field-context';
 
 /**
  * The native text input that displays the formatted value and accepts typed input.
diff --git a/packages/primitives/number-field/src/number-field-root.ts b/packages/primitives/number-field/src/number-field-root.ts
index f1edd2200..e630c9b25 100644
--- a/packages/primitives/number-field/src/number-field-root.ts
+++ b/packages/primitives/number-field/src/number-field-root.ts
@@ -1,3 +1,6 @@
+import { numberOrUndefined, toValidatedNumber, useNumberFormatter, useNumberParser } from './number-field.utils';
+import { provideNumberFieldRootContext } from './number-field-context';
+import { Direction, InputMode, NumberFieldChangeReason, REASONS } from './types';
 import {
     booleanAttribute,
     computed,
@@ -23,9 +26,6 @@ import {
     RdxFormUiTouchTarget,
     RdxFormValueControl
 } from '@radix-ng/primitives/core';
-import { provideNumberFieldRootContext } from './number-field-context';
-import { numberOrUndefined, toValidatedNumber, useNumberFormatter, useNumberParser } from './number-field.utils';
-import { Direction, InputMode, NumberFieldChangeReason, REASONS } from './types';
 
 const INPUT_REASONS: NumberFieldChangeReason[] = [
     REASONS.inputChange,
diff --git a/packages/primitives/number-field/src/number-field-scrub-area-cursor.ts b/packages/primitives/number-field/src/number-field-scrub-area-cursor.ts
index 76bdb2794..ebb7acc64 100644
--- a/packages/primitives/number-field/src/number-field-scrub-area-cursor.ts
+++ b/packages/primitives/number-field/src/number-field-scrub-area-cursor.ts
@@ -1,6 +1,6 @@
+import { injectNumberFieldScrubAreaContext } from './number-field-scrub-area-context';
 import { computed, DestroyRef, Directive, ElementRef, inject } from '@angular/core';
 import { RdxPortal } from '@radix-ng/primitives/portal';
-import { injectNumberFieldScrubAreaContext } from './number-field-scrub-area-context';
 
 function isWebKitBrowser(): boolean {
     return (
diff --git a/packages/primitives/number-field/src/number-field-scrub-area.ts b/packages/primitives/number-field/src/number-field-scrub-area.ts
index 3e14f3958..52d10dc22 100644
--- a/packages/primitives/number-field/src/number-field-scrub-area.ts
+++ b/packages/primitives/number-field/src/number-field-scrub-area.ts
@@ -1,8 +1,8 @@
-import { computed, Directive, effect, ElementRef, inject, input, numberAttribute, signal } from '@angular/core';
-import { NumberInput } from '@radix-ng/primitives/core';
+import { numberOrUndefined } from './number-field.utils';
 import { injectNumberFieldRootContext } from './number-field-context';
 import { provideNumberFieldScrubAreaContext, RdxNumberFieldScrubAreaContext } from './number-field-scrub-area-context';
-import { numberOrUndefined } from './number-field.utils';
+import { computed, Directive, effect, ElementRef, inject, input, numberAttribute, signal } from '@angular/core';
+import { NumberInput } from '@radix-ng/primitives/core';
 
 type ScrubDirection = 'horizontal' | 'vertical';
 
diff --git a/packages/primitives/number-field/src/number-field.utils.ts b/packages/primitives/number-field/src/number-field.utils.ts
index 997b933dd..7f1cf89e7 100644
--- a/packages/primitives/number-field/src/number-field.utils.ts
+++ b/packages/primitives/number-field/src/number-field.utils.ts
@@ -1,4 +1,4 @@
-import { computed, DestroyRef, inject, numberAttribute, signal, Signal } from '@angular/core';
+import { computed, DestroyRef, inject, numberAttribute, Signal, signal } from '@angular/core';
 import { NumberFormatter, NumberParser } from '@internationalized/number';
 import { clamp, NumberInput } from '@radix-ng/primitives/core';
 
diff --git a/packages/primitives/number-field/stories/number-field-currency.ts b/packages/primitives/number-field/stories/number-field-currency.ts
index d1934ac35..eea663912 100644
--- a/packages/primitives/number-field/stories/number-field-currency.ts
+++ b/packages/primitives/number-field/stories/number-field-currency.ts
@@ -20,7 +20,7 @@ import {
         RdxNumberFieldDecrement
     ],
     template: `
-        <div class="flex flex-col gap-1.5" [id]="'currency'" [defaultValue]="5" [format]="format" rdxNumberFieldRoot>
+        <div class="flex flex-col gap-1.5" rdxNumberFieldRoot [id]="'currency'" [defaultValue]="5" [format]="format">
             <label class="text-foreground text-sm font-medium" for="currency">Price</label>
             <div
                 class="border-border bg-background focus-within:ring-ring flex h-9 w-fit items-center rounded-md border shadow-sm focus-within:ring-2"
@@ -30,7 +30,7 @@ import {
                     class="text-foreground hover:bg-muted flex size-9 items-center justify-center rounded-l-md outline-none select-none disabled:pointer-events-none disabled:opacity-40"
                     rdxNumberFieldDecrement
                 >
-                    <svg class="flex" [lucideIcon]="Minus" size="16" />
+                    <svg class="flex" size="16" [lucideIcon]="Minus" />
                 </button>
                 <input
                     class="text-foreground h-9 w-28 bg-transparent text-center tabular-nums outline-none"
@@ -40,7 +40,7 @@ import {
                     class="text-foreground hover:bg-muted flex size-9 items-center justify-center rounded-r-md outline-none select-none disabled:pointer-events-none disabled:opacity-40"
                     rdxNumberFieldIncrement
                 >
-                    <svg class="flex" [lucideIcon]="Plus" size="16" />
+                    <svg class="flex" size="16" [lucideIcon]="Plus" />
                 </button>
             </div>
         </div>
diff --git a/packages/primitives/number-field/stories/number-field-decimal.ts b/packages/primitives/number-field/stories/number-field-decimal.ts
index 626c9b780..abfc5282b 100644
--- a/packages/primitives/number-field/stories/number-field-decimal.ts
+++ b/packages/primitives/number-field/stories/number-field-decimal.ts
@@ -23,10 +23,10 @@ import {
         <div
             class="flex flex-col gap-1.5"
             id="decimal"
+            rdxNumberFieldRoot
             [defaultValue]="0"
             [format]="format"
             [step]="0.1"
-            rdxNumberFieldRoot
         >
             <label class="text-foreground text-sm font-medium" for="decimal">Decimal</label>
             <div
@@ -37,7 +37,7 @@ import {
                     class="text-foreground hover:bg-muted flex size-9 items-center justify-center rounded-l-md outline-none select-none disabled:pointer-events-none disabled:opacity-40"
                     rdxNumberFieldDecrement
                 >
-                    <svg class="flex" [lucideIcon]="Minus" size="16" />
+                    <svg class="flex" size="16" [lucideIcon]="Minus" />
                 </button>
                 <input
                     class="text-foreground h-9 w-20 bg-transparent text-center tabular-nums outline-none"
@@ -47,7 +47,7 @@ import {
                     class="text-foreground hover:bg-muted flex size-9 items-center justify-center rounded-r-md outline-none select-none disabled:pointer-events-none disabled:opacity-40"
                     rdxNumberFieldIncrement
                 >
-                    <svg class="flex" [lucideIcon]="Plus" size="16" />
+                    <svg class="flex" size="16" [lucideIcon]="Plus" />
                 </button>
             </div>
         </div>
diff --git a/packages/primitives/number-field/stories/number-field-default.ts b/packages/primitives/number-field/stories/number-field-default.ts
index 171a3c006..4a2746f24 100644
--- a/packages/primitives/number-field/stories/number-field-default.ts
+++ b/packages/primitives/number-field/stories/number-field-default.ts
@@ -20,7 +20,7 @@ import {
         RdxNumberFieldDecrement
     ],
     template: `
-        <div class="flex flex-col gap-1.5" [id]="'quantity'" [defaultValue]="100" [min]="0" rdxNumberFieldRoot>
+        <div class="flex flex-col gap-1.5" rdxNumberFieldRoot [id]="'quantity'" [defaultValue]="100" [min]="0">
             <label class="text-foreground text-sm font-medium" for="quantity">Quantity</label>
             <div
                 class="border-border bg-background focus-within:ring-ring flex h-9 w-fit items-center rounded-md border shadow-sm focus-within:ring-2"
@@ -30,7 +30,7 @@ import {
                     class="text-foreground hover:bg-muted flex size-9 items-center justify-center rounded-l-md outline-none select-none disabled:pointer-events-none disabled:opacity-40"
                     rdxNumberFieldDecrement
                 >
-                    <svg class="flex" [lucideIcon]="Minus" size="16" />
+                    <svg class="flex" size="16" [lucideIcon]="Minus" />
                 </button>
                 <input
                     class="text-foreground h-9 w-16 bg-transparent text-center tabular-nums outline-none"
@@ -40,7 +40,7 @@ import {
                     class="text-foreground hover:bg-muted flex size-9 items-center justify-center rounded-r-md outline-none select-none disabled:pointer-events-none disabled:opacity-40"
                     rdxNumberFieldIncrement
                 >
-                    <svg class="flex" [lucideIcon]="Plus" size="16" />
+                    <svg class="flex" size="16" [lucideIcon]="Plus" />
                 </button>
             </div>
         </div>
diff --git a/packages/primitives/number-field/stories/number-field-forms.ts b/packages/primitives/number-field/stories/number-field-forms.ts
index 65988a0b1..ff71be274 100644
--- a/packages/primitives/number-field/stories/number-field-forms.ts
+++ b/packages/primitives/number-field/stories/number-field-forms.ts
@@ -28,11 +28,11 @@ import {
             <div
                 class="flex flex-col gap-1.5"
                 id="guests"
-                [min]="1"
-                [max]="9"
                 name="guests"
                 formControlName="guests"
                 rdxNumberFieldRoot
+                [min]="1"
+                [max]="9"
             >
                 <label class="text-foreground text-sm font-medium" for="guests">Guests</label>
                 <input rdxNumberFieldHiddenInput />
@@ -44,7 +44,7 @@ import {
                         class="text-foreground hover:bg-muted flex size-9 items-center justify-center rounded-l-md outline-none select-none disabled:pointer-events-none disabled:opacity-40"
                         rdxNumberFieldDecrement
                     >
-                        <svg class="flex" [lucideIcon]="Minus" size="16" />
+                        <svg class="flex" size="16" [lucideIcon]="Minus" />
                     </button>
                     <input
                         class="text-foreground h-9 w-16 bg-transparent text-center tabular-nums outline-none"
@@ -54,7 +54,7 @@ import {
                         class="text-foreground hover:bg-muted flex size-9 items-center justify-center rounded-r-md outline-none select-none disabled:pointer-events-none disabled:opacity-40"
                         rdxNumberFieldIncrement
                     >
-                        <svg class="flex" [lucideIcon]="Plus" size="16" />
+                        <svg class="flex" size="16" [lucideIcon]="Plus" />
                     </button>
                 </div>
             </div>
diff --git a/packages/primitives/number-field/stories/number-field-percentage.ts b/packages/primitives/number-field/stories/number-field-percentage.ts
index e0ef036f8..20be406bd 100644
--- a/packages/primitives/number-field/stories/number-field-percentage.ts
+++ b/packages/primitives/number-field/stories/number-field-percentage.ts
@@ -23,10 +23,10 @@ import {
         <div
             class="flex flex-col gap-1.5"
             id="percentage"
+            rdxNumberFieldRoot
             [defaultValue]="0.05"
             [format]="format"
             [step]="0.01"
-            rdxNumberFieldRoot
         >
             <label class="text-foreground text-sm font-medium" for="percentage">Percentage</label>
             <div
@@ -37,7 +37,7 @@ import {
                     class="text-foreground hover:bg-muted flex size-9 items-center justify-center rounded-l-md outline-none select-none disabled:pointer-events-none disabled:opacity-40"
                     rdxNumberFieldDecrement
                 >
-                    <svg class="flex" [lucideIcon]="Minus" size="16" />
+                    <svg class="flex" size="16" [lucideIcon]="Minus" />
                 </button>
                 <input
                     class="text-foreground h-9 w-20 bg-transparent text-center tabular-nums outline-none"
@@ -47,7 +47,7 @@ import {
                     class="text-foreground hover:bg-muted flex size-9 items-center justify-center rounded-r-md outline-none select-none disabled:pointer-events-none disabled:opacity-40"
                     rdxNumberFieldIncrement
                 >
-                    <svg class="flex" [lucideIcon]="Plus" size="16" />
+                    <svg class="flex" size="16" [lucideIcon]="Plus" />
                 </button>
             </div>
         </div>
diff --git a/packages/primitives/number-field/stories/number-field-scrub.ts b/packages/primitives/number-field/stories/number-field-scrub.ts
index 1b8b6a7a0..c4f1dc71b 100644
--- a/packages/primitives/number-field/stories/number-field-scrub.ts
+++ b/packages/primitives/number-field/stories/number-field-scrub.ts
@@ -29,15 +29,15 @@ import {
         RdxNumberFieldScrubAreaCursor
     ],
     template: `
-        <div class="flex flex-col gap-1.5" [id]="'scrub'" [defaultValue]="0" rdxNumberFieldRoot>
+        <div class="flex flex-col gap-1.5" rdxNumberFieldRoot [id]="'scrub'" [defaultValue]="0">
             <div
                 class="text-foreground flex w-fit cursor-ew-resize items-center gap-1.5 text-sm font-medium select-none"
                 rdxNumberFieldScrubArea
             >
-                <svg class="flex" [lucideIcon]="Move" size="16" />
+                <svg class="flex" size="16" [lucideIcon]="Move" />
                 <label for="scrub">Drag to scrub</label>
                 <span class="text-popover-foreground" rdxNumberFieldScrubAreaCursor>
-                    <svg class="flex" [lucideIcon]="Move" size="20" />
+                    <svg class="flex" size="20" [lucideIcon]="Move" />
                 </span>
             </div>
             <div
@@ -48,7 +48,7 @@ import {
                     class="text-foreground hover:bg-muted flex size-9 items-center justify-center rounded-l-md outline-none select-none disabled:pointer-events-none disabled:opacity-40"
                     rdxNumberFieldDecrement
                 >
-                    <svg class="flex" [lucideIcon]="Minus" size="16" />
+                    <svg class="flex" size="16" [lucideIcon]="Minus" />
                 </button>
                 <input
                     class="text-foreground h-9 w-16 bg-transparent text-center tabular-nums outline-none"
@@ -58,7 +58,7 @@ import {
                     class="text-foreground hover:bg-muted flex size-9 items-center justify-center rounded-r-md outline-none select-none disabled:pointer-events-none disabled:opacity-40"
                     rdxNumberFieldIncrement
                 >
-                    <svg class="flex" [lucideIcon]="Plus" size="16" />
+                    <svg class="flex" size="16" [lucideIcon]="Plus" />
                 </button>
             </div>
         </div>
diff --git a/packages/primitives/number-field/stories/number-field.stories.ts b/packages/primitives/number-field/stories/number-field.stories.ts
index c90f55af6..ea4f7cf9d 100644
--- a/packages/primitives/number-field/stories/number-field.stories.ts
+++ b/packages/primitives/number-field/stories/number-field.stories.ts
@@ -1,4 +1,3 @@
-import { Meta, moduleMetadata, StoryObj } from '@storybook/angular';
 import { tailwindDemoDecorator } from '../../storybook/tailwind-demo';
 import { NumberFieldCurrencyExample } from './number-field-currency';
 import currencySource from './number-field-currency?raw';
@@ -12,6 +11,7 @@ import { NumberFieldPercentageExample } from './number-field-percentage';
 import percentageSource from './number-field-percentage?raw';
 import { NumberFieldScrubExample } from './number-field-scrub';
 import scrubSource from './number-field-scrub?raw';
+import { Meta, moduleMetadata, StoryObj } from '@storybook/angular';
 
 const html = String.raw;
 
diff --git a/packages/primitives/pagination/index.ts b/packages/primitives/pagination/index.ts
index 3476ef12b..bc086ccab 100644
--- a/packages/primitives/pagination/index.ts
+++ b/packages/primitives/pagination/index.ts
@@ -1,19 +1,19 @@
-import { NgModule } from '@angular/core';
 import { RdxPaginationEllipsisDirective } from './src/pagination-ellipsis.directive';
 import { RdxPaginationFirstDirective } from './src/pagination-first.directive';
 import { RdxPaginationLastDirective } from './src/pagination-last.directive';
-import { RdxPaginationListItemDirective } from './src/pagination-list-item.directive';
 import { RdxPaginationListDirective } from './src/pagination-list.directive';
+import { RdxPaginationListItemDirective } from './src/pagination-list-item.directive';
 import { RdxPaginationNextDirective } from './src/pagination-next.directive';
 import { RdxPaginationPrevDirective } from './src/pagination-prev.directive';
 import { RdxPaginationRootDirective } from './src/pagination-root.directive';
+import { NgModule } from '@angular/core';
 
 export * from './src/pagination-context.token';
 export * from './src/pagination-ellipsis.directive';
 export * from './src/pagination-first.directive';
 export * from './src/pagination-last.directive';
-export * from './src/pagination-list-item.directive';
 export * from './src/pagination-list.directive';
+export * from './src/pagination-list-item.directive';
 export * from './src/pagination-next.directive';
 export * from './src/pagination-prev.directive';
 export * from './src/pagination-root.directive';
diff --git a/packages/primitives/pagination/src/pagination-first.directive.ts b/packages/primitives/pagination/src/pagination-first.directive.ts
index c5121c19e..5b80609d7 100644
--- a/packages/primitives/pagination/src/pagination-first.directive.ts
+++ b/packages/primitives/pagination/src/pagination-first.directive.ts
@@ -1,5 +1,5 @@
-import { computed, Directive } from '@angular/core';
 import { injectPaginationRootContext } from './pagination-context.token';
+import { computed, Directive } from '@angular/core';
 
 // as Button
 @Directive({
diff --git a/packages/primitives/pagination/src/pagination-last.directive.ts b/packages/primitives/pagination/src/pagination-last.directive.ts
index 5b7c811fc..d74af73e5 100644
--- a/packages/primitives/pagination/src/pagination-last.directive.ts
+++ b/packages/primitives/pagination/src/pagination-last.directive.ts
@@ -1,5 +1,5 @@
-import { computed, Directive } from '@angular/core';
 import { injectPaginationRootContext } from './pagination-context.token';
+import { computed, Directive } from '@angular/core';
 
 // as Button
 @Directive({
diff --git a/packages/primitives/pagination/src/pagination-list-item.directive.ts b/packages/primitives/pagination/src/pagination-list-item.directive.ts
index de12e43b2..aa8c50e25 100644
--- a/packages/primitives/pagination/src/pagination-list-item.directive.ts
+++ b/packages/primitives/pagination/src/pagination-list-item.directive.ts
@@ -1,5 +1,5 @@
-import { computed, Directive, input } from '@angular/core';
 import { injectPaginationRootContext } from './pagination-context.token';
+import { computed, Directive, input } from '@angular/core';
 
 // as Button
 @Directive({
diff --git a/packages/primitives/pagination/src/pagination-list.directive.ts b/packages/primitives/pagination/src/pagination-list.directive.ts
index b80411639..089d26e31 100644
--- a/packages/primitives/pagination/src/pagination-list.directive.ts
+++ b/packages/primitives/pagination/src/pagination-list.directive.ts
@@ -1,6 +1,6 @@
-import { computed, Directive } from '@angular/core';
 import { injectPaginationRootContext } from './pagination-context.token';
 import { getRange, transform } from './utils';
+import { computed, Directive } from '@angular/core';
 
 @Directive({
     selector: '[rdxPaginationList]',
diff --git a/packages/primitives/pagination/src/pagination-next.directive.ts b/packages/primitives/pagination/src/pagination-next.directive.ts
index 77fd748ad..2f66ef8c8 100644
--- a/packages/primitives/pagination/src/pagination-next.directive.ts
+++ b/packages/primitives/pagination/src/pagination-next.directive.ts
@@ -1,5 +1,5 @@
-import { computed, Directive } from '@angular/core';
 import { injectPaginationRootContext } from './pagination-context.token';
+import { computed, Directive } from '@angular/core';
 
 // as Button
 @Directive({
diff --git a/packages/primitives/pagination/src/pagination-prev.directive.ts b/packages/primitives/pagination/src/pagination-prev.directive.ts
index 34e8d1f0b..20cb3e550 100644
--- a/packages/primitives/pagination/src/pagination-prev.directive.ts
+++ b/packages/primitives/pagination/src/pagination-prev.directive.ts
@@ -1,5 +1,5 @@
-import { computed, Directive } from '@angular/core';
 import { injectPaginationRootContext } from './pagination-context.token';
+import { computed, Directive } from '@angular/core';
 
 // as Button
 @Directive({
diff --git a/packages/primitives/pagination/src/pagination-root.directive.ts b/packages/primitives/pagination/src/pagination-root.directive.ts
index 057b82e9d..655c4330c 100644
--- a/packages/primitives/pagination/src/pagination-root.directive.ts
+++ b/packages/primitives/pagination/src/pagination-root.directive.ts
@@ -1,3 +1,4 @@
+import { PAGINATION_ROOT_CONTEXT } from './pagination-context.token';
 import {
     booleanAttribute,
     computed,
@@ -9,7 +10,6 @@ import {
     output
 } from '@angular/core';
 import { BooleanInput, NumberInput } from '@radix-ng/primitives/core';
-import { PAGINATION_ROOT_CONTEXT } from './pagination-context.token';
 
 @Directive({
     selector: '[rdxPaginationRoot]',
diff --git a/packages/primitives/pagination/stories/pagination.stories.ts b/packages/primitives/pagination/stories/pagination.stories.ts
index 884503697..f919a5c0c 100644
--- a/packages/primitives/pagination/stories/pagination.stories.ts
+++ b/packages/primitives/pagination/stories/pagination.stories.ts
@@ -1,14 +1,14 @@
-import { LucideChevronLeft, LucideChevronRight, LucideChevronsLeft, LucideChevronsRight } from '@lucide/angular';
-import { Meta, moduleMetadata, StoryObj } from '@storybook/angular';
 import { tailwindDemoDecorator } from '../../storybook/tailwind-demo';
 import { RdxPaginationEllipsisDirective } from '../src/pagination-ellipsis.directive';
 import { RdxPaginationFirstDirective } from '../src/pagination-first.directive';
 import { RdxPaginationLastDirective } from '../src/pagination-last.directive';
-import { RdxPaginationListItemDirective } from '../src/pagination-list-item.directive';
 import { RdxPaginationListDirective } from '../src/pagination-list.directive';
+import { RdxPaginationListItemDirective } from '../src/pagination-list-item.directive';
 import { RdxPaginationNextDirective } from '../src/pagination-next.directive';
 import { RdxPaginationPrevDirective } from '../src/pagination-prev.directive';
 import { RdxPaginationRootDirective } from '../src/pagination-root.directive';
+import { LucideChevronLeft, LucideChevronRight, LucideChevronsLeft, LucideChevronsRight } from '@lucide/angular';
+import { Meta, moduleMetadata, StoryObj } from '@storybook/angular';
 
 export default {
     title: 'Primitives/Pagination',
diff --git a/packages/primitives/popover/__tests__/popover.spec.ts b/packages/primitives/popover/__tests__/popover.spec.ts
index 8fa9e0a78..6b28bfe3e 100644
--- a/packages/primitives/popover/__tests__/popover.spec.ts
+++ b/packages/primitives/popover/__tests__/popover.spec.ts
@@ -34,7 +34,7 @@ import { vi } from 'vitest';
         RdxPopoverTrigger
     ],
     template: `
-        <div #root="rdxPopoverRoot" [(open)]="open" [defaultOpen]="defaultOpen" rdxPopoverRoot>
+        <div #root="rdxPopoverRoot" rdxPopoverRoot [defaultOpen]="defaultOpen" [(open)]="open">
             <button rdxPopoverTrigger>Open</button>
 
             @if (root.open()) {
@@ -59,7 +59,7 @@ class TestHostComponent {
     imports: [RdxPopoverPopup, RdxPopoverPositioner, RdxPopoverRoot, RdxPopoverTrigger],
     template: `
         <button data-testid="previous">Previous</button>
-        <div #root="rdxPopoverRoot" [(open)]="open" rdxPopoverRoot>
+        <div #root="rdxPopoverRoot" rdxPopoverRoot [(open)]="open">
             <button rdxPopoverTrigger>Open</button>
 
             @if (root.open()) {
@@ -81,7 +81,7 @@ class FocusGuardHostComponent {
     changeDetection: ChangeDetectionStrategy.Eager,
     imports: [RdxPopoverRoot, RdxPopoverTrigger],
     template: `
-        <div [defaultOpen]="true" rdxPopoverRoot>
+        <div rdxPopoverRoot [defaultOpen]="true">
             <button rdxPopoverTrigger>Open</button>
         </div>
     `
@@ -105,7 +105,7 @@ class PortalHostComponent {}
     changeDetection: ChangeDetectionStrategy.Eager,
     imports: [RdxPopoverPopup, RdxPopoverPortal, RdxPopoverPositioner, RdxPopoverRoot, RdxPopoverTrigger],
     template: `
-        <div #root="rdxPopoverRoot" (onOpenChangeComplete)="complete.push($event)" rdxPopoverRoot>
+        <div #root="rdxPopoverRoot" rdxPopoverRoot (onOpenChangeComplete)="complete.push($event)">
             <button rdxPopoverTrigger>Open</button>
 
             <div *rdxPopoverPortal data-test-lifecycle-portal rdxPopoverPositioner>
@@ -123,13 +123,13 @@ class LifecycleHostComponent {
     imports: [RdxPopoverPopup, RdxPopoverPortal, RdxPopoverPositioner, RdxPopoverRoot, RdxPopoverTrigger],
     template: `
         <div #parent="rdxPopoverRoot" rdxPopoverRoot>
-            <button [delay]="0" openOnHover rdxPopoverTrigger>Parent trigger</button>
+            <button openOnHover rdxPopoverTrigger [delay]="0">Parent trigger</button>
 
             @if (parent.open()) {
                 <div rdxPopoverPositioner>
                     <div rdxPopoverPopup>
                         <div #child="rdxPopoverRoot" rdxPopoverRoot>
-                            <button [delay]="0" openOnHover rdxPopoverTrigger>Child trigger</button>
+                            <button openOnHover rdxPopoverTrigger [delay]="0">Child trigger</button>
 
                             <div *rdxPopoverPortal data-test-child-portal rdxPopoverPositioner>
                                 <div rdxPopoverPopup>Child popup</div>
@@ -167,7 +167,7 @@ class PositionerDefaultsHostComponent {}
     changeDetection: ChangeDetectionStrategy.Eager,
     imports: [RdxPopoverClose, RdxPopoverPopup, RdxPopoverPositioner, RdxPopoverRoot, RdxPopoverTrigger],
     template: `
-        <div #root="rdxPopoverRoot" [modal]="modal" rdxPopoverRoot>
+        <div #root="rdxPopoverRoot" rdxPopoverRoot [modal]="modal">
             <button rdxPopoverTrigger>Open</button>
 
             @if (root.open()) {
@@ -209,10 +209,10 @@ class MultipleTriggersHostComponent {}
     changeDetection: ChangeDetectionStrategy.Eager,
     imports: [RdxPopoverPopup, RdxPopoverPositioner, RdxPopoverRoot, RdxPopoverTrigger],
     template: `
-        <button id="detached-one" [handle]="handle" payload="one" rdxPopoverTrigger>One</button>
-        <button id="detached-two" [handle]="handle" payload="two" rdxPopoverTrigger>Two</button>
+        <button id="detached-one" payload="one" rdxPopoverTrigger [handle]="handle">One</button>
+        <button id="detached-two" payload="two" rdxPopoverTrigger [handle]="handle">Two</button>
 
-        <div #root="rdxPopoverRoot" [handle]="handle" rdxPopoverRoot>
+        <div #root="rdxPopoverRoot" rdxPopoverRoot [handle]="handle">
             @if (root.open()) {
                 <div rdxPopoverPositioner>
                     <div rdxPopoverPopup>Popup</div>
@@ -245,7 +245,7 @@ class RemovableTriggerHostComponent {
     imports: [RdxPopoverClose, RdxPopoverPopup, RdxPopoverPositioner, RdxPopoverRoot, RdxPopoverTrigger],
     template: `
         <div #root="rdxPopoverRoot" rdxPopoverRoot>
-            <button [closeDelay]="closeDelay" [delay]="delay" openOnHover rdxPopoverTrigger>Open</button>
+            <button openOnHover rdxPopoverTrigger [closeDelay]="closeDelay" [delay]="delay">Open</button>
 
             @if (root.open()) {
                 <div rdxPopoverPositioner>
@@ -291,12 +291,12 @@ class ViewportHostComponent {}
     template: `
         <div
             #root="rdxPopoverRoot"
-            [(open)]="open"
-            [(triggerId)]="triggerId"
+            rdxPopoverRoot
             [defaultOpen]="defaultOpen"
             [defaultTriggerId]="defaultTriggerId"
+            [(open)]="open"
+            [(triggerId)]="triggerId"
             (onOpenChange)="changes.push($event)"
-            rdxPopoverRoot
         >
             <button id="controlled-one" payload="one" rdxPopoverTrigger>One</button>
             <button id="controlled-two" payload="two" rdxPopoverTrigger>Two</button>
@@ -324,12 +324,12 @@ class ControlledMultipleTriggersHostComponent {
     changeDetection: ChangeDetectionStrategy.Eager,
     imports: [RdxPopoverPopup, RdxPopoverPositioner, RdxPopoverRoot, RdxPopoverTrigger],
     template: `
-        <div #root="rdxPopoverRoot" [open]="true" rdxPopoverRoot>
+        <div #root="rdxPopoverRoot" rdxPopoverRoot [open]="true">
             <button rdxPopoverTrigger>Open</button>
 
             @if (root.open()) {
                 <div rdxPopoverPositioner>
-                    <div [finalFocus]="finalFocus" [initialFocus]="initialFocus" rdxPopoverPopup>
+                    <div rdxPopoverPopup [finalFocus]="finalFocus" [initialFocus]="initialFocus">
                         <button>Inside</button>
                     </div>
                 </div>
@@ -354,7 +354,7 @@ class PopupFocusPolicyHostComponent {
         RdxPopoverTrigger
     ],
     template: `
-        <div #root="rdxPopoverRoot" [open]="true" rdxPopoverRoot>
+        <div #root="rdxPopoverRoot" rdxPopoverRoot [open]="true">
             <button rdxPopoverTrigger>Open</button>
 
             @if (root.open()) {
@@ -376,7 +376,7 @@ class CustomLabelIdsHostComponent {}
     imports: [RdxPopoverBackdrop, RdxPopoverPopup, RdxPopoverPositioner, RdxPopoverRoot, RdxPopoverTrigger],
     template: `
         <div #root="rdxPopoverRoot" rdxPopoverRoot>
-            <button [delay]="0" openOnHover rdxPopoverTrigger>Open</button>
+            <button openOnHover rdxPopoverTrigger [delay]="0">Open</button>
 
             @if (root.open()) {
                 <div rdxPopoverBackdrop></div>
@@ -409,7 +409,7 @@ class TriggerWithoutRootHostComponent {}
         RdxPopoverTrigger
     ],
     template: `
-        <div [(open)]="open" (onOpenChange)="handleOpenChange($event)" rdxPopoverRoot>
+        <div rdxPopoverRoot [(open)]="open" (onOpenChange)="handleOpenChange($event)">
             <button rdxPopoverTrigger>Open</button>
 
             <div *rdxPopoverPortal rdxPopoverPositioner>
@@ -860,7 +860,7 @@ describe('Popover', () => {
                     <button #customAnchor>Custom anchor</button>
 
                     @if (root.open()) {
-                        <div [anchor]="customAnchor" rdxPopoverPositioner>
+                        <div rdxPopoverPositioner [anchor]="customAnchor">
                             <div rdxPopoverPopup>Popup</div>
                         </div>
                     }
diff --git a/packages/primitives/popover/index.ts b/packages/primitives/popover/index.ts
index 636408676..6117f7e43 100644
--- a/packages/primitives/popover/index.ts
+++ b/packages/primitives/popover/index.ts
@@ -1,4 +1,3 @@
-import { NgModule } from '@angular/core';
 import { RdxPopoverArrow } from './src/popover-arrow';
 import { RdxPopoverBackdrop } from './src/popover-backdrop';
 import { RdxPopoverClose } from './src/popover-close';
@@ -10,6 +9,7 @@ import { RdxPopoverRoot } from './src/popover-root';
 import { RdxPopoverTitle } from './src/popover-title';
 import { RdxPopoverTrigger } from './src/popover-trigger';
 import { RdxPopoverViewport } from './src/popover-viewport';
+import { NgModule } from '@angular/core';
 
 export * from './src/popover-arrow';
 export * from './src/popover-backdrop';
diff --git a/packages/primitives/popover/src/popover-arrow.ts b/packages/primitives/popover/src/popover-arrow.ts
index ca8e6ab05..6af097a48 100644
--- a/packages/primitives/popover/src/popover-arrow.ts
+++ b/packages/primitives/popover/src/popover-arrow.ts
@@ -1,6 +1,6 @@
+import { injectRdxPopoverRootContext } from './popover-root';
 import { computed, Directive, inject } from '@angular/core';
 import { RdxPopperArrow, RdxPopperContentWrapper } from '@radix-ng/primitives/popper';
-import { injectRdxPopoverRootContext } from './popover-root';
 
 /**
  * An optional arrow element rendered alongside the popover.
diff --git a/packages/primitives/popover/src/popover-backdrop.ts b/packages/primitives/popover/src/popover-backdrop.ts
index 2ac7be5b5..8de802ba9 100644
--- a/packages/primitives/popover/src/popover-backdrop.ts
+++ b/packages/primitives/popover/src/popover-backdrop.ts
@@ -1,6 +1,6 @@
+import { injectRdxPopoverRootContext } from './popover-root';
 import { DestroyRef, Directive, ElementRef, inject } from '@angular/core';
 import { RDX_FLOATING_ROOT_CONTEXT } from '@radix-ng/primitives/core';
-import { injectRdxPopoverRootContext } from './popover-root';
 
 /**
  * An optional backdrop rendered behind the popup.
diff --git a/packages/primitives/popover/src/popover-close.ts b/packages/primitives/popover/src/popover-close.ts
index 629d9c268..c4f56b0dd 100644
--- a/packages/primitives/popover/src/popover-close.ts
+++ b/packages/primitives/popover/src/popover-close.ts
@@ -1,6 +1,6 @@
-import { DestroyRef, Directive, inject } from '@angular/core';
 import { RdxPopoverPopup } from './popover-popup';
 import { injectRdxPopoverRootContext } from './popover-root';
+import { DestroyRef, Directive, inject } from '@angular/core';
 
 /**
  * A button that closes the popover.
diff --git a/packages/primitives/popover/src/popover-description.ts b/packages/primitives/popover/src/popover-description.ts
index cfc7bd8c2..7161e52ef 100644
--- a/packages/primitives/popover/src/popover-description.ts
+++ b/packages/primitives/popover/src/popover-description.ts
@@ -1,6 +1,6 @@
+import { injectRdxPopoverRootContext } from './popover-root';
 import { computed, DestroyRef, Directive, effect, inject, input } from '@angular/core';
 import { injectId } from '@radix-ng/primitives/core';
-import { injectRdxPopoverRootContext } from './popover-root';
 
 /**
  * An accessible description for the popover.
diff --git a/packages/primitives/popover/src/popover-handle.ts b/packages/primitives/popover/src/popover-handle.ts
index 4b06352e8..d295f7195 100644
--- a/packages/primitives/popover/src/popover-handle.ts
+++ b/packages/primitives/popover/src/popover-handle.ts
@@ -1,5 +1,5 @@
-import { computed, signal } from '@angular/core';
 import type { RdxPopoverRootContext } from './popover-root';
+import { computed, signal } from '@angular/core';
 
 /**
  * Connects a popover root with trigger elements rendered elsewhere in the DOM.
diff --git a/packages/primitives/popover/src/popover-popup.ts b/packages/primitives/popover/src/popover-popup.ts
index 280ba80fd..fb6a56630 100644
--- a/packages/primitives/popover/src/popover-popup.ts
+++ b/packages/primitives/popover/src/popover-popup.ts
@@ -1,3 +1,4 @@
+import { injectRdxPopoverRootContext } from './popover-root';
 import { computed, DestroyRef, Directive, ElementRef, inject, output } from '@angular/core';
 import { outputFromObservable, outputToObservable } from '@angular/core/rxjs-interop';
 import {
@@ -13,7 +14,6 @@ import {
 } from '@radix-ng/primitives/floating-focus-manager';
 import { RdxFocusScope } from '@radix-ng/primitives/focus-scope';
 import { RdxPopperContent, RdxPopperContentWrapper } from '@radix-ng/primitives/popper';
-import { injectRdxPopoverRootContext } from './popover-root';
 
 /**
  * A container for the popover contents.
diff --git a/packages/primitives/popover/src/popover-portal.ts b/packages/primitives/popover/src/popover-portal.ts
index d3ef06543..be7b431b2 100644
--- a/packages/primitives/popover/src/popover-portal.ts
+++ b/packages/primitives/popover/src/popover-portal.ts
@@ -1,8 +1,8 @@
+import { injectRdxPopoverRootContext } from './popover-root';
 import { Directive, isDevMode } from '@angular/core';
 import { rdxDevError } from '@radix-ng/primitives/core';
 import { RdxPortalPresence } from '@radix-ng/primitives/portal';
 import { provideRdxPresenceContext } from '@radix-ng/primitives/presence';
-import { injectRdxPopoverRootContext } from './popover-root';
 
 /**
  * Structural directive that teleports the popover content into a container (default `document.body`)
diff --git a/packages/primitives/popover/src/popover-positioner.ts b/packages/primitives/popover/src/popover-positioner.ts
index 813b37eb6..5223f38c1 100644
--- a/packages/primitives/popover/src/popover-positioner.ts
+++ b/packages/primitives/popover/src/popover-positioner.ts
@@ -1,3 +1,4 @@
+import { injectRdxPopoverRootContext } from './popover-root';
 import { Directive, effect, ElementRef, inject, signal } from '@angular/core';
 import { useGraceArea } from '@radix-ng/primitives/core';
 import {
@@ -6,7 +7,6 @@ import {
     provideRdxPopperContentWrapper,
     RdxPopperContentWrapper
 } from '@radix-ng/primitives/popper';
-import { injectRdxPopoverRootContext } from './popover-root';
 
 /**
  * Positions the popover against its trigger.
diff --git a/packages/primitives/popover/src/popover-root.ts b/packages/primitives/popover/src/popover-root.ts
index 40f771274..850732263 100644
--- a/packages/primitives/popover/src/popover-root.ts
+++ b/packages/primitives/popover/src/popover-root.ts
@@ -1,3 +1,4 @@
+import { RdxPopoverHandle } from './popover-handle';
 import {
     booleanAttribute,
     computed,
@@ -28,7 +29,6 @@ import {
 } from '@radix-ng/primitives/core';
 import { getInteractionTypeFromEvent, RdxInteractionType } from '@radix-ng/primitives/floating-focus-manager';
 import { RdxPopper } from '@radix-ng/primitives/popper';
-import { RdxPopoverHandle } from './popover-handle';
 
 export type RdxPopoverModal = boolean | 'trap-focus';
 /**
diff --git a/packages/primitives/popover/src/popover-title.ts b/packages/primitives/popover/src/popover-title.ts
index 46f4ab444..0395fd54d 100644
--- a/packages/primitives/popover/src/popover-title.ts
+++ b/packages/primitives/popover/src/popover-title.ts
@@ -1,6 +1,6 @@
+import { injectRdxPopoverRootContext } from './popover-root';
 import { computed, DestroyRef, Directive, effect, inject, input } from '@angular/core';
 import { injectId } from '@radix-ng/primitives/core';
-import { injectRdxPopoverRootContext } from './popover-root';
 
 /**
  * An accessible title for the popover.
diff --git a/packages/primitives/popover/src/popover-trigger.ts b/packages/primitives/popover/src/popover-trigger.ts
index 4bf0df95f..d96a656b9 100644
--- a/packages/primitives/popover/src/popover-trigger.ts
+++ b/packages/primitives/popover/src/popover-trigger.ts
@@ -1,3 +1,5 @@
+import { RdxPopoverHandle } from './popover-handle';
+import { injectRdxPopoverRootContext } from './popover-root';
 import {
     booleanAttribute,
     computed,
@@ -12,8 +14,6 @@ import {
 import { injectId, NumberInput, rdxDevError } from '@radix-ng/primitives/core';
 import { createRdxTriggerInteraction, useTriggerFocusGuards } from '@radix-ng/primitives/floating-focus-manager';
 import { RdxPopperAnchor } from '@radix-ng/primitives/popper';
-import { RdxPopoverHandle } from './popover-handle';
-import { injectRdxPopoverRootContext } from './popover-root';
 
 /**
  * A button that opens the popover.
diff --git a/packages/primitives/popover/src/popover-viewport.ts b/packages/primitives/popover/src/popover-viewport.ts
index 6d97bb05d..db5d9e1ba 100644
--- a/packages/primitives/popover/src/popover-viewport.ts
+++ b/packages/primitives/popover/src/popover-viewport.ts
@@ -1,6 +1,6 @@
+import { injectRdxPopoverRootContext } from './popover-root';
 import { afterNextRender, DestroyRef, Directive, ElementRef, inject, signal } from '@angular/core';
 import { getMaxTransitionDuration } from '@radix-ng/primitives/core';
-import { injectRdxPopoverRootContext } from './popover-root';
 
 /**
  * A viewport for animating content changes when a popover moves between triggers.
diff --git a/packages/primitives/popover/stories/learn-notifications-popover.ts b/packages/primitives/popover/stories/learn-notifications-popover.ts
index 2c318759b..9b492b4ad 100644
--- a/packages/primitives/popover/stories/learn-notifications-popover.ts
+++ b/packages/primitives/popover/stories/learn-notifications-popover.ts
@@ -21,8 +21,8 @@ import { popoverImports } from '@radix-ng/primitives/popover';
             </button>
 
             <div
-                class="data-[open]:animate-popover-in data-[closed]:animate-popover-out z-50"
                 *rdxPopoverPortal
+                class="data-[open]:animate-popover-in data-[closed]:animate-popover-out z-50"
                 sideOffset="8"
                 rdxPopoverPositioner
             >
diff --git a/packages/primitives/popover/stories/learn-popover-tutorial.stories.ts b/packages/primitives/popover/stories/learn-popover-tutorial.stories.ts
index 45ec9b8d5..9d720cd33 100644
--- a/packages/primitives/popover/stories/learn-popover-tutorial.stories.ts
+++ b/packages/primitives/popover/stories/learn-popover-tutorial.stories.ts
@@ -1,7 +1,7 @@
-import { popoverImports } from '@radix-ng/primitives/popover';
-import { Meta, moduleMetadata, StoryObj } from '@storybook/angular';
 import { tailwindDemoDecorator } from '../../storybook/tailwind-demo';
 import { LearnNotificationsPopover } from './learn-notifications-popover';
+import { popoverImports } from '@radix-ng/primitives/popover';
+import { Meta, moduleMetadata, StoryObj } from '@storybook/angular';
 
 const html = String.raw;
 
diff --git a/packages/primitives/popover/stories/popover-animated.ts b/packages/primitives/popover/stories/popover-animated.ts
index 5fab31473..b7e4825a0 100644
--- a/packages/primitives/popover/stories/popover-animated.ts
+++ b/packages/primitives/popover/stories/popover-animated.ts
@@ -1,7 +1,7 @@
+import { cn, demoButton, demoPopover } from '../../storybook/styles';
 import { ChangeDetectionStrategy, Component } from '@angular/core';
 import { LucideX } from '@lucide/angular';
 import { popoverImports } from '@radix-ng/primitives/popover';
-import { cn, demoButton, demoPopover } from '../../storybook/styles';
 
 @Component({
     changeDetection: ChangeDetectionStrategy.Eager,
@@ -9,16 +9,16 @@ import { cn, demoButton, demoPopover } from '../../storybook/styles';
     imports: [...popoverImports, LucideX],
     template: `
         <ng-container rdxPopoverRoot>
-            <button [class]="cn(b.base, b.outline, b.size.md)" rdxPopoverTrigger>Animated popover</button>
+            <button rdxPopoverTrigger [class]="cn(b.base, b.outline, b.size.md)">Animated popover</button>
 
-            <div *rdxPopoverPortal [class]="p.positioner" sideOffset="8" rdxPopoverPositioner>
-                <div [class]="cn(p.popup, p.popupAnimated)" rdxPopoverPopup>
-                    <span [class]="p.arrow" rdxPopoverArrow></span>
-                    <h2 [class]="p.title" rdxPopoverTitle>Native CSS keyframes</h2>
-                    <p [class]="p.description" rdxPopoverDescription>
+            <div *rdxPopoverPortal sideOffset="8" rdxPopoverPositioner [class]="p.positioner">
+                <div rdxPopoverPopup [class]="cn(p.popup, p.popupAnimated)">
+                    <span rdxPopoverArrow [class]="p.arrow"></span>
+                    <h2 rdxPopoverTitle [class]="p.title">Native CSS keyframes</h2>
+                    <p rdxPopoverDescription [class]="p.description">
                         Presence keeps this content mounted until the exit animation finishes.
                     </p>
-                    <button [class]="p.close" aria-label="Close" rdxPopoverClose>
+                    <button aria-label="Close" rdxPopoverClose [class]="p.close">
                         <svg aria-hidden="true" lucideX size="14" />
                     </button>
                 </div>
diff --git a/packages/primitives/popover/stories/popover-controlled-multiple.ts b/packages/primitives/popover/stories/popover-controlled-multiple.ts
index c35980e19..321a73022 100644
--- a/packages/primitives/popover/stories/popover-controlled-multiple.ts
+++ b/packages/primitives/popover/stories/popover-controlled-multiple.ts
@@ -1,7 +1,7 @@
+import { cn, demoButton, demoPopover } from '../../storybook/styles';
 import { ChangeDetectionStrategy, Component, signal } from '@angular/core';
 import { LucideX } from '@lucide/angular';
 import { popoverImports, RdxPopoverOpenChange } from '@radix-ng/primitives/popover';
-import { cn, demoButton, demoPopover } from '../../storybook/styles';
 
 @Component({
     changeDetection: ChangeDetectionStrategy.Eager,
@@ -10,18 +10,18 @@ import { cn, demoButton, demoPopover } from '../../storybook/styles';
     template: `
         <div class="flex flex-col items-center gap-4">
             <ng-container
+                rdxPopoverRoot
                 [(open)]="open"
                 [(triggerId)]="triggerId"
                 (onOpenChange)="handleOpenChange($event)"
-                rdxPopoverRoot
             >
                 <div class="flex flex-wrap justify-center gap-2">
                     @for (item of items; track item.id) {
                         <button
+                            rdxPopoverTrigger
                             [class]="cn(b.base, b.outline, b.size.sm)"
                             [id]="item.id"
                             [payload]="item"
-                            rdxPopoverTrigger
                         >
                             {{ item.label }}
                         </button>
@@ -32,14 +32,14 @@ import { cn, demoButton, demoPopover } from '../../storybook/styles';
                     </button>
                 </div>
 
-                <div *rdxPopoverPortal [class]="p.positioner" sideOffset="8" rdxPopoverPositioner>
-                    <div [class]="p.popup" rdxPopoverPopup>
-                        <span [class]="p.arrow" rdxPopoverArrow></span>
-                        <h2 [class]="p.title" rdxPopoverTitle>{{ activeItem()?.label }}</h2>
-                        <p [class]="p.description" rdxPopoverDescription>
+                <div *rdxPopoverPortal sideOffset="8" rdxPopoverPositioner [class]="p.positioner">
+                    <div rdxPopoverPopup [class]="p.popup">
+                        <span rdxPopoverArrow [class]="p.arrow"></span>
+                        <h2 rdxPopoverTitle [class]="p.title">{{ activeItem()?.label }}</h2>
+                        <p rdxPopoverDescription [class]="p.description">
                             The externally controlled trigger id is {{ triggerId() }}.
                         </p>
-                        <button [class]="p.close" aria-label="Close" rdxPopoverClose>
+                        <button aria-label="Close" rdxPopoverClose [class]="p.close">
                             <svg aria-hidden="true" lucideX size="14" />
                         </button>
                     </div>
diff --git a/packages/primitives/popover/stories/popover-controlled.ts b/packages/primitives/popover/stories/popover-controlled.ts
index 15b9d8763..17362f086 100644
--- a/packages/primitives/popover/stories/popover-controlled.ts
+++ b/packages/primitives/popover/stories/popover-controlled.ts
@@ -1,7 +1,7 @@
+import { cn, demoButton, demoPopover } from '../../storybook/styles';
 import { ChangeDetectionStrategy, Component, signal } from '@angular/core';
 import { LucideX } from '@lucide/angular';
 import { popoverImports } from '@radix-ng/primitives/popover';
-import { cn, demoButton, demoPopover } from '../../storybook/styles';
 
 @Component({
     changeDetection: ChangeDetectionStrategy.Eager,
@@ -16,19 +16,19 @@ import { cn, demoButton, demoPopover } from '../../storybook/styles';
 
             <p class="text-muted-foreground text-xs">State: {{ open() ? 'open' : 'closed' }}</p>
 
-            <ng-container [(open)]="open" rdxPopoverRoot>
-                <button [class]="cn(b.base, b.outline, b.size.md)" rdxPopoverTrigger>Toggle popover</button>
+            <ng-container rdxPopoverRoot [(open)]="open">
+                <button rdxPopoverTrigger [class]="cn(b.base, b.outline, b.size.md)">Toggle popover</button>
 
                 <ng-template rdxPopoverPortal>
-                    <div [class]="p.backdrop" rdxPopoverBackdrop></div>
-                    <div [class]="p.positioner" sideOffset="8" rdxPopoverPositioner>
-                        <div [class]="p.popup" rdxPopoverPopup>
-                            <span [class]="p.arrow" rdxPopoverArrow></span>
-                            <h2 [class]="p.title" rdxPopoverTitle>Controlled state</h2>
-                            <p [class]="p.description" rdxPopoverDescription>
+                    <div rdxPopoverBackdrop [class]="p.backdrop"></div>
+                    <div sideOffset="8" rdxPopoverPositioner [class]="p.positioner">
+                        <div rdxPopoverPopup [class]="p.popup">
+                            <span rdxPopoverArrow [class]="p.arrow"></span>
+                            <h2 rdxPopoverTitle [class]="p.title">Controlled state</h2>
+                            <p rdxPopoverDescription [class]="p.description">
                                 The root uses Angular two-way binding with a signal.
                             </p>
-                            <button [class]="p.close" aria-label="Close" rdxPopoverClose>
+                            <button aria-label="Close" rdxPopoverClose [class]="p.close">
                                 <svg aria-hidden="true" lucideX size="14" />
                             </button>
                         </div>
diff --git a/packages/primitives/popover/stories/popover-custom-anchor.ts b/packages/primitives/popover/stories/popover-custom-anchor.ts
index 2ae1eefb4..36215c0e5 100644
--- a/packages/primitives/popover/stories/popover-custom-anchor.ts
+++ b/packages/primitives/popover/stories/popover-custom-anchor.ts
@@ -1,7 +1,7 @@
+import { cn, demoButton, demoPopover } from '../../storybook/styles';
 import { ChangeDetectionStrategy, Component } from '@angular/core';
 import { LucideX } from '@lucide/angular';
 import { popoverImports } from '@radix-ng/primitives/popover';
-import { cn, demoButton, demoPopover } from '../../storybook/styles';
 
 @Component({
     changeDetection: ChangeDetectionStrategy.Eager,
@@ -10,29 +10,29 @@ import { cn, demoButton, demoPopover } from '../../storybook/styles';
     template: `
         <div class="flex w-[min(640px,80vw)] flex-col items-center gap-8">
             <ng-container rdxPopoverRoot>
-                <button [class]="cn(b.base, b.outline, b.size.md)" rdxPopoverTrigger>Open from this button</button>
+                <button rdxPopoverTrigger [class]="cn(b.base, b.outline, b.size.md)">Open from this button</button>
 
                 <div
-                    class="border-primary bg-primary/10 text-foreground flex h-24 w-56 items-center justify-center rounded-lg border border-dashed text-center text-sm font-medium"
                     #customAnchor
+                    class="border-primary bg-primary/10 text-foreground flex h-24 w-56 items-center justify-center rounded-lg border border-dashed text-center text-sm font-medium"
                 >
                     Popup anchor
                 </div>
 
                 <div
                     *rdxPopoverPortal
-                    [class]="p.positioner"
-                    [anchor]="customAnchor"
                     sideOffset="8"
                     rdxPopoverPositioner
+                    [class]="p.positioner"
+                    [anchor]="customAnchor"
                 >
-                    <div [class]="p.popup" rdxPopoverPopup>
-                        <span [class]="p.arrow" rdxPopoverArrow></span>
-                        <h2 [class]="p.title" rdxPopoverTitle>Custom anchor</h2>
-                        <p [class]="p.description" rdxPopoverDescription>
+                    <div rdxPopoverPopup [class]="p.popup">
+                        <span rdxPopoverArrow [class]="p.arrow"></span>
+                        <h2 rdxPopoverTitle [class]="p.title">Custom anchor</h2>
+                        <p rdxPopoverDescription [class]="p.description">
                             The trigger controls open state, but the positioner is anchored to the dashed box.
                         </p>
-                        <button [class]="p.close" aria-label="Close" rdxPopoverClose>
+                        <button aria-label="Close" rdxPopoverClose [class]="p.close">
                             <svg aria-hidden="true" lucideX size="14" />
                         </button>
                     </div>
diff --git a/packages/primitives/popover/stories/popover-default.ts b/packages/primitives/popover/stories/popover-default.ts
index 321cb0ae0..e5a71b9b5 100644
--- a/packages/primitives/popover/stories/popover-default.ts
+++ b/packages/primitives/popover/stories/popover-default.ts
@@ -1,7 +1,7 @@
+import { cn, demoButton, demoInput, demoPopover } from '../../storybook/styles';
 import { ChangeDetectionStrategy, Component } from '@angular/core';
 import { LucidePlus, LucideX } from '@lucide/angular';
 import { popoverImports } from '@radix-ng/primitives/popover';
-import { cn, demoButton, demoInput, demoPopover } from '../../storybook/styles';
 
 @Component({
     changeDetection: ChangeDetectionStrategy.Eager,
@@ -9,29 +9,29 @@ import { cn, demoButton, demoInput, demoPopover } from '../../storybook/styles';
     imports: [...popoverImports, LucidePlus, LucideX],
     template: `
         <ng-container rdxPopoverRoot>
-            <button [class]="cn(b.base, b.outline, b.size.md)" rdxPopoverTrigger>
+            <button rdxPopoverTrigger [class]="cn(b.base, b.outline, b.size.md)">
                 <svg aria-hidden="true" lucidePlus size="16" />
                 Add details
             </button>
 
-            <div *rdxPopoverPortal [class]="p.positioner" sideOffset="8" rdxPopoverPositioner>
-                <div [class]="p.popup" rdxPopoverPopup>
-                    <span [class]="p.arrow" rdxPopoverArrow></span>
-                    <h2 [class]="p.title" rdxPopoverTitle>Dimensions</h2>
-                    <p [class]="p.description" rdxPopoverDescription>Set the width and height for the element.</p>
+            <div *rdxPopoverPortal sideOffset="8" rdxPopoverPositioner [class]="p.positioner">
+                <div rdxPopoverPopup [class]="p.popup">
+                    <span rdxPopoverArrow [class]="p.arrow"></span>
+                    <h2 rdxPopoverTitle [class]="p.title">Dimensions</h2>
+                    <p rdxPopoverDescription [class]="p.description">Set the width and height for the element.</p>
 
                     <div class="mt-4 grid gap-3">
                         <label class="grid gap-1 text-xs font-medium">
                             Width
-                            <input [class]="input" value="100%" />
+                            <input value="100%" [class]="input" />
                         </label>
                         <label class="grid gap-1 text-xs font-medium">
                             Max width
-                            <input [class]="input" value="300px" />
+                            <input value="300px" [class]="input" />
                         </label>
                     </div>
 
-                    <button [class]="p.close" aria-label="Close" rdxPopoverClose>
+                    <button aria-label="Close" rdxPopoverClose [class]="p.close">
                         <svg aria-hidden="true" lucideX size="14" />
                     </button>
                 </div>
diff --git a/packages/primitives/popover/stories/popover-detached.ts b/packages/primitives/popover/stories/popover-detached.ts
index 6578886c6..a03e876fb 100644
--- a/packages/primitives/popover/stories/popover-detached.ts
+++ b/packages/primitives/popover/stories/popover-detached.ts
@@ -1,7 +1,7 @@
+import { cn, demoButton, demoPopover } from '../../storybook/styles';
 import { ChangeDetectionStrategy, Component } from '@angular/core';
 import { LucideX } from '@lucide/angular';
 import { createRdxPopoverHandle, popoverImports } from '@radix-ng/primitives/popover';
-import { cn, demoButton, demoPopover } from '../../storybook/styles';
 
 @Component({
     changeDetection: ChangeDetectionStrategy.Eager,
@@ -10,11 +10,11 @@ import { cn, demoButton, demoPopover } from '../../storybook/styles';
     template: `
         <div class="flex w-[min(640px,80vw)] flex-col items-center gap-8">
             <div class="flex w-full justify-between gap-4">
-                <button id="account" [class]="cn(b.base, b.outline, b.size.md)" [handle]="popover" rdxPopoverTrigger>
+                <button id="account" rdxPopoverTrigger [class]="cn(b.base, b.outline, b.size.md)" [handle]="popover">
                     Account trigger
                 </button>
 
-                <button id="billing" [class]="cn(b.base, b.outline, b.size.md)" [handle]="popover" rdxPopoverTrigger>
+                <button id="billing" rdxPopoverTrigger [class]="cn(b.base, b.outline, b.size.md)" [handle]="popover">
                     Billing trigger
                 </button>
             </div>
@@ -29,16 +29,16 @@ import { cn, demoButton, demoPopover } from '../../storybook/styles';
                 <button [class]="cn(b.base, b.ghost, b.size.sm)" (click)="popover.close()">Close</button>
             </div>
 
-            <ng-container [handle]="popover" rdxPopoverRoot>
-                <div *rdxPopoverPortal [class]="p.positioner" sideOffset="8" rdxPopoverPositioner>
-                    <div [class]="p.popup" rdxPopoverPopup>
-                        <span [class]="p.arrow" rdxPopoverArrow></span>
-                        <h2 [class]="p.title" rdxPopoverTitle>Detached handles</h2>
-                        <p [class]="p.description" rdxPopoverDescription>
+            <ng-container rdxPopoverRoot [handle]="popover">
+                <div *rdxPopoverPortal sideOffset="8" rdxPopoverPositioner [class]="p.positioner">
+                    <div rdxPopoverPopup [class]="p.popup">
+                        <span rdxPopoverArrow [class]="p.arrow"></span>
+                        <h2 rdxPopoverTitle [class]="p.title">Detached handles</h2>
+                        <p rdxPopoverDescription [class]="p.description">
                             Both triggers live outside the root. Open another trigger to move this popup without closing
                             it first.
                         </p>
-                        <button [class]="p.close" aria-label="Close" rdxPopoverClose>
+                        <button aria-label="Close" rdxPopoverClose [class]="p.close">
                             <svg aria-hidden="true" lucideX size="14" />
                         </button>
                     </div>
diff --git a/packages/primitives/popover/stories/popover-hover.ts b/packages/primitives/popover/stories/popover-hover.ts
index 693349ce5..2ef82f88a 100644
--- a/packages/primitives/popover/stories/popover-hover.ts
+++ b/packages/primitives/popover/stories/popover-hover.ts
@@ -1,7 +1,7 @@
+import { cn, demoButton, demoPopover } from '../../storybook/styles';
 import { ChangeDetectionStrategy, Component } from '@angular/core';
 import { LucideX } from '@lucide/angular';
 import { popoverImports } from '@radix-ng/primitives/popover';
-import { cn, demoButton, demoPopover } from '../../storybook/styles';
 
 @Component({
     changeDetection: ChangeDetectionStrategy.Eager,
@@ -9,18 +9,18 @@ import { cn, demoButton, demoPopover } from '../../storybook/styles';
     imports: [...popoverImports, LucideX],
     template: `
         <ng-container rdxPopoverRoot>
-            <button [class]="cn(b.base, b.outline, b.size.md)" [delay]="300" openOnHover rdxPopoverTrigger>
+            <button openOnHover rdxPopoverTrigger [class]="cn(b.base, b.outline, b.size.md)" [delay]="300">
                 Hover for details
             </button>
 
-            <div *rdxPopoverPortal [class]="p.positioner" sideOffset="8" rdxPopoverPositioner>
-                <div [class]="p.popup" rdxPopoverPopup>
-                    <span [class]="p.arrow" rdxPopoverArrow></span>
-                    <h2 [class]="p.title" rdxPopoverTitle>Hover popover</h2>
-                    <p [class]="p.description" rdxPopoverDescription>
+            <div *rdxPopoverPortal sideOffset="8" rdxPopoverPositioner [class]="p.positioner">
+                <div rdxPopoverPopup [class]="p.popup">
+                    <span rdxPopoverArrow [class]="p.arrow"></span>
+                    <h2 rdxPopoverTitle [class]="p.title">Hover popover</h2>
+                    <p rdxPopoverDescription [class]="p.description">
                         Move the pointer into this popup. It remains interactive after leaving the trigger.
                     </p>
-                    <button [class]="p.close" aria-label="Close" rdxPopoverClose>
+                    <button aria-label="Close" rdxPopoverClose [class]="p.close">
                         <svg aria-hidden="true" lucideX size="14" />
                     </button>
                 </div>
diff --git a/packages/primitives/popover/stories/popover-modal.ts b/packages/primitives/popover/stories/popover-modal.ts
index 5dc0a6781..e61085c64 100644
--- a/packages/primitives/popover/stories/popover-modal.ts
+++ b/packages/primitives/popover/stories/popover-modal.ts
@@ -1,7 +1,7 @@
+import { cn, demoButton, demoInput, demoPopover } from '../../storybook/styles';
 import { ChangeDetectionStrategy, Component, signal } from '@angular/core';
 import { LucideX } from '@lucide/angular';
 import { popoverImports, RdxPopoverModal } from '@radix-ng/primitives/popover';
-import { cn, demoButton, demoInput, demoPopover } from '../../storybook/styles';
 
 @Component({
     changeDetection: ChangeDetectionStrategy.Eager,
@@ -24,31 +24,31 @@ import { cn, demoButton, demoInput, demoPopover } from '../../storybook/styles';
                 {{ description() }}
             </p>
 
-            <ng-container [modal]="modal()" rdxPopoverRoot>
-                <button [class]="cn(b.base, b.outline, b.size.md)" rdxPopoverTrigger>Open popover</button>
+            <ng-container rdxPopoverRoot [modal]="modal()">
+                <button rdxPopoverTrigger [class]="cn(b.base, b.outline, b.size.md)">Open popover</button>
 
                 <ng-template rdxPopoverPortal>
                     @if (modal() === true) {
-                        <div [class]="p.backdrop" rdxPopoverBackdrop></div>
+                        <div rdxPopoverBackdrop [class]="p.backdrop"></div>
                     }
-                    <div [class]="p.positioner" sideOffset="8" rdxPopoverPositioner>
-                        <div [class]="p.popup" rdxPopoverPopup>
-                            <span [class]="p.arrow" rdxPopoverArrow></span>
-                            <h2 [class]="p.title" rdxPopoverTitle>Modal behavior</h2>
-                            <p [class]="p.description" rdxPopoverDescription>
+                    <div sideOffset="8" rdxPopoverPositioner [class]="p.positioner">
+                        <div rdxPopoverPopup [class]="p.popup">
+                            <span rdxPopoverArrow [class]="p.arrow"></span>
+                            <h2 rdxPopoverTitle [class]="p.title">Modal behavior</h2>
+                            <p rdxPopoverDescription [class]="p.description">
                                 Switch modes, use Tab to move between controls, then try the outside button.
                             </p>
 
                             <label class="mt-4 grid gap-1 text-xs font-medium">
                                 Name
-                                <input [class]="input" placeholder="Focused when opened" />
+                                <input placeholder="Focused when opened" [class]="input" />
                             </label>
 
-                            <button [class]="cn(b.base, b.primary, b.size.sm, 'mt-3')" type="button">
+                            <button type="button" [class]="cn(b.base, b.primary, b.size.sm, 'mt-3')">
                                 Save changes
                             </button>
 
-                            <button [class]="p.close" aria-label="Close" rdxPopoverClose>
+                            <button aria-label="Close" rdxPopoverClose [class]="p.close">
                                 <svg aria-hidden="true" lucideX size="14" />
                             </button>
                         </div>
diff --git a/packages/primitives/popover/stories/popover-positioning.ts b/packages/primitives/popover/stories/popover-positioning.ts
index 1353a0462..1cae4a166 100644
--- a/packages/primitives/popover/stories/popover-positioning.ts
+++ b/packages/primitives/popover/stories/popover-positioning.ts
@@ -1,8 +1,8 @@
+import { cn, demoButton, demoPopover } from '../../storybook/styles';
 import { ChangeDetectionStrategy, Component, signal } from '@angular/core';
 import { LucideX } from '@lucide/angular';
 import { popoverImports } from '@radix-ng/primitives/popover';
 import { Side } from '@radix-ng/primitives/popper';
-import { cn, demoButton, demoPopover } from '../../storybook/styles';
 
 @Component({
     changeDetection: ChangeDetectionStrategy.Eager,
@@ -22,22 +22,22 @@ import { cn, demoButton, demoPopover } from '../../storybook/styles';
             </div>
 
             <ng-container rdxPopoverRoot>
-                <button [class]="cn(b.base, b.outline, b.size.md)" rdxPopoverTrigger>Open {{ selectedSide() }}</button>
+                <button rdxPopoverTrigger [class]="cn(b.base, b.outline, b.size.md)">Open {{ selectedSide() }}</button>
 
                 <div
                     *rdxPopoverPortal
-                    [class]="p.positioner"
-                    [side]="selectedSide()"
                     sideOffset="8"
                     rdxPopoverPositioner
+                    [class]="p.positioner"
+                    [side]="selectedSide()"
                 >
-                    <div [class]="p.popup" rdxPopoverPopup>
-                        <span [class]="p.arrow" rdxPopoverArrow></span>
-                        <h2 [class]="p.title" rdxPopoverTitle>Positioned popup</h2>
-                        <p [class]="p.description" rdxPopoverDescription>
+                    <div rdxPopoverPopup [class]="p.popup">
+                        <span rdxPopoverArrow [class]="p.arrow"></span>
+                        <h2 rdxPopoverTitle [class]="p.title">Positioned popup</h2>
+                        <p rdxPopoverDescription [class]="p.description">
                             The positioner delegates collision handling to the shared Popper primitive.
                         </p>
-                        <button [class]="p.close" aria-label="Close" rdxPopoverClose>
+                        <button aria-label="Close" rdxPopoverClose [class]="p.close">
                             <svg aria-hidden="true" lucideX size="14" />
                         </button>
                     </div>
diff --git a/packages/primitives/popover/stories/popover-viewport.ts b/packages/primitives/popover/stories/popover-viewport.ts
index 25b733111..27fadc0fe 100644
--- a/packages/primitives/popover/stories/popover-viewport.ts
+++ b/packages/primitives/popover/stories/popover-viewport.ts
@@ -1,6 +1,6 @@
+import { cn, demoButton, demoPopover } from '../../storybook/styles';
 import { ChangeDetectionStrategy, Component } from '@angular/core';
 import { popoverImports } from '@radix-ng/primitives/popover';
-import { cn, demoButton, demoPopover } from '../../storybook/styles';
 
 @Component({
     changeDetection: ChangeDetectionStrategy.Eager,
@@ -11,10 +11,10 @@ import { cn, demoButton, demoPopover } from '../../storybook/styles';
             <div class="flex flex-wrap justify-center gap-2">
                 @for (item of items; track item.id) {
                     <button
+                        rdxPopoverTrigger
                         [class]="cn(b.base, b.outline, b.size.sm)"
                         [payload]="item"
                         [id]="item.id"
-                        rdxPopoverTrigger
                     >
                         {{ item.label }}
                     </button>
@@ -22,18 +22,18 @@ import { cn, demoButton, demoPopover } from '../../storybook/styles';
             </div>
 
             <div
-                class="transition-[left,right,top,bottom] duration-200"
                 *rdxPopoverPortal
+                class="transition-[left,right,top,bottom] duration-200"
                 sideOffset="8"
                 rdxPopoverPositioner
             >
-                <div [class]="cn(p.popup, 'overflow-hidden transition-[width,height] duration-200')" rdxPopoverPopup>
+                <div rdxPopoverPopup [class]="cn(p.popup, 'overflow-hidden transition-[width,height] duration-200')">
                     <div class="relative" rdxPopoverViewport>
                         <div
                             class="data-[previous]:animate-popover-viewport-out data-[current]:animate-popover-viewport-in data-[previous]:absolute data-[previous]:inset-0"
                         >
-                            <h2 [class]="p.title" rdxPopoverTitle>{{ root.payload()?.label }}</h2>
-                            <p [class]="p.description" rdxPopoverDescription>{{ root.payload()?.description }}</p>
+                            <h2 rdxPopoverTitle [class]="p.title">{{ root.payload()?.label }}</h2>
+                            <p rdxPopoverDescription [class]="p.description">{{ root.payload()?.description }}</p>
                         </div>
                     </div>
                 </div>
diff --git a/packages/primitives/popover/stories/popover.stories.ts b/packages/primitives/popover/stories/popover.stories.ts
index 2b3060bb7..2f7af5244 100644
--- a/packages/primitives/popover/stories/popover.stories.ts
+++ b/packages/primitives/popover/stories/popover.stories.ts
@@ -1,11 +1,10 @@
-import { Meta, moduleMetadata, StoryObj } from '@storybook/angular';
 import { tailwindDemoDecorator } from '../../storybook/tailwind-demo';
 import { RdxPopoverAnimatedComponent } from './popover-animated';
 import animatedSource from './popover-animated?raw';
 import { RdxPopoverControlledComponent } from './popover-controlled';
+import controlledSource from './popover-controlled?raw';
 import { RdxPopoverControlledMultipleComponent } from './popover-controlled-multiple';
 import controlledMultipleSource from './popover-controlled-multiple?raw';
-import controlledSource from './popover-controlled?raw';
 import { RdxPopoverCustomAnchorComponent } from './popover-custom-anchor';
 import customAnchorSource from './popover-custom-anchor?raw';
 import { RdxPopoverDefaultComponent } from './popover-default';
@@ -20,6 +19,7 @@ import { RdxPopoverPositioningComponent } from './popover-positioning';
 import positioningSource from './popover-positioning?raw';
 import { RdxPopoverViewportComponent } from './popover-viewport';
 import viewportSource from './popover-viewport?raw';
+import { Meta, moduleMetadata, StoryObj } from '@storybook/angular';
 
 const html = String.raw;
 
diff --git a/packages/primitives/popper/__tests__/popper-content-wrapper.spec.ts b/packages/primitives/popper/__tests__/popper-content-wrapper.spec.ts
index 2900112f8..fc48c2ff0 100644
--- a/packages/primitives/popper/__tests__/popper-content-wrapper.spec.ts
+++ b/packages/primitives/popper/__tests__/popper-content-wrapper.spec.ts
@@ -1,10 +1,10 @@
+import { popperImports } from '../index';
+import { RdxPopperContentWrapper } from '../src/popper-content-wrapper';
 import { ChangeDetectionStrategy, Component, signal } from '@angular/core';
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { By } from '@angular/platform-browser';
 import { autoUpdate, computePosition } from '@floating-ui/dom';
 import { vi } from 'vitest';
-import { popperImports } from '../index';
-import { RdxPopperContentWrapper } from '../src/popper-content-wrapper';
 
 vi.mock('@floating-ui/dom', async () => {
     const actual = await vi.importActual<typeof import('@floating-ui/dom')>('@floating-ui/dom');
@@ -58,7 +58,7 @@ class AlwaysPopperHostComponent {}
     template: `
         <div rdxPopperRoot>
             <button rdxPopperAnchor>Anchor</button>
-            <div [side]="side()" [updatePositionStrategy]="updatePositionStrategy()" rdxPopperContentWrapper>
+            <div rdxPopperContentWrapper [side]="side()" [updatePositionStrategy]="updatePositionStrategy()">
                 <div rdxPopperContent>Content</div>
             </div>
         </div>
@@ -75,7 +75,7 @@ class ReactivePopperHostComponent {
     template: `
         <div rdxPopperRoot>
             <button #customAnchor>Custom anchor</button>
-            <div [anchor]="customAnchor" rdxPopperContentWrapper>
+            <div rdxPopperContentWrapper [anchor]="customAnchor">
                 <div rdxPopperContent>Content</div>
             </div>
         </div>
diff --git a/packages/primitives/popper/index.ts b/packages/primitives/popper/index.ts
index fe8e6f895..fd3f0e5f4 100644
--- a/packages/primitives/popper/index.ts
+++ b/packages/primitives/popper/index.ts
@@ -8,8 +8,8 @@ export * from './src/popper';
 export * from './src/popper-anchor';
 export * from './src/popper-arrow';
 export * from './src/popper-content';
-export * from './src/popper-content-wrapper';
 export * from './src/popper-content.config';
+export * from './src/popper-content-wrapper';
 export * from './src/utils';
 
 export const popperImports = [RdxPopper, RdxPopperArrow, RdxPopperContentWrapper, RdxPopperContent, RdxPopperAnchor];
diff --git a/packages/primitives/popper/src/popper-arrow.ts b/packages/primitives/popper/src/popper-arrow.ts
index 6a8adb8b0..3db4ea6cb 100644
--- a/packages/primitives/popper/src/popper-arrow.ts
+++ b/packages/primitives/popper/src/popper-arrow.ts
@@ -1,3 +1,5 @@
+import { injectPopperContentWrapperContext } from './popper-content-wrapper';
+import { Side } from './utils';
 import {
     computed,
     createComponent,
@@ -11,8 +13,6 @@ import {
     numberAttribute
 } from '@angular/core';
 import { RdxArrow } from '@radix-ng/primitives/arrow';
-import { injectPopperContentWrapperContext } from './popper-content-wrapper';
-import { Side } from './utils';
 
 const OPPOSITE_SIDE: Record<Side, Side> = {
     top: 'bottom',
diff --git a/packages/primitives/popper/src/popper-content-wrapper.ts b/packages/primitives/popper/src/popper-content-wrapper.ts
index ec83b9d80..7554554b3 100644
--- a/packages/primitives/popper/src/popper-content-wrapper.ts
+++ b/packages/primitives/popper/src/popper-content-wrapper.ts
@@ -1,3 +1,7 @@
+import { RdxPopper } from './popper';
+import { RdxPopperArrow } from './popper-arrow';
+import { RdxPopperContentConfigToken } from './popper-content.config';
+import { Align, isNotNull, Side, transformOrigin } from './utils';
 import {
     afterNextRender,
     afterRenderEffect,
@@ -20,10 +24,10 @@ import {
 } from '@angular/core';
 import type { ComputePositionReturn, ReferenceElement, VirtualElement } from '@floating-ui/dom';
 import {
+    arrow as floatingUIArrow,
     autoUpdate,
     computePosition,
     flip,
-    arrow as floatingUIArrow,
     hide,
     limitShift,
     offset,
@@ -32,10 +36,6 @@ import {
     size
 } from '@floating-ui/dom';
 import { BooleanInput, createContext, elementSize, NumberInput, watch } from '@radix-ng/primitives/core';
-import { RdxPopper } from './popper';
-import { RdxPopperArrow } from './popper-arrow';
-import { RdxPopperContentConfigToken } from './popper-content.config';
-import { Align, isNotNull, Side, transformOrigin } from './utils';
 
 export type RdxPopperAnchorElement =
     | Element
diff --git a/packages/primitives/popper/src/popper-content.config.ts b/packages/primitives/popper/src/popper-content.config.ts
index 3680ce9d3..461c70a1a 100644
--- a/packages/primitives/popper/src/popper-content.config.ts
+++ b/packages/primitives/popper/src/popper-content.config.ts
@@ -1,5 +1,5 @@
-import { InjectionToken, Provider } from '@angular/core';
 import { Align, Side } from './utils';
+import { InjectionToken, Provider } from '@angular/core';
 
 /**
  * Default positioning values for `RdxPopperContentWrapper`.
diff --git a/packages/primitives/popper/src/popper-content.ts b/packages/primitives/popper/src/popper-content.ts
index c03d060ca..21a3d4b8e 100644
--- a/packages/primitives/popper/src/popper-content.ts
+++ b/packages/primitives/popper/src/popper-content.ts
@@ -1,5 +1,5 @@
-import { computed, Directive } from '@angular/core';
 import { injectPopperContentWrapperContext } from './popper-content-wrapper';
+import { computed, Directive } from '@angular/core';
 
 @Directive({
     selector: '[rdxPopperContent]',
diff --git a/packages/primitives/popper/src/popper.ts b/packages/primitives/popper/src/popper.ts
index fd8ae101d..d14b6e3cc 100644
--- a/packages/primitives/popper/src/popper.ts
+++ b/packages/primitives/popper/src/popper.ts
@@ -1,6 +1,6 @@
+import { RdxPopperAnchor } from './popper-anchor';
 import { contentChild, Directive, signal } from '@angular/core';
 import type { ReferenceElement } from '@floating-ui/dom';
-import { RdxPopperAnchor } from './popper-anchor';
 
 @Directive({
     selector: '[rdxPopperRoot]'
diff --git a/packages/primitives/popper/stories/popper.stories.ts b/packages/primitives/popper/stories/popper.stories.ts
index 4c0b1d8a9..1930e5688 100644
--- a/packages/primitives/popper/stories/popper.stories.ts
+++ b/packages/primitives/popper/stories/popper.stories.ts
@@ -1,4 +1,3 @@
-import { argsToTemplate, Meta, moduleMetadata, StoryObj } from '@storybook/angular';
 import { tailwindDemoDecorator } from '../../storybook/tailwind-demo';
 import { RdxPopper } from '../src/popper';
 import { RdxPopperAnchor } from '../src/popper-anchor';
@@ -6,6 +5,7 @@ import { RdxPopperArrow } from '../src/popper-arrow';
 import { RdxPopperContent } from '../src/popper-content';
 import { RdxPopperContentWrapper } from '../src/popper-content-wrapper';
 import { PopperFollowPointer, PopperUpdPosition } from './popper';
+import { argsToTemplate, Meta, moduleMetadata, StoryObj } from '@storybook/angular';
 
 const html = String.raw;
 
diff --git a/packages/primitives/popper/stories/popper.ts b/packages/primitives/popper/stories/popper.ts
index 56595ef09..dc45546d4 100644
--- a/packages/primitives/popper/stories/popper.ts
+++ b/packages/primitives/popper/stories/popper.ts
@@ -1,5 +1,5 @@
-import { ChangeDetectionStrategy, Component, effect, signal } from '@angular/core';
 import { popperImports } from '../index';
+import { ChangeDetectionStrategy, Component, effect, signal } from '@angular/core';
 
 @Component({
     changeDetection: ChangeDetectionStrategy.Eager,
@@ -15,10 +15,10 @@ import { popperImports } from '../index';
             </span>
             <button
                 class="bg-primary text-primary-foreground absolute top-[132px] left-14 h-10 w-10 [transform:translateX(var(--offset))] rounded-full transition-transform duration-300 ease-out"
-                [style.--offset]="left() + 'px'"
                 type="button"
                 aria-label="Moving anchor"
                 rdxPopperAnchor
+                [style.--offset]="left() + 'px'"
             >
                 <span class="sr-only">Moving anchor</span>
             </button>
@@ -57,15 +57,15 @@ export class PopperUpdPosition {
     template: `
         <div
             class="border-border bg-muted relative h-80 w-[min(600px,80vw)] overflow-hidden rounded-xl border-2 border-dashed"
-            (pointermove)="onPointerMove($event)"
             rdxPopperRoot
+            (pointermove)="onPointerMove($event)"
         >
             <span class="text-muted-foreground absolute top-3 left-3 text-xs">Move the pointer inside this area</span>
             <span
                 class="bg-primary absolute h-2 w-2 -translate-x-1/2 -translate-y-1/2 rounded-full"
+                rdxPopperAnchor
                 [style.left.px]="pointer().x"
                 [style.top.px]="pointer().y"
-                rdxPopperAnchor
             ></span>
             <div side="top" sideOffset="6" updatePositionStrategy="always" rdxPopperContentWrapper>
                 <div
diff --git a/packages/primitives/portal/__tests__/portal-presence.spec.ts b/packages/primitives/portal/__tests__/portal-presence.spec.ts
index ce21908b8..8a830c939 100644
--- a/packages/primitives/portal/__tests__/portal-presence.spec.ts
+++ b/packages/primitives/portal/__tests__/portal-presence.spec.ts
@@ -1,9 +1,9 @@
+import { RdxPortalPresence } from '../src/portal-presence';
+import { RdxPortalContainer } from '../src/resolve-container';
 import { ChangeDetectionStrategy, Component, Directive, ElementRef, inject, PLATFORM_ID, signal } from '@angular/core';
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { provideRdxPresenceContext } from '@radix-ng/primitives/presence';
 import { type MockInstance, vi } from 'vitest';
-import { RdxPortalPresence } from '../src/portal-presence';
-import { RdxPortalContainer } from '../src/resolve-container';
 
 // Wrapper mirroring how a real primitive applies the structural portal: a selectored
 // `ng-template` directive composing RdxPortalPresence via hostDirectives.
@@ -22,7 +22,7 @@ class TestPortalWrapper {}
     providers: [provideRdxPresenceContext(() => ({ present: inject(PortalHostComponent).present }))],
     template: `
         <div id="origin">
-            <ng-template [container]="container()" testPortal>
+            <ng-template testPortal [container]="container()">
                 <div class="content" [attr.data-state]="present() ? 'open' : 'closed'">content</div>
             </ng-template>
         </div>
diff --git a/packages/primitives/portal/__tests__/portal.spec.ts b/packages/primitives/portal/__tests__/portal.spec.ts
index 88d05b8f1..f5b2910dd 100644
--- a/packages/primitives/portal/__tests__/portal.spec.ts
+++ b/packages/primitives/portal/__tests__/portal.spec.ts
@@ -1,14 +1,14 @@
+import { RdxPortal, RdxPortalContainer } from '../src/portal';
 import { ChangeDetectionStrategy, Component, ElementRef } from '@angular/core';
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { By } from '@angular/platform-browser';
-import { RdxPortal, RdxPortalContainer } from '../src/portal';
 
 @Component({
     changeDetection: ChangeDetectionStrategy.Eager,
     imports: [RdxPortal],
     template: `
         <div id="origin">
-            <div id="portaled" [container]="container" rdxPortal>content</div>
+            <div id="portaled" rdxPortal [container]="container">content</div>
         </div>
     `
 })
diff --git a/packages/primitives/portal/src/portal-presence.ts b/packages/primitives/portal/src/portal-presence.ts
index 5bd98a470..555b8a7f1 100644
--- a/packages/primitives/portal/src/portal-presence.ts
+++ b/packages/primitives/portal/src/portal-presence.ts
@@ -1,3 +1,4 @@
+import { RdxPortalContainer, resolvePortalContainer } from './resolve-container';
 import { DOCUMENT, isPlatformBrowser } from '@angular/common';
 import {
     computed,
@@ -15,7 +16,6 @@ import {
     ViewContainerRef
 } from '@angular/core';
 import { PresenceMachine, RDX_PRESENCE_CONTEXT } from '@radix-ng/primitives/presence';
-import { RdxPortalContainer, resolvePortalContainer } from './resolve-container';
 
 /**
  * Structural directive merging what `RdxPortal` + `RdxPresenceDirective` did as a pair: it mounts its
diff --git a/packages/primitives/portal/src/portal.ts b/packages/primitives/portal/src/portal.ts
index 35f6176b3..7501c4d43 100644
--- a/packages/primitives/portal/src/portal.ts
+++ b/packages/primitives/portal/src/portal.ts
@@ -1,3 +1,4 @@
+import { RdxPortalContainer, resolvePortalContainer } from './resolve-container';
 import { DOCUMENT, isPlatformBrowser } from '@angular/common';
 import {
     computed,
@@ -10,7 +11,6 @@ import {
     linkedSignal,
     PLATFORM_ID
 } from '@angular/core';
-import { RdxPortalContainer, resolvePortalContainer } from './resolve-container';
 
 @Directive({
     selector: '[rdxPortal]',
diff --git a/packages/primitives/portal/stories/portal.stories.ts b/packages/primitives/portal/stories/portal.stories.ts
index cb57d3345..d47c98799 100644
--- a/packages/primitives/portal/stories/portal.stories.ts
+++ b/packages/primitives/portal/stories/portal.stories.ts
@@ -1,6 +1,6 @@
-import { Meta, moduleMetadata, StoryObj } from '@storybook/angular';
 import { tailwindDemoDecorator } from '../../storybook/tailwind-demo';
 import { RdxPortal } from '../src/portal';
+import { Meta, moduleMetadata, StoryObj } from '@storybook/angular';
 
 const html = String.raw;
 
diff --git a/packages/primitives/presence/__test__/presence.directive.spec.ts b/packages/primitives/presence/__test__/presence.directive.spec.ts
index c1e85558b..bd0cf9323 100644
--- a/packages/primitives/presence/__test__/presence.directive.spec.ts
+++ b/packages/primitives/presence/__test__/presence.directive.spec.ts
@@ -1,7 +1,7 @@
+import { provideRdxPresenceContext, RdxPresenceDirective } from '../src/presence.directive';
 import { ChangeDetectionStrategy, Component, Directive, inject, signal } from '@angular/core';
 import { ComponentFixture, TestBed } from '@angular/core/testing';
-import { vi, type MockInstance } from 'vitest';
-import { provideRdxPresenceContext, RdxPresenceDirective } from '../src/presence.directive';
+import { type MockInstance, vi } from 'vitest';
 
 // Wrapper that mirrors how real consumers apply the presence directive:
 // a selectored `ng-template` directive composing RdxPresenceDirective via hostDirectives.
diff --git a/packages/primitives/presence/index.ts b/packages/primitives/presence/index.ts
index 3b07a891d..77354847c 100644
--- a/packages/primitives/presence/index.ts
+++ b/packages/primitives/presence/index.ts
@@ -1,2 +1,2 @@
-export * from './src/presence-machine';
 export * from './src/presence.directive';
+export * from './src/presence-machine';
diff --git a/packages/primitives/presence/src/presence.directive.ts b/packages/primitives/presence/src/presence.directive.ts
index 014d9c16c..af7205947 100644
--- a/packages/primitives/presence/src/presence.directive.ts
+++ b/packages/primitives/presence/src/presence.directive.ts
@@ -1,3 +1,4 @@
+import { PresenceMachine } from './presence-machine';
 import { isPlatformBrowser } from '@angular/common';
 import {
     DestroyRef,
@@ -12,7 +13,6 @@ import {
     TemplateRef,
     ViewContainerRef
 } from '@angular/core';
-import { PresenceMachine } from './presence-machine';
 
 /**
  * Context interface for RdxPresence directive
diff --git a/packages/primitives/presence/stories/presence-waapi-spinner.ts b/packages/primitives/presence/stories/presence-waapi-spinner.ts
index 7aa7217c9..cb2411528 100644
--- a/packages/primitives/presence/stories/presence-waapi-spinner.ts
+++ b/packages/primitives/presence/stories/presence-waapi-spinner.ts
@@ -1,6 +1,6 @@
+import { PresenceDemo } from './presence';
 import { ChangeDetectionStrategy, Component, inject, signal } from '@angular/core';
 import { provideRdxPresenceContext } from '@radix-ng/primitives/presence';
-import { PresenceDemo } from './presence';
 
 /**
  * ADR 0011 fixture for the **freshness filter**: a never-ending spinner runs inside the content the
@@ -30,8 +30,8 @@ import { PresenceDemo } from './presence';
         <div class="flex flex-col items-center gap-4">
             <button
                 class="border-border bg-background text-foreground hover:bg-muted focus-visible:ring-ring inline-flex h-9 items-center rounded-md border px-4 text-sm font-medium shadow-sm outline-none focus-visible:ring-2"
-                (click)="open.set(!open())"
                 type="button"
+                (click)="open.set(!open())"
             >
                 {{ open() ? 'Unmount' : 'Mount' }}
             </button>
diff --git a/packages/primitives/presence/stories/presence-waapi-subtree.ts b/packages/primitives/presence/stories/presence-waapi-subtree.ts
index adb389d96..17152bf44 100644
--- a/packages/primitives/presence/stories/presence-waapi-subtree.ts
+++ b/packages/primitives/presence/stories/presence-waapi-subtree.ts
@@ -1,6 +1,6 @@
+import { PresenceDemo } from './presence';
 import { ChangeDetectionStrategy, Component, inject, signal } from '@angular/core';
 import { provideRdxPresenceContext } from '@radix-ng/primitives/presence';
-import { PresenceDemo } from './presence';
 
 /**
  * ADR 0011 fixture: the exit `@keyframes` run on a **nested child**, not the watched root. The root
@@ -33,8 +33,8 @@ import { PresenceDemo } from './presence';
         <div class="flex flex-col items-center gap-4">
             <button
                 class="border-border bg-background text-foreground hover:bg-muted focus-visible:ring-ring inline-flex h-9 items-center rounded-md border px-4 text-sm font-medium shadow-sm outline-none focus-visible:ring-2"
-                (click)="open.set(!open())"
                 type="button"
+                (click)="open.set(!open())"
             >
                 {{ open() ? 'Unmount' : 'Mount' }}
             </button>
diff --git a/packages/primitives/presence/stories/presence-waapi-transition.ts b/packages/primitives/presence/stories/presence-waapi-transition.ts
index 2e50ab02a..6f203d480 100644
--- a/packages/primitives/presence/stories/presence-waapi-transition.ts
+++ b/packages/primitives/presence/stories/presence-waapi-transition.ts
@@ -1,6 +1,6 @@
+import { PresenceDemo } from './presence';
 import { ChangeDetectionStrategy, Component, inject, signal } from '@angular/core';
 import { provideRdxPresenceContext } from '@radix-ng/primitives/presence';
-import { PresenceDemo } from './presence';
 
 /**
  * ADR 0011 fixture: the exit is a **CSS transition** (no `@keyframes` anywhere). Before the WAAPI
@@ -30,8 +30,8 @@ import { PresenceDemo } from './presence';
         <div class="flex flex-col items-center gap-4">
             <button
                 class="border-border bg-background text-foreground hover:bg-muted focus-visible:ring-ring inline-flex h-9 items-center rounded-md border px-4 text-sm font-medium shadow-sm outline-none focus-visible:ring-2"
-                (click)="open.set(!open())"
                 type="button"
+                (click)="open.set(!open())"
             >
                 {{ open() ? 'Unmount' : 'Mount' }}
             </button>
diff --git a/packages/primitives/presence/stories/presence.stories.ts b/packages/primitives/presence/stories/presence.stories.ts
index cf8c38df2..03fe17742 100644
--- a/packages/primitives/presence/stories/presence.stories.ts
+++ b/packages/primitives/presence/stories/presence.stories.ts
@@ -1,4 +1,3 @@
-import { Meta, moduleMetadata, StoryObj } from '@storybook/angular';
 import { tailwindDemoDecorator } from '../../storybook/tailwind-demo';
 import { PresenceExample } from './presence';
 import { PresenceWaapiSpinner } from './presence-waapi-spinner';
@@ -7,6 +6,7 @@ import { PresenceWaapiSubtree } from './presence-waapi-subtree';
 import subtreeSource from './presence-waapi-subtree?raw';
 import { PresenceWaapiTransition } from './presence-waapi-transition';
 import transitionSource from './presence-waapi-transition?raw';
+import { Meta, moduleMetadata, StoryObj } from '@storybook/angular';
 
 const source = (code: string) => ({ docs: { source: { code, language: 'typescript' } } });
 
diff --git a/packages/primitives/presence/stories/presence.ts b/packages/primitives/presence/stories/presence.ts
index 1b5119b93..9e0a25349 100644
--- a/packages/primitives/presence/stories/presence.ts
+++ b/packages/primitives/presence/stories/presence.ts
@@ -53,8 +53,8 @@ export class PresenceDemo {}
         <div class="flex flex-col items-center gap-4">
             <button
                 class="border-border bg-background text-foreground hover:bg-muted focus-visible:ring-ring inline-flex h-9 items-center rounded-md border px-4 text-sm font-medium shadow-sm outline-none focus-visible:ring-2"
-                (click)="open.set(!open())"
                 type="button"
+                (click)="open.set(!open())"
             >
                 {{ open() ? 'Unmount' : 'Mount' }}
             </button>
diff --git a/packages/primitives/preview-card/__tests__/preview-card.spec.ts b/packages/primitives/preview-card/__tests__/preview-card.spec.ts
index 412870132..4966bc0a6 100644
--- a/packages/primitives/preview-card/__tests__/preview-card.spec.ts
+++ b/packages/primitives/preview-card/__tests__/preview-card.spec.ts
@@ -27,7 +27,7 @@ import { vi } from 'vitest';
         RdxPreviewCardTrigger
     ],
     template: `
-        <ng-container #root="rdxPreviewCardRoot" [(open)]="open" rdxPreviewCardRoot>
+        <ng-container #root="rdxPreviewCardRoot" rdxPreviewCardRoot [(open)]="open">
             <a href="#" rdxPreviewCardTrigger>Typography</a>
 
             <div *rdxPreviewCardPortal data-test-preview-card-portal rdxPreviewCardPositioner>
@@ -55,9 +55,9 @@ class TestHostComponent {
     template: `
         <ng-container
             #root="rdxPreviewCardRoot"
-            [defaultOpen]="true"
             defaultTriggerId="default-trigger"
             rdxPreviewCardRoot
+            [defaultOpen]="true"
         >
             <a id="default-trigger" href="#" rdxPreviewCardTrigger>Default</a>
 
@@ -97,10 +97,10 @@ class MultipleTriggersHostComponent {
     changeDetection: ChangeDetectionStrategy.Eager,
     imports: [RdxPreviewCardPopup, RdxPreviewCardPositioner, RdxPreviewCardRoot, RdxPreviewCardTrigger],
     template: `
-        <a id="detached-one" [handle]="handle" href="#" payload="one" rdxPreviewCardTrigger>One</a>
-        <a id="detached-two" [handle]="handle" href="#" payload="two" rdxPreviewCardTrigger>Two</a>
+        <a id="detached-one" href="#" payload="one" rdxPreviewCardTrigger [handle]="handle">One</a>
+        <a id="detached-two" href="#" payload="two" rdxPreviewCardTrigger [handle]="handle">Two</a>
 
-        <ng-container #root="rdxPreviewCardRoot" [handle]="handle" rdxPreviewCardRoot>
+        <ng-container #root="rdxPreviewCardRoot" rdxPreviewCardRoot [handle]="handle">
             @if (root.open()) {
                 <div rdxPreviewCardPositioner>
                     <div rdxPreviewCardPopup>{{ root.payload() }}</div>
@@ -126,8 +126,8 @@ class DetachedTriggersHostComponent {
         RdxPreviewCardTrigger
     ],
     template: `
-        <ng-container #root="rdxPreviewCardRoot" (onOpenChangeComplete)="complete.push($event)" rdxPreviewCardRoot>
-            <a [delay]="0" href="#" rdxPreviewCardTrigger>Open</a>
+        <ng-container #root="rdxPreviewCardRoot" rdxPreviewCardRoot (onOpenChangeComplete)="complete.push($event)">
+            <a href="#" rdxPreviewCardTrigger [delay]="0">Open</a>
 
             <div *rdxPreviewCardPortal rdxPreviewCardPositioner>
                 <div rdxPreviewCardPopup>Preview</div>
@@ -179,9 +179,9 @@ class ViewportHostComponent {}
     template: `
         <ng-container
             #root="rdxPreviewCardRoot"
+            rdxPreviewCardRoot
             [(open)]="open"
             (onOpenChange)="handleOpenChange($event)"
-            rdxPreviewCardRoot
         >
             <a href="#" rdxPreviewCardTrigger>Open</a>
 
@@ -258,13 +258,13 @@ class PositionerDefaultsHostComponent {}
     ],
     template: `
         <ng-container #parent="rdxPreviewCardRoot" rdxPreviewCardRoot>
-            <a [delay]="0" href="#" rdxPreviewCardTrigger>Parent</a>
+            <a href="#" rdxPreviewCardTrigger [delay]="0">Parent</a>
 
             @if (parent.open()) {
                 <div rdxPreviewCardPositioner>
                     <div rdxPreviewCardPopup>
                         <ng-container #child="rdxPreviewCardRoot" rdxPreviewCardRoot>
-                            <a [delay]="0" href="#" rdxPreviewCardTrigger>Child</a>
+                            <a href="#" rdxPreviewCardTrigger [delay]="0">Child</a>
 
                             <div *rdxPreviewCardPortal data-test-child-portal rdxPreviewCardPositioner>
                                 <div rdxPreviewCardPopup>Child popup</div>
@@ -549,10 +549,10 @@ describe('PreviewCard', () => {
             imports: [RdxPreviewCardPopup, RdxPreviewCardPositioner, RdxPreviewCardRoot, RdxPreviewCardTrigger],
             template: `
                 <ng-container
+                    rdxPreviewCardRoot
                     [(open)]="open"
                     [(triggerId)]="triggerId"
                     (onOpenChange)="changes.push($event)"
-                    rdxPreviewCardRoot
                 >
                     <a id="controlled-one" href="#" payload="one" rdxPreviewCardTrigger>One</a>
                     <a id="controlled-two" href="#" payload="two" rdxPreviewCardTrigger>Two</a>
diff --git a/packages/primitives/preview-card/index.ts b/packages/primitives/preview-card/index.ts
index 21d825846..d6f177f31 100644
--- a/packages/primitives/preview-card/index.ts
+++ b/packages/primitives/preview-card/index.ts
@@ -1,4 +1,3 @@
-import { NgModule } from '@angular/core';
 import { RdxPreviewCardArrow } from './src/preview-card-arrow';
 import { RdxPreviewCardBackdrop } from './src/preview-card-backdrop';
 import { RdxPreviewCardPopup } from './src/preview-card-popup';
@@ -7,6 +6,7 @@ import { RdxPreviewCardPositioner } from './src/preview-card-positioner';
 import { RdxPreviewCardRoot } from './src/preview-card-root';
 import { RdxPreviewCardTrigger } from './src/preview-card-trigger';
 import { RdxPreviewCardViewport } from './src/preview-card-viewport';
+import { NgModule } from '@angular/core';
 
 export * from './src/preview-card-arrow';
 export * from './src/preview-card-backdrop';
diff --git a/packages/primitives/preview-card/src/preview-card-arrow.ts b/packages/primitives/preview-card/src/preview-card-arrow.ts
index e7cfc3e16..3355817bc 100644
--- a/packages/primitives/preview-card/src/preview-card-arrow.ts
+++ b/packages/primitives/preview-card/src/preview-card-arrow.ts
@@ -1,6 +1,6 @@
+import { injectRdxPreviewCardRootContext } from './preview-card-root';
 import { computed, Directive, inject } from '@angular/core';
 import { RdxPopperArrow, RdxPopperContentWrapper } from '@radix-ng/primitives/popper';
-import { injectRdxPreviewCardRootContext } from './preview-card-root';
 
 /**
  * An optional arrow element rendered alongside the preview-card.
diff --git a/packages/primitives/preview-card/src/preview-card-backdrop.ts b/packages/primitives/preview-card/src/preview-card-backdrop.ts
index f7d6a173c..9eb494fc2 100644
--- a/packages/primitives/preview-card/src/preview-card-backdrop.ts
+++ b/packages/primitives/preview-card/src/preview-card-backdrop.ts
@@ -1,5 +1,5 @@
-import { Directive } from '@angular/core';
 import { injectRdxPreviewCardRootContext } from './preview-card-root';
+import { Directive } from '@angular/core';
 
 /**
  * An optional backdrop rendered behind the popup.
diff --git a/packages/primitives/preview-card/src/preview-card-handle.ts b/packages/primitives/preview-card/src/preview-card-handle.ts
index 15b3db2b4..4830f3df1 100644
--- a/packages/primitives/preview-card/src/preview-card-handle.ts
+++ b/packages/primitives/preview-card/src/preview-card-handle.ts
@@ -1,5 +1,5 @@
-import { computed, signal } from '@angular/core';
 import type { RdxPreviewCardRootContext } from './preview-card-root';
+import { computed, signal } from '@angular/core';
 
 /**
  * Connects a preview-card root with trigger elements rendered elsewhere in the DOM.
diff --git a/packages/primitives/preview-card/src/preview-card-popup.ts b/packages/primitives/preview-card/src/preview-card-popup.ts
index 55167c207..1dcca3a08 100644
--- a/packages/primitives/preview-card/src/preview-card-popup.ts
+++ b/packages/primitives/preview-card/src/preview-card-popup.ts
@@ -1,3 +1,4 @@
+import { injectRdxPreviewCardRootContext, RdxPreviewCardOpenChangeReason } from './preview-card-root';
 import { computed, DestroyRef, Directive, ElementRef, inject, output } from '@angular/core';
 import {
     RDX_FLOATING_REGISTRATION,
@@ -6,7 +7,6 @@ import {
 } from '@radix-ng/primitives/core';
 import { RdxDismiss, RdxOutsidePressDomEvent } from '@radix-ng/primitives/dismissable-layer';
 import { RdxPopperContent, RdxPopperContentWrapper } from '@radix-ng/primitives/popper';
-import { injectRdxPreviewCardRootContext, RdxPreviewCardOpenChangeReason } from './preview-card-root';
 
 /**
  * A container for the preview-card contents.
diff --git a/packages/primitives/preview-card/src/preview-card-portal.ts b/packages/primitives/preview-card/src/preview-card-portal.ts
index eb90d2495..ba225dc47 100644
--- a/packages/primitives/preview-card/src/preview-card-portal.ts
+++ b/packages/primitives/preview-card/src/preview-card-portal.ts
@@ -1,8 +1,8 @@
+import { injectRdxPreviewCardRootContext } from './preview-card-root';
 import { Directive, isDevMode } from '@angular/core';
 import { rdxDevError } from '@radix-ng/primitives/core';
 import { RdxPortalPresence } from '@radix-ng/primitives/portal';
 import { provideRdxPresenceContext } from '@radix-ng/primitives/presence';
-import { injectRdxPreviewCardRootContext } from './preview-card-root';
 
 /**
  * Structural directive that teleports the preview-card content into a container (default
diff --git a/packages/primitives/preview-card/src/preview-card-positioner.ts b/packages/primitives/preview-card/src/preview-card-positioner.ts
index 8187c393f..9fd4052aa 100644
--- a/packages/primitives/preview-card/src/preview-card-positioner.ts
+++ b/packages/primitives/preview-card/src/preview-card-positioner.ts
@@ -1,3 +1,4 @@
+import { injectRdxPreviewCardRootContext } from './preview-card-root';
 import { Directive, effect, ElementRef, inject, signal } from '@angular/core';
 import { useGraceArea } from '@radix-ng/primitives/core';
 import {
@@ -6,7 +7,6 @@ import {
     provideRdxPopperContentWrapper,
     RdxPopperContentWrapper
 } from '@radix-ng/primitives/popper';
-import { injectRdxPreviewCardRootContext } from './preview-card-root';
 
 /**
  * Positions the preview-card against its trigger.
diff --git a/packages/primitives/preview-card/src/preview-card-root.ts b/packages/primitives/preview-card/src/preview-card-root.ts
index f7ac33664..d1790baf0 100644
--- a/packages/primitives/preview-card/src/preview-card-root.ts
+++ b/packages/primitives/preview-card/src/preview-card-root.ts
@@ -1,3 +1,4 @@
+import { RdxPreviewCardHandle } from './preview-card-handle';
 import {
     booleanAttribute,
     computed,
@@ -26,7 +27,6 @@ import {
     useTransitionStatus
 } from '@radix-ng/primitives/core';
 import { RdxPopper } from '@radix-ng/primitives/popper';
-import { RdxPreviewCardHandle } from './preview-card-handle';
 
 /**
  * Why an open/close happened instantly (no transition). Mirrors Base UI's preview-card `data-instant`:
diff --git a/packages/primitives/preview-card/src/preview-card-trigger.ts b/packages/primitives/preview-card/src/preview-card-trigger.ts
index 067428b14..7f9b9b7e2 100644
--- a/packages/primitives/preview-card/src/preview-card-trigger.ts
+++ b/packages/primitives/preview-card/src/preview-card-trigger.ts
@@ -1,3 +1,5 @@
+import { RdxPreviewCardHandle } from './preview-card-handle';
+import { injectRdxPreviewCardRootContext } from './preview-card-root';
 import {
     booleanAttribute,
     computed,
@@ -11,8 +13,6 @@ import {
 } from '@angular/core';
 import { injectId, NumberInput, rdxCheckTriggerElement } from '@radix-ng/primitives/core';
 import { RdxPopperAnchor } from '@radix-ng/primitives/popper';
-import { RdxPreviewCardHandle } from './preview-card-handle';
-import { injectRdxPreviewCardRootContext } from './preview-card-root';
 
 /**
  * A link or element that opens the preview card.
diff --git a/packages/primitives/preview-card/src/preview-card-viewport.ts b/packages/primitives/preview-card/src/preview-card-viewport.ts
index a7aacfaee..71ad84bfd 100644
--- a/packages/primitives/preview-card/src/preview-card-viewport.ts
+++ b/packages/primitives/preview-card/src/preview-card-viewport.ts
@@ -1,5 +1,5 @@
-import { afterNextRender, DestroyRef, Directive, ElementRef, inject, signal } from '@angular/core';
 import { injectRdxPreviewCardRootContext } from './preview-card-root';
+import { afterNextRender, DestroyRef, Directive, ElementRef, inject, signal } from '@angular/core';
 
 /**
  * A viewport for animating content changes when a preview-card moves between triggers.
diff --git a/packages/primitives/preview-card/stories/preview-card-controlled-multiple.ts b/packages/primitives/preview-card/stories/preview-card-controlled-multiple.ts
index 9ee5d07b7..2da5de158 100644
--- a/packages/primitives/preview-card/stories/preview-card-controlled-multiple.ts
+++ b/packages/primitives/preview-card/stories/preview-card-controlled-multiple.ts
@@ -1,6 +1,6 @@
+import { cn, demoButton, demoFocusRing, demoPopover } from '../../storybook/styles';
 import { ChangeDetectionStrategy, Component } from '@angular/core';
 import { previewCardImports } from '@radix-ng/primitives/preview-card';
-import { cn, demoButton, demoFocusRing, demoPopover } from '../../storybook/styles';
 
 @Component({
     changeDetection: ChangeDetectionStrategy.Eager,
@@ -9,34 +9,34 @@ import { cn, demoButton, demoFocusRing, demoPopover } from '../../storybook/styl
     template: `
         <div class="grid gap-4">
             <div class="flex items-center gap-3">
-                <button [class]="cn(b.base, b.outline, b.size.sm)" (click)="openFrom('design')" type="button">
+                <button type="button" [class]="cn(b.base, b.outline, b.size.sm)" (click)="openFrom('design')">
                     Open design
                 </button>
-                <button [class]="cn(b.base, b.outline, b.size.sm)" (click)="open = false" type="button">Close</button>
+                <button type="button" [class]="cn(b.base, b.outline, b.size.sm)" (click)="open = false">Close</button>
             </div>
 
             <ng-container
                 #root="rdxPreviewCardRoot"
+                rdxPreviewCardRoot
                 [(open)]="open"
                 [(triggerId)]="triggerId"
                 (onOpenChange)="triggerId = $event.triggerId"
-                rdxPreviewCardRoot
             >
                 <p class="text-muted-foreground max-w-lg text-sm leading-6">
                     Discover
-                    <a id="typography" [class]="link" [payload]="cards.typography" href="#" rdxPreviewCardTrigger>
+                    <a id="typography" href="#" rdxPreviewCardTrigger [class]="link" [payload]="cards.typography">
                         typography
                     </a>
                     ,
-                    <a id="design" [class]="link" [payload]="cards.design" href="#" rdxPreviewCardTrigger>design</a>
+                    <a id="design" href="#" rdxPreviewCardTrigger [class]="link" [payload]="cards.design">design</a>
                     , or
-                    <a id="art" [class]="link" [payload]="cards.art" href="#" rdxPreviewCardTrigger>art</a>
+                    <a id="art" href="#" rdxPreviewCardTrigger [class]="link" [payload]="cards.art">art</a>
                     .
                 </p>
 
-                <div *rdxPreviewCardPortal [class]="p.positioner" sideOffset="8" rdxPreviewCardPositioner>
-                    <div [class]="p.popup" rdxPreviewCardPopup>
-                        <span [class]="p.arrow" rdxPreviewCardArrow></span>
+                <div *rdxPreviewCardPortal sideOffset="8" rdxPreviewCardPositioner [class]="p.positioner">
+                    <div rdxPreviewCardPopup [class]="p.popup">
+                        <span rdxPreviewCardArrow [class]="p.arrow"></span>
                         <div class="grid gap-2">
                             <div class="bg-muted h-24 rounded-md"></div>
                             <p class="text-muted-foreground text-sm">{{ root.payload() }}</p>
diff --git a/packages/primitives/preview-card/stories/preview-card-default.ts b/packages/primitives/preview-card/stories/preview-card-default.ts
index 8c9bc7302..4f8b55f6c 100644
--- a/packages/primitives/preview-card/stories/preview-card-default.ts
+++ b/packages/primitives/preview-card/stories/preview-card-default.ts
@@ -1,6 +1,6 @@
+import { cn, demoFocusRing, demoPopover } from '../../storybook/styles';
 import { ChangeDetectionStrategy, Component } from '@angular/core';
 import { previewCardImports } from '@radix-ng/primitives/preview-card';
-import { cn, demoFocusRing, demoPopover } from '../../storybook/styles';
 
 @Component({
     changeDetection: ChangeDetectionStrategy.Eager,
@@ -11,20 +11,20 @@ import { cn, demoFocusRing, demoPopover } from '../../storybook/styles';
             <p class="text-muted-foreground max-w-md text-sm leading-6">
                 The principles of good
                 <a
-                    [class]="link"
                     href="https://en.wikipedia.org/wiki/Typography"
                     rel="noreferrer"
                     target="_blank"
                     rdxPreviewCardTrigger
+                    [class]="link"
                 >
                     typography
                 </a>
                 remain in the digital age.
             </p>
 
-            <div *rdxPreviewCardPortal [class]="p.positioner" sideOffset="8" rdxPreviewCardPositioner>
-                <div [class]="p.popup" rdxPreviewCardPopup>
-                    <span [class]="p.arrow" rdxPreviewCardArrow></span>
+            <div *rdxPreviewCardPortal sideOffset="8" rdxPreviewCardPositioner [class]="p.positioner">
+                <div rdxPreviewCardPopup [class]="p.popup">
+                    <span rdxPreviewCardArrow [class]="p.arrow"></span>
                     <div class="grid gap-3">
                         <div class="bg-muted h-28 rounded-md"></div>
                         <p class="text-muted-foreground text-sm">
diff --git a/packages/primitives/preview-card/stories/preview-card-detached.ts b/packages/primitives/preview-card/stories/preview-card-detached.ts
index 7eb94273a..1f2e65872 100644
--- a/packages/primitives/preview-card/stories/preview-card-detached.ts
+++ b/packages/primitives/preview-card/stories/preview-card-detached.ts
@@ -1,6 +1,6 @@
+import { cn, demoFocusRing, demoPopover } from '../../storybook/styles';
 import { ChangeDetectionStrategy, Component } from '@angular/core';
 import { createRdxPreviewCardHandle, previewCardImports } from '@radix-ng/primitives/preview-card';
-import { cn, demoFocusRing, demoPopover } from '../../storybook/styles';
 
 @Component({
     changeDetection: ChangeDetectionStrategy.Eager,
@@ -12,32 +12,32 @@ import { cn, demoFocusRing, demoPopover } from '../../storybook/styles';
                 Detached triggers can live outside the root:
                 <a
                     id="typography"
-                    [class]="link"
-                    [handle]="previewCard"
                     href="#"
                     payload="Typography preview"
                     rdxPreviewCardTrigger
+                    [class]="link"
+                    [handle]="previewCard"
                 >
                     typography
                 </a>
                 and
                 <a
                     id="design"
-                    [class]="link"
-                    [handle]="previewCard"
                     href="#"
                     payload="Design preview"
                     rdxPreviewCardTrigger
+                    [class]="link"
+                    [handle]="previewCard"
                 >
                     design
                 </a>
                 .
             </p>
 
-            <ng-container #root="rdxPreviewCardRoot" [handle]="previewCard" rdxPreviewCardRoot>
-                <div *rdxPreviewCardPortal [class]="p.positioner" sideOffset="8" rdxPreviewCardPositioner>
-                    <div [class]="p.popup" rdxPreviewCardPopup>
-                        <span [class]="p.arrow" rdxPreviewCardArrow></span>
+            <ng-container #root="rdxPreviewCardRoot" rdxPreviewCardRoot [handle]="previewCard">
+                <div *rdxPreviewCardPortal sideOffset="8" rdxPreviewCardPositioner [class]="p.positioner">
+                    <div rdxPreviewCardPopup [class]="p.popup">
+                        <span rdxPreviewCardArrow [class]="p.arrow"></span>
                         <div class="grid gap-2">
                             <div class="bg-muted h-24 rounded-md"></div>
                             <p class="text-muted-foreground text-sm">{{ root.payload() }}</p>
diff --git a/packages/primitives/preview-card/stories/preview-card-positioning.ts b/packages/primitives/preview-card/stories/preview-card-positioning.ts
index 7c52099d4..d89866ecc 100644
--- a/packages/primitives/preview-card/stories/preview-card-positioning.ts
+++ b/packages/primitives/preview-card/stories/preview-card-positioning.ts
@@ -1,7 +1,7 @@
+import { cn, demoButton, demoFocusRing, demoPopover } from '../../storybook/styles';
 import { ChangeDetectionStrategy, Component, signal } from '@angular/core';
 import { Side } from '@radix-ng/primitives/popper';
 import { previewCardImports } from '@radix-ng/primitives/preview-card';
-import { cn, demoButton, demoFocusRing, demoPopover } from '../../storybook/styles';
 
 @Component({
     changeDetection: ChangeDetectionStrategy.Eager,
@@ -12,9 +12,9 @@ import { cn, demoButton, demoFocusRing, demoPopover } from '../../storybook/styl
             <div class="flex flex-wrap gap-2">
                 @for (option of sides; track option) {
                     <button
+                        type="button"
                         [class]="cn(b.base, side() === option ? b.primary : b.outline, b.size.sm)"
                         (click)="side.set(option)"
-                        type="button"
                     >
                         {{ option }}
                     </button>
@@ -22,17 +22,17 @@ import { cn, demoButton, demoFocusRing, demoPopover } from '../../storybook/styl
             </div>
 
             <ng-container rdxPreviewCardRoot>
-                <a [class]="link" href="#" rdxPreviewCardTrigger>Hover the positioned preview card</a>
+                <a href="#" rdxPreviewCardTrigger [class]="link">Hover the positioned preview card</a>
 
                 <div
                     *rdxPreviewCardPortal
-                    [class]="p.positioner"
-                    [side]="side()"
                     sideOffset="8"
                     rdxPreviewCardPositioner
+                    [class]="p.positioner"
+                    [side]="side()"
                 >
-                    <div [class]="p.popup" rdxPreviewCardPopup>
-                        <span [class]="p.arrow" rdxPreviewCardArrow></span>
+                    <div rdxPreviewCardPopup [class]="p.popup">
+                        <span rdxPreviewCardArrow [class]="p.arrow"></span>
                         <p class="text-muted-foreground text-sm">
                             The positioner exposes placement attributes and CSS variables for styling.
                         </p>
diff --git a/packages/primitives/preview-card/stories/preview-card-viewport.ts b/packages/primitives/preview-card/stories/preview-card-viewport.ts
index c29ff44d2..359241b09 100644
--- a/packages/primitives/preview-card/stories/preview-card-viewport.ts
+++ b/packages/primitives/preview-card/stories/preview-card-viewport.ts
@@ -1,6 +1,6 @@
+import { cn, demoFocusRing, demoPopover } from '../../storybook/styles';
 import { ChangeDetectionStrategy, Component } from '@angular/core';
 import { previewCardImports } from '@radix-ng/primitives/preview-card';
-import { cn, demoFocusRing, demoPopover } from '../../storybook/styles';
 
 @Component({
     changeDetection: ChangeDetectionStrategy.Eager,
@@ -11,21 +11,21 @@ import { cn, demoFocusRing, demoPopover } from '../../storybook/styles';
             <p class="text-muted-foreground max-w-lg text-sm leading-6">
                 Compare
                 <a
-                    [class]="link"
                     href="#"
                     payload="Typography arranges type for readable language."
                     rdxPreviewCardTrigger
+                    [class]="link"
                 >
                     typography
                 </a>
                 ,
-                <a [class]="link" href="#" payload="Design shapes objects and systems." rdxPreviewCardTrigger>design</a>
+                <a href="#" payload="Design shapes objects and systems." rdxPreviewCardTrigger [class]="link">design</a>
                 , and
                 <a
-                    [class]="link"
                     href="#"
                     payload="Art communicates ideas through creative work."
                     rdxPreviewCardTrigger
+                    [class]="link"
                 >
                     art
                 </a>
@@ -34,15 +34,15 @@ import { cn, demoFocusRing, demoPopover } from '../../storybook/styles';
 
             <div
                 *rdxPreviewCardPortal
-                [class]="cn(p.positioner, 'transition-[left,right,top,bottom] duration-200')"
                 sideOffset="8"
                 rdxPreviewCardPositioner
+                [class]="cn(p.positioner, 'transition-[left,right,top,bottom] duration-200')"
             >
                 <div
-                    [class]="cn(p.popup, 'overflow-hidden transition-[width,height] duration-200')"
                     rdxPreviewCardPopup
+                    [class]="cn(p.popup, 'overflow-hidden transition-[width,height] duration-200')"
                 >
-                    <span [class]="p.arrow" rdxPreviewCardArrow></span>
+                    <span rdxPreviewCardArrow [class]="p.arrow"></span>
                     <div rdxPreviewCardViewport>
                         <div class="grid gap-2">
                             <div class="bg-muted h-24 rounded-md"></div>
diff --git a/packages/primitives/preview-card/stories/preview-card.stories.ts b/packages/primitives/preview-card/stories/preview-card.stories.ts
index c026b60fa..05d01e33e 100644
--- a/packages/primitives/preview-card/stories/preview-card.stories.ts
+++ b/packages/primitives/preview-card/stories/preview-card.stories.ts
@@ -1,4 +1,3 @@
-import { Meta, moduleMetadata, StoryObj } from '@storybook/angular';
 import { tailwindDemoDecorator } from '../../storybook/tailwind-demo';
 import { RdxPreviewCardControlledMultipleComponent } from './preview-card-controlled-multiple';
 import controlledMultipleSource from './preview-card-controlled-multiple?raw';
@@ -10,6 +9,7 @@ import { RdxPreviewCardPositioningComponent } from './preview-card-positioning';
 import positioningSource from './preview-card-positioning?raw';
 import { RdxPreviewCardViewportComponent } from './preview-card-viewport';
 import viewportSource from './preview-card-viewport?raw';
+import { Meta, moduleMetadata, StoryObj } from '@storybook/angular';
 
 const html = String.raw;
 
diff --git a/packages/primitives/progress/__test__/progress.spec.ts b/packages/primitives/progress/__test__/progress.spec.ts
index 0cc3ad5d2..394afe7fc 100644
--- a/packages/primitives/progress/__test__/progress.spec.ts
+++ b/packages/primitives/progress/__test__/progress.spec.ts
@@ -1,22 +1,22 @@
-import { ChangeDetectionStrategy, Component } from '@angular/core';
-import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { RdxProgressIndicatorDirective } from '../src/progress-indicator.directive';
 import { RdxProgressLabelDirective } from '../src/progress-label.directive';
 import { ProgressValueFormatter, RdxProgressRootDirective } from '../src/progress-root.directive';
 import { RdxProgressTrackDirective } from '../src/progress-track.directive';
 import { RdxProgressValueDirective } from '../src/progress-value.directive';
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
 
 @Component({
     changeDetection: ChangeDetectionStrategy.Eager,
     template: `
         <div
+            labelId="upload-label"
+            valueId="upload-value"
+            rdxProgressRoot
             [value]="value"
             [min]="min"
             [max]="max"
             [valueLabel]="valueLabel"
-            labelId="upload-label"
-            valueId="upload-value"
-            rdxProgressRoot
         >
             <span rdxProgressLabel>Upload</span>
             <span rdxProgressValue></span>
diff --git a/packages/primitives/progress/index.ts b/packages/primitives/progress/index.ts
index a3ff75ec1..e1899c99e 100644
--- a/packages/primitives/progress/index.ts
+++ b/packages/primitives/progress/index.ts
@@ -1,18 +1,17 @@
-import { NgModule } from '@angular/core';
 import { RdxProgressIndicatorDirective } from './src/progress-indicator.directive';
 import { RdxProgressLabelDirective } from './src/progress-label.directive';
 import { RdxProgressRootDirective } from './src/progress-root.directive';
 import { RdxProgressTrackDirective } from './src/progress-track.directive';
 import { RdxProgressValueDirective } from './src/progress-value.directive';
+import { NgModule } from '@angular/core';
 
 export * from './src/progress-indicator.directive';
 export * from './src/progress-label.directive';
+export type { ProgressProps, ProgressState, ProgressValueFormatter } from './src/progress-root.directive';
 export * from './src/progress-root.directive';
 export * from './src/progress-track.directive';
 export * from './src/progress-value.directive';
 
-export type { ProgressProps, ProgressState, ProgressValueFormatter } from './src/progress-root.directive';
-
 const _imports = [
     RdxProgressRootDirective,
     RdxProgressLabelDirective,
diff --git a/packages/primitives/progress/src/progress-indicator.directive.ts b/packages/primitives/progress/src/progress-indicator.directive.ts
index 2aa8ce276..09bf509ff 100644
--- a/packages/primitives/progress/src/progress-indicator.directive.ts
+++ b/packages/primitives/progress/src/progress-indicator.directive.ts
@@ -1,5 +1,5 @@
-import { Directive } from '@angular/core';
 import { injectProgressRootContext } from './progress-root.directive';
+import { Directive } from '@angular/core';
 
 const attr = (value: boolean) => (value ? '' : undefined);
 
diff --git a/packages/primitives/progress/src/progress-label.directive.ts b/packages/primitives/progress/src/progress-label.directive.ts
index faf30dc1a..6224aa89c 100644
--- a/packages/primitives/progress/src/progress-label.directive.ts
+++ b/packages/primitives/progress/src/progress-label.directive.ts
@@ -1,5 +1,5 @@
-import { DestroyRef, Directive, inject } from '@angular/core';
 import { injectProgressRootContext } from './progress-root.directive';
+import { DestroyRef, Directive, inject } from '@angular/core';
 
 const attr = (value: boolean) => (value ? '' : undefined);
 
diff --git a/packages/primitives/progress/src/progress-root.directive.ts b/packages/primitives/progress/src/progress-root.directive.ts
index dcd369226..09fed8a27 100644
--- a/packages/primitives/progress/src/progress-root.directive.ts
+++ b/packages/primitives/progress/src/progress-root.directive.ts
@@ -1,4 +1,4 @@
-import { computed, Directive, inject, input, numberAttribute, signal, Signal } from '@angular/core';
+import { computed, Directive, inject, input, numberAttribute, Signal, signal } from '@angular/core';
 import { createContext, injectId } from '@radix-ng/primitives/core';
 
 const attr = (value: boolean) => (value ? '' : undefined);
diff --git a/packages/primitives/progress/src/progress-track.directive.ts b/packages/primitives/progress/src/progress-track.directive.ts
index ae36ff672..429b59e76 100644
--- a/packages/primitives/progress/src/progress-track.directive.ts
+++ b/packages/primitives/progress/src/progress-track.directive.ts
@@ -1,5 +1,5 @@
-import { Directive } from '@angular/core';
 import { injectProgressRootContext } from './progress-root.directive';
+import { Directive } from '@angular/core';
 
 const attr = (value: boolean) => (value ? '' : undefined);
 
diff --git a/packages/primitives/progress/src/progress-value.directive.ts b/packages/primitives/progress/src/progress-value.directive.ts
index fb9c6650c..fb9c2c83c 100644
--- a/packages/primitives/progress/src/progress-value.directive.ts
+++ b/packages/primitives/progress/src/progress-value.directive.ts
@@ -1,5 +1,5 @@
-import { Directive } from '@angular/core';
 import { injectProgressRootContext } from './progress-root.directive';
+import { Directive } from '@angular/core';
 
 const attr = (value: boolean) => (value ? '' : undefined);
 
diff --git a/packages/primitives/progress/stories/progress-circular.ts b/packages/primitives/progress/stories/progress-circular.ts
index 401bfc938..c55883383 100644
--- a/packages/primitives/progress/stories/progress-circular.ts
+++ b/packages/primitives/progress/stories/progress-circular.ts
@@ -1,9 +1,9 @@
-import { ChangeDetectionStrategy, Component, computed, signal } from '@angular/core';
 import { RdxProgressIndicatorDirective } from '../src/progress-indicator.directive';
 import { RdxProgressLabelDirective } from '../src/progress-label.directive';
 import { RdxProgressRootDirective } from '../src/progress-root.directive';
 import { RdxProgressTrackDirective } from '../src/progress-track.directive';
 import { RdxProgressValueDirective } from '../src/progress-value.directive';
+import { ChangeDetectionStrategy, Component, computed, signal } from '@angular/core';
 
 @Component({
     changeDetection: ChangeDetectionStrategy.Eager,
@@ -16,20 +16,20 @@ import { RdxProgressValueDirective } from '../src/progress-value.directive';
         RdxProgressIndicatorDirective
     ],
     template: `
-        <div class="relative grid size-40 place-items-center" [value]="progress()" rdxProgressRoot>
+        <div class="relative grid size-40 place-items-center" rdxProgressRoot [value]="progress()">
             <span class="sr-only" rdxProgressLabel>Storage used</span>
 
             <svg class="size-full -rotate-90" viewBox="0 0 100 100" rdxProgressTrack>
                 <circle class="stroke-muted fill-none" cx="50" cy="50" r="44" stroke-width="8" />
                 <circle
                     class="stroke-primary fill-none transition-all duration-500 ease-out"
-                    [attr.stroke-dasharray]="dashArray()"
                     cx="50"
                     cy="50"
                     r="44"
                     stroke-linecap="round"
                     stroke-width="8"
                     rdxProgressIndicator
+                    [attr.stroke-dasharray]="dashArray()"
                 />
             </svg>
 
diff --git a/packages/primitives/progress/stories/progress-linear.ts b/packages/primitives/progress/stories/progress-linear.ts
index 7d4d08d9f..3ca2dfb42 100644
--- a/packages/primitives/progress/stories/progress-linear.ts
+++ b/packages/primitives/progress/stories/progress-linear.ts
@@ -1,10 +1,10 @@
-import { ChangeDetectionStrategy, Component, computed, DestroyRef, inject, signal } from '@angular/core';
 import { cn } from '../../storybook/styles';
 import { RdxProgressIndicatorDirective } from '../src/progress-indicator.directive';
 import { RdxProgressLabelDirective } from '../src/progress-label.directive';
 import { RdxProgressRootDirective } from '../src/progress-root.directive';
 import { RdxProgressTrackDirective } from '../src/progress-track.directive';
 import { RdxProgressValueDirective } from '../src/progress-value.directive';
+import { ChangeDetectionStrategy, Component, computed, DestroyRef, inject, signal } from '@angular/core';
 
 const progressSteps = [12, 28, 44, 60, 76, 92, 100] as const;
 
@@ -19,14 +19,14 @@ const progressSteps = [12, 28, 44, 60, 76, 92, 100] as const;
         RdxProgressIndicatorDirective
     ],
     template: `
-        <div class="flex w-80 flex-col gap-2" [value]="progress()" rdxProgressRoot>
+        <div class="flex w-80 flex-col gap-2" rdxProgressRoot [value]="progress()">
             <div class="flex items-center justify-between gap-4">
                 <span class="text-foreground text-sm font-medium" rdxProgressLabel>Upload progress</span>
                 <span class="text-muted-foreground text-sm tabular-nums" rdxProgressValue></span>
             </div>
 
             <div class="bg-muted h-3 overflow-hidden rounded-full" rdxProgressTrack>
-                <div [class]="indicatorClass()" rdxProgressIndicator></div>
+                <div rdxProgressIndicator [class]="indicatorClass()"></div>
             </div>
         </div>
     `
diff --git a/packages/primitives/progress/stories/progress.stories.ts b/packages/primitives/progress/stories/progress.stories.ts
index a9bfb47e7..7af05715b 100644
--- a/packages/primitives/progress/stories/progress.stories.ts
+++ b/packages/primitives/progress/stories/progress.stories.ts
@@ -1,4 +1,3 @@
-import { Meta, moduleMetadata, StoryObj } from '@storybook/angular';
 import { cn } from '../../storybook/styles';
 import { tailwindDemoDecorator } from '../../storybook/tailwind-demo';
 import { RdxProgressIndicatorDirective } from '../src/progress-indicator.directive';
@@ -10,6 +9,7 @@ import { ProgressCircularComponent } from './progress-circular';
 import circularSource from './progress-circular?raw';
 import { ProgressLinearComponent } from './progress-linear';
 import linearSource from './progress-linear?raw';
+import { Meta, moduleMetadata, StoryObj } from '@storybook/angular';
 
 const source = (code: string) => ({ docs: { source: { code, language: 'typescript' } } });
 const html = String.raw;
diff --git a/packages/primitives/radio/__tests__/radio.spec.ts b/packages/primitives/radio/__tests__/radio.spec.ts
index 68c7af39e..6407a41d3 100644
--- a/packages/primitives/radio/__tests__/radio.spec.ts
+++ b/packages/primitives/radio/__tests__/radio.spec.ts
@@ -1,7 +1,3 @@
-import { ChangeDetectionStrategy, Component, signal } from '@angular/core';
-import { ComponentFixture, TestBed } from '@angular/core/testing';
-import { form, FormField, required } from '@angular/forms/signals';
-import { By } from '@angular/platform-browser';
 import {
     RdxRadioGroupDirective,
     RdxRadioIndicatorDirective,
@@ -9,6 +5,10 @@ import {
     RdxRadioItemInputDirective,
     RdxRadioValueChangeEvent
 } from '../index';
+import { ChangeDetectionStrategy, Component, signal } from '@angular/core';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { form, FormField, required } from '@angular/forms/signals';
+import { By } from '@angular/platform-browser';
 
 @Component({
     changeDetection: ChangeDetectionStrategy.Eager,
@@ -16,13 +16,13 @@ import {
     template: `
         <form>
             <div
+                rdxRadioRoot
+                name="density"
                 [value]="value"
                 [disabled]="disabled"
                 [required]="required"
                 [readOnly]="readonly"
                 (onValueChange)="onValueChange($event)"
-                rdxRadioRoot
-                name="density"
             >
                 <button id="default" rdxRadioItem value="default">
                     <span rdxRadioIndicator></span>
@@ -62,7 +62,7 @@ class RadioHost {
     imports: [RdxRadioGroupDirective, RdxRadioItemDirective, RdxRadioItemInputDirective, RdxRadioIndicatorDirective],
     template: `
         <form>
-            <div [value]="value" (onValueChange)="onValueChange($event)" rdxRadioRoot name="storage">
+            <div rdxRadioRoot name="storage" [value]="value" (onValueChange)="onValueChange($event)">
                 <label>
                     <span rdxRadioItem value="ssd">
                         <span rdxRadioIndicator></span>
@@ -289,7 +289,7 @@ describe('RdxRadio', () => {
     changeDetection: ChangeDetectionStrategy.Eager,
     imports: [RdxRadioGroupDirective, RdxRadioItemDirective, RdxRadioItemInputDirective],
     template: `
-        <div [invalid]="invalid()" [errors]="errors()" rdxRadioRoot name="plan">
+        <div rdxRadioRoot name="plan" [invalid]="invalid()" [errors]="errors()">
             <button id="free" rdxRadioItem value="free"><input rdxRadioItemInput /></button>
             <button id="pro" rdxRadioItem value="pro"><input rdxRadioItemInput /></button>
         </div>
@@ -353,7 +353,7 @@ describe('RdxRadioGroup validation state (batch #4)', () => {
     changeDetection: ChangeDetectionStrategy.Eager,
     imports: [FormField, RdxRadioGroupDirective, RdxRadioItemDirective, RdxRadioItemInputDirective],
     template: `
-        <div [formField]="plan" rdxRadioRoot name="plan">
+        <div rdxRadioRoot name="plan" [formField]="plan">
             <button id="free" rdxRadioItem value="free"><input rdxRadioItemInput /></button>
             <button id="pro" rdxRadioItem value="pro"><input rdxRadioItemInput /></button>
         </div>
diff --git a/packages/primitives/radio/index.ts b/packages/primitives/radio/index.ts
index 00fa7d1c6..a73fd07b4 100644
--- a/packages/primitives/radio/index.ts
+++ b/packages/primitives/radio/index.ts
@@ -1,5 +1,4 @@
-export * from './src/radio-root.directive';
-
 export * from './src/radio-indicator.directive';
-export * from './src/radio-item-input.directive';
 export * from './src/radio-item.directive';
+export * from './src/radio-item-input.directive';
+export * from './src/radio-root.directive';
diff --git a/packages/primitives/radio/src/radio-indicator.directive.ts b/packages/primitives/radio/src/radio-indicator.directive.ts
index 76190e6a8..44240b7e2 100644
--- a/packages/primitives/radio/src/radio-indicator.directive.ts
+++ b/packages/primitives/radio/src/radio-indicator.directive.ts
@@ -1,6 +1,6 @@
+import { injectRadioItemContext } from './radio-item.directive';
 import { booleanAttribute, computed, Directive, input } from '@angular/core';
 import { BooleanInput } from '@radix-ng/primitives/core';
-import { injectRadioItemContext } from './radio-item.directive';
 
 @Directive({
     selector: '[rdxRadioIndicator]',
diff --git a/packages/primitives/radio/src/radio-item-input.directive.ts b/packages/primitives/radio/src/radio-item-input.directive.ts
index e9a831c4a..89df9332b 100644
--- a/packages/primitives/radio/src/radio-item-input.directive.ts
+++ b/packages/primitives/radio/src/radio-item-input.directive.ts
@@ -1,6 +1,6 @@
-import { computed, Directive, effect, ElementRef, inject } from '@angular/core';
 import { injectRadioItemContext } from './radio-item.directive';
 import { injectRadioRootContext } from './radio-root.directive';
+import { computed, Directive, effect, ElementRef, inject } from '@angular/core';
 
 /**
  * The hidden native radio input that mirrors the item state for form submission, native validation,
diff --git a/packages/primitives/radio/src/radio-item.directive.ts b/packages/primitives/radio/src/radio-item.directive.ts
index 970538742..e8afaaa29 100644
--- a/packages/primitives/radio/src/radio-item.directive.ts
+++ b/packages/primitives/radio/src/radio-item.directive.ts
@@ -1,7 +1,7 @@
+import { injectRadioRootContext } from './radio-root.directive';
 import { booleanAttribute, computed, Directive, effect, ElementRef, inject, input, Signal } from '@angular/core';
 import { RdxCompositeItem } from '@radix-ng/primitives/composite';
 import { BooleanInput, createContext } from '@radix-ng/primitives/core';
-import { injectRadioRootContext } from './radio-root.directive';
 
 export interface RadioItemContext {
     value: Signal<string>;
diff --git a/packages/primitives/radio/src/radio-root.directive.ts b/packages/primitives/radio/src/radio-root.directive.ts
index 5fb8e87df..d78de3e48 100644
--- a/packages/primitives/radio/src/radio-root.directive.ts
+++ b/packages/primitives/radio/src/radio-root.directive.ts
@@ -1,3 +1,4 @@
+import { RdxRadioValueChangeReason } from './radio-tokens';
 import {
     booleanAttribute,
     computed,
@@ -8,8 +9,8 @@ import {
     input,
     model,
     output,
-    signal,
     Signal,
+    signal,
     untracked
 } from '@angular/core';
 import { ControlValueAccessor } from '@angular/forms';
@@ -24,7 +25,6 @@ import {
     RdxFormUiTouchTarget,
     RdxFormValueControl
 } from '@radix-ng/primitives/core';
-import { RdxRadioValueChangeReason } from './radio-tokens';
 
 export type { RdxRadioValueChangeReason } from './radio-tokens';
 
diff --git a/packages/primitives/radio/stories/radio-default.ts b/packages/primitives/radio/stories/radio-default.ts
index ed28321fe..6cf34b154 100644
--- a/packages/primitives/radio/stories/radio-default.ts
+++ b/packages/primitives/radio/stories/radio-default.ts
@@ -1,3 +1,4 @@
+import { demoRadio } from '../../storybook/styles';
 import { ChangeDetectionStrategy, Component } from '@angular/core';
 import { RdxLabelDirective } from '@radix-ng/primitives/label';
 import {
@@ -6,31 +7,30 @@ import {
     RdxRadioItemDirective,
     RdxRadioItemInputDirective
 } from '@radix-ng/primitives/radio';
-import { demoRadio } from '../../storybook/styles';
 
 @Component({
     changeDetection: ChangeDetectionStrategy.Eager,
     selector: 'radio-default-example',
     template: `
         <form>
-            <div [class]="r.group" rdxRadioRoot name="density" aria-label="View density">
-                <label [class]="r.row" rdxLabel>
-                    <span [class]="r.item" rdxRadioItem value="default">
-                        <span [class]="r.indicator" rdxRadioIndicator></span>
+            <div rdxRadioRoot name="density" aria-label="View density" [class]="r.group">
+                <label rdxLabel [class]="r.row">
+                    <span rdxRadioItem value="default" [class]="r.item">
+                        <span rdxRadioIndicator [class]="r.indicator"></span>
                         <input rdxRadioItemInput />
                     </span>
                     <span [class]="r.label">Default</span>
                 </label>
-                <label [class]="r.row" rdxLabel>
-                    <span [class]="r.item" rdxRadioItem value="comfortable">
-                        <span [class]="r.indicator" rdxRadioIndicator></span>
+                <label rdxLabel [class]="r.row">
+                    <span rdxRadioItem value="comfortable" [class]="r.item">
+                        <span rdxRadioIndicator [class]="r.indicator"></span>
                         <input rdxRadioItemInput />
                     </span>
                     <span [class]="r.label">Comfortable</span>
                 </label>
-                <label [class]="r.row" rdxLabel>
-                    <span [class]="r.item" rdxRadioItem value="compact">
-                        <span [class]="r.indicator" rdxRadioIndicator></span>
+                <label rdxLabel [class]="r.row">
+                    <span rdxRadioItem value="compact" [class]="r.item">
+                        <span rdxRadioIndicator [class]="r.indicator"></span>
                         <input rdxRadioItemInput />
                     </span>
                     <span [class]="r.label">Compact</span>
diff --git a/packages/primitives/radio/stories/radio-disabled.ts b/packages/primitives/radio/stories/radio-disabled.ts
index 0f6b6ffdd..4734a8b33 100644
--- a/packages/primitives/radio/stories/radio-disabled.ts
+++ b/packages/primitives/radio/stories/radio-disabled.ts
@@ -1,3 +1,4 @@
+import { demoRadio } from '../../storybook/styles';
 import { ChangeDetectionStrategy, Component } from '@angular/core';
 import { RdxLabelDirective } from '@radix-ng/primitives/label';
 import {
@@ -6,37 +7,36 @@ import {
     RdxRadioItemDirective,
     RdxRadioItemInputDirective
 } from '@radix-ng/primitives/radio';
-import { demoRadio } from '../../storybook/styles';
 
 @Component({
     changeDetection: ChangeDetectionStrategy.Eager,
     selector: 'radio-disabled-example',
     template: `
         <div
-            [class]="r.group"
-            [value]="'comfortable'"
             rdxRadioRoot
             name="density-disabled"
             disabled
             aria-label="View density"
+            [class]="r.group"
+            [value]="'comfortable'"
         >
-            <label [class]="r.row" rdxLabel>
-                <span [class]="r.item" rdxRadioItem value="default">
-                    <span [class]="r.indicator" rdxRadioIndicator></span>
+            <label rdxLabel [class]="r.row">
+                <span rdxRadioItem value="default" [class]="r.item">
+                    <span rdxRadioIndicator [class]="r.indicator"></span>
                     <input rdxRadioItemInput />
                 </span>
                 <span [class]="r.label">Default</span>
             </label>
-            <label [class]="r.row" rdxLabel>
-                <span [class]="r.item" rdxRadioItem value="comfortable">
-                    <span [class]="r.indicator" rdxRadioIndicator></span>
+            <label rdxLabel [class]="r.row">
+                <span rdxRadioItem value="comfortable" [class]="r.item">
+                    <span rdxRadioIndicator [class]="r.indicator"></span>
                     <input rdxRadioItemInput />
                 </span>
                 <span [class]="r.label">Comfortable</span>
             </label>
-            <label [class]="r.row" rdxLabel>
-                <span [class]="r.item" rdxRadioItem value="compact">
-                    <span [class]="r.indicator" rdxRadioIndicator></span>
+            <label rdxLabel [class]="r.row">
+                <span rdxRadioItem value="compact" [class]="r.item">
+                    <span rdxRadioIndicator [class]="r.indicator"></span>
                     <input rdxRadioItemInput />
                 </span>
                 <span [class]="r.label">Compact</span>
diff --git a/packages/primitives/radio/stories/radio-template-driven-forms.ts b/packages/primitives/radio/stories/radio-template-driven-forms.ts
index a613ba543..d26a05737 100644
--- a/packages/primitives/radio/stories/radio-template-driven-forms.ts
+++ b/packages/primitives/radio/stories/radio-template-driven-forms.ts
@@ -1,3 +1,4 @@
+import { cn, demoButton, demoRadio } from '../../storybook/styles';
 import { ChangeDetectionStrategy, Component } from '@angular/core';
 import { FormsModule } from '@angular/forms';
 import { RdxLabelDirective } from '@radix-ng/primitives/label';
@@ -7,7 +8,6 @@ import {
     RdxRadioItemDirective,
     RdxRadioItemInputDirective
 } from '@radix-ng/primitives/radio';
-import { cn, demoButton, demoRadio } from '../../storybook/styles';
 
 @Component({
     changeDetection: ChangeDetectionStrategy.Eager,
@@ -15,17 +15,17 @@ import { cn, demoButton, demoRadio } from '../../storybook/styles';
     template: `
         <form class="flex w-72 flex-col gap-4" (ngSubmit)="submit()">
             <div
-                [(ngModel)]="hotelRoom"
-                [class]="r.group"
                 name="hotelRoom"
                 rdxRadioRoot
                 required
                 aria-label="Hotel room"
+                [class]="r.group"
+                [(ngModel)]="hotelRoom"
             >
                 @for (room of rooms; track room) {
-                    <label [class]="r.row" rdxLabel>
-                        <span [class]="r.item" [value]="room" rdxRadioItem>
-                            <span [class]="r.indicator" rdxRadioIndicator></span>
+                    <label rdxLabel [class]="r.row">
+                        <span rdxRadioItem [class]="r.item" [value]="room">
+                            <span rdxRadioIndicator [class]="r.indicator"></span>
                             <input rdxRadioItemInput />
                         </span>
                         <span [class]="r.label">
@@ -35,7 +35,7 @@ import { cn, demoButton, demoRadio } from '../../storybook/styles';
                 }
             </div>
 
-            <button [class]="cn(b.base, b.primary, b.size.md)" type="submit">Submit</button>
+            <button type="submit" [class]="cn(b.base, b.primary, b.size.md)">Submit</button>
 
             @if (submittedRoom) {
                 <p class="text-muted-foreground text-sm">
diff --git a/packages/primitives/radio/stories/radio.stories.ts b/packages/primitives/radio/stories/radio.stories.ts
index 5c9eb35dc..6b6704b35 100644
--- a/packages/primitives/radio/stories/radio.stories.ts
+++ b/packages/primitives/radio/stories/radio.stories.ts
@@ -1,12 +1,11 @@
-import { Meta, moduleMetadata, StoryObj } from '@storybook/angular';
 import { tailwindDemoDecorator } from '../../storybook/tailwind-demo';
 import { RadioDefaultComponent } from './radio-default';
-import { RadioDisabledComponent } from './radio-disabled';
-import { RadioTemplateDrivenFormsComponent } from './radio-template-driven-forms';
-
 import defaultSource from './radio-default?raw';
+import { RadioDisabledComponent } from './radio-disabled';
 import disabledSource from './radio-disabled?raw';
+import { RadioTemplateDrivenFormsComponent } from './radio-template-driven-forms';
 import templateDrivenFormsSource from './radio-template-driven-forms?raw';
+import { Meta, moduleMetadata, StoryObj } from '@storybook/angular';
 
 const source = (code: string) => ({ docs: { source: { code, language: 'typescript' } } });
 
diff --git a/packages/primitives/recipes/confirmation-dialog.stories.ts b/packages/primitives/recipes/confirmation-dialog.stories.ts
index d22a361e4..3bd5fe286 100644
--- a/packages/primitives/recipes/confirmation-dialog.stories.ts
+++ b/packages/primitives/recipes/confirmation-dialog.stories.ts
@@ -1,7 +1,7 @@
-import { Meta, moduleMetadata, StoryObj } from '@storybook/angular';
 import { tailwindDemoDecorator } from '../storybook/tailwind-demo';
 import { ConfirmationDialogExample } from './confirmation-dialog';
 import confirmationDialogSource from './confirmation-dialog?raw';
+import { Meta, moduleMetadata, StoryObj } from '@storybook/angular';
 
 const html = String.raw;
 
diff --git a/packages/primitives/recipes/confirmation-dialog.ts b/packages/primitives/recipes/confirmation-dialog.ts
index 4fd27ebf2..ab04acd25 100644
--- a/packages/primitives/recipes/confirmation-dialog.ts
+++ b/packages/primitives/recipes/confirmation-dialog.ts
@@ -1,7 +1,7 @@
+import { cn, demoButton, demoDialog } from '../storybook/styles';
 import { ChangeDetectionStrategy, Component, inject, Injectable, signal } from '@angular/core';
 import { alertDialogImports } from '@radix-ng/primitives/alert-dialog';
 import { RdxButtonDirective } from '@radix-ng/primitives/button';
-import { cn, demoButton, demoDialog } from '../storybook/styles';
 
 /**
  * Confirmation Dialog — an imperative `confirm()` built on the Alert Dialog primitive.
@@ -65,15 +65,15 @@ export class ConfirmService {
     changeDetection: ChangeDetectionStrategy.OnPush,
     imports: [...alertDialogImports],
     template: `
-        <div [open]="confirm.open()" (openChange)="confirm.onOpenChange($event)" rdxAlertDialogRoot>
+        <div rdxAlertDialogRoot [open]="confirm.open()" (openChange)="confirm.onOpenChange($event)">
             <ng-template rdxAlertDialogPortal>
-                <div [class]="cn(d.backdrop, d.backdropAnimated)" rdxAlertDialogBackdrop></div>
+                <div rdxAlertDialogBackdrop [class]="cn(d.backdrop, d.backdropAnimated)"></div>
 
-                <div [class]="cn(d.popup, d.popupAnimated)" rdxAlertDialogPopup>
+                <div rdxAlertDialogPopup [class]="cn(d.popup, d.popupAnimated)">
                     @if (confirm.options(); as o) {
-                        <h2 [class]="d.title" rdxAlertDialogTitle>{{ o.title }}</h2>
+                        <h2 rdxAlertDialogTitle [class]="d.title">{{ o.title }}</h2>
                         @if (o.description) {
-                            <p [class]="d.description" rdxAlertDialogDescription>{{ o.description }}</p>
+                            <p rdxAlertDialogDescription [class]="d.description">{{ o.description }}</p>
                         }
 
                         <div [class]="d.footer">
@@ -110,7 +110,7 @@ export class ConfirmDialogHost {
     imports: [RdxButtonDirective, ConfirmDialogHost],
     template: `
         <div class="flex flex-col items-center gap-4">
-            <button [class]="cn(b.base, b.destructive, b.size.md)" (click)="deleteAccount()" rdxButton>
+            <button rdxButton [class]="cn(b.base, b.destructive, b.size.md)" (click)="deleteAccount()">
                 Delete account
             </button>
 
diff --git a/packages/primitives/recipes/notification-dropdown.stories.ts b/packages/primitives/recipes/notification-dropdown.stories.ts
index a62d15d27..f05300fdf 100644
--- a/packages/primitives/recipes/notification-dropdown.stories.ts
+++ b/packages/primitives/recipes/notification-dropdown.stories.ts
@@ -1,7 +1,7 @@
-import { Meta, moduleMetadata, StoryObj } from '@storybook/angular';
 import { tailwindDemoDecorator } from '../storybook/tailwind-demo';
 import { NotificationDropdownExample } from './notification-dropdown';
 import notificationDropdownSource from './notification-dropdown?raw';
+import { Meta, moduleMetadata, StoryObj } from '@storybook/angular';
 
 const html = String.raw;
 
diff --git a/packages/primitives/recipes/notification-dropdown.ts b/packages/primitives/recipes/notification-dropdown.ts
index f36b68b7e..86cff22cc 100644
--- a/packages/primitives/recipes/notification-dropdown.ts
+++ b/packages/primitives/recipes/notification-dropdown.ts
@@ -1,3 +1,4 @@
+import { cn, demoButton, demoCard, demoPopover } from '../storybook/styles';
 import { ChangeDetectionStrategy, Component, computed, signal } from '@angular/core';
 import { LucideBell, LucideCheckCheck } from '@lucide/angular';
 import { popoverImports } from '@radix-ng/primitives/popover';
@@ -8,7 +9,6 @@ import {
     RdxScrollAreaThumb,
     RdxScrollAreaViewport
 } from '@radix-ng/primitives/scroll-area';
-import { cn, demoButton, demoCard, demoPopover } from '../storybook/styles';
 
 interface Notification {
     id: number;
@@ -41,9 +41,9 @@ interface Notification {
     template: `
         <ng-container rdxPopoverRoot>
             <button
-                [class]="cn(b.base, b.outline, b.size.icon, 'relative')"
                 aria-label="Notifications"
                 rdxPopoverTrigger
+                [class]="cn(b.base, b.outline, b.size.icon, 'relative')"
             >
                 <svg aria-hidden="true" lucideBell size="18"></svg>
                 @if (unreadCount() > 0) {
@@ -55,10 +55,10 @@ interface Notification {
                 }
             </button>
 
-            <div *rdxPopoverPortal [class]="p.positioner" sideOffset="8" align="end" rdxPopoverPositioner>
-                <div [class]="popup" rdxPopoverPopup>
+            <div *rdxPopoverPortal sideOffset="8" align="end" rdxPopoverPositioner [class]="p.positioner">
+                <div rdxPopoverPopup [class]="popup">
                     <div class="border-border flex items-center justify-between border-b px-4 py-3">
-                        <h2 [class]="p.title" rdxPopoverTitle>Notifications</h2>
+                        <h2 rdxPopoverTitle [class]="p.title">Notifications</h2>
                         <button
                             [class]="cn(b.base, b.ghost, b.size.sm, 'gap-1.5 text-xs')"
                             [disabled]="unreadCount() === 0"
@@ -79,9 +79,9 @@ interface Notification {
                                     >
                                         <span
                                             class="mt-1.5 size-2 shrink-0 rounded-full"
+                                            aria-hidden="true"
                                             [class.bg-primary]="!n.read"
                                             [class.bg-transparent]="n.read"
-                                            aria-hidden="true"
                                         ></span>
                                         <span class="min-w-0 flex-1">
                                             <span class="text-foreground block text-sm font-medium">
diff --git a/packages/primitives/recipes/split-button.stories.ts b/packages/primitives/recipes/split-button.stories.ts
index e57b7db2f..05cec5304 100644
--- a/packages/primitives/recipes/split-button.stories.ts
+++ b/packages/primitives/recipes/split-button.stories.ts
@@ -1,7 +1,7 @@
-import { Meta, moduleMetadata, StoryObj } from '@storybook/angular';
 import { tailwindDemoDecorator } from '../storybook/tailwind-demo';
 import { SplitButtonExample } from './split-button';
 import splitButtonSource from './split-button?raw';
+import { Meta, moduleMetadata, StoryObj } from '@storybook/angular';
 
 const html = String.raw;
 
diff --git a/packages/primitives/recipes/split-button.ts b/packages/primitives/recipes/split-button.ts
index b9ddf055c..6964fade9 100644
--- a/packages/primitives/recipes/split-button.ts
+++ b/packages/primitives/recipes/split-button.ts
@@ -1,8 +1,8 @@
+import { cn, demoButton, demoMenu } from '../storybook/styles';
 import { ChangeDetectionStrategy, Component, signal } from '@angular/core';
 import { LucideChevronDown } from '@lucide/angular';
 import { RdxButtonDirective } from '@radix-ng/primitives/button';
 import { RdxMenuModule } from '@radix-ng/primitives/menu';
-import { cn, demoButton, demoMenu } from '../storybook/styles';
 
 /**
  * Split Button — a primary action joined to a menu of related actions.
@@ -18,32 +18,32 @@ import { cn, demoButton, demoMenu } from '../storybook/styles';
     template: `
         <div class="flex flex-col items-center gap-4">
             <div class="inline-flex rounded-md shadow-sm">
-                <button [class]="cn(b.base, b.primary, b.size.md, 'rounded-r-none')" (click)="run('Save')" rdxButton>
+                <button rdxButton [class]="cn(b.base, b.primary, b.size.md, 'rounded-r-none')" (click)="run('Save')">
                     Save
                 </button>
 
                 <ng-container #root="rdxMenuRoot" rdxMenuRoot>
                     <button
+                        aria-label="More save options"
+                        rdxMenuTrigger
                         [class]="
                             cn(b.base, b.primary, b.size.icon, 'border-primary-foreground/20 rounded-l-none border-l')
                         "
-                        aria-label="More save options"
-                        rdxMenuTrigger
                     >
                         <svg lucideChevronDown size="16"></svg>
                     </button>
 
                     @if (root.open()) {
-                        <div [class]="m.positioner" sideOffset="6" align="end" rdxMenuPositioner>
-                            <div [class]="m.popup" rdxMenuPopup>
-                                <button [class]="m.item" (click)="run('Save and duplicate')" rdxMenuItem>
+                        <div sideOffset="6" align="end" rdxMenuPositioner [class]="m.positioner">
+                            <div rdxMenuPopup [class]="m.popup">
+                                <button rdxMenuItem [class]="m.item" (click)="run('Save and duplicate')">
                                     Save and duplicate
                                 </button>
-                                <button [class]="m.item" (click)="run('Save as template')" rdxMenuItem>
+                                <button rdxMenuItem [class]="m.item" (click)="run('Save as template')">
                                     Save as template
                                 </button>
-                                <div [class]="m.separator" rdxMenuSeparator></div>
-                                <button [class]="m.item" (click)="run('Save and close')" rdxMenuItem>
+                                <div rdxMenuSeparator [class]="m.separator"></div>
+                                <button rdxMenuItem [class]="m.item" (click)="run('Save and close')">
                                     Save and close
                                 </button>
                             </div>
diff --git a/packages/primitives/schematics/ng-add/index.ts b/packages/primitives/schematics/ng-add/index.ts
index b484579a4..b8c734622 100644
--- a/packages/primitives/schematics/ng-add/index.ts
+++ b/packages/primitives/schematics/ng-add/index.ts
@@ -1,3 +1,5 @@
+import { getPackageVersionFromPackageJson } from './package-config';
+import { Schema } from './schema';
 import { Rule, SchematicContext, SchematicsException, Tree } from '@angular-devkit/schematics';
 import { NodePackageInstallTask } from '@angular-devkit/schematics/tasks';
 import {
@@ -6,8 +8,6 @@ import {
     NodeDependency,
     NodeDependencyType
 } from '@schematics/angular/utility/dependencies';
-import { getPackageVersionFromPackageJson } from './package-config';
-import { Schema } from './schema';
 
 const PACKAGE_NAME = '@radix-ng/primitives';
 const PEER_DEPENDENCIES: Record<string, string> = {
diff --git a/packages/primitives/scroll-area/__tests__/scroll-area-root.spec.ts b/packages/primitives/scroll-area/__tests__/scroll-area-root.spec.ts
index a5a197e79..0017ae088 100644
--- a/packages/primitives/scroll-area/__tests__/scroll-area-root.spec.ts
+++ b/packages/primitives/scroll-area/__tests__/scroll-area-root.spec.ts
@@ -1,5 +1,3 @@
-import { ChangeDetectionStrategy, Component, CSP_NONCE } from '@angular/core';
-import { TestBed } from '@angular/core/testing';
 import { RdxScrollAreaContent } from '../src/scroll-area-content';
 import { RdxScrollAreaCorner } from '../src/scroll-area-corner';
 import { RdxScrollAreaRoot } from '../src/scroll-area-root';
@@ -7,11 +5,13 @@ import { RdxScrollAreaScrollbar } from '../src/scroll-area-scrollbar';
 import { RdxScrollAreaThumb } from '../src/scroll-area-thumb';
 import { RdxScrollAreaViewport } from '../src/scroll-area-viewport';
 import { injectScrollbarHideStyles } from '../src/utils';
+import { ChangeDetectionStrategy, Component, CSP_NONCE } from '@angular/core';
+import { TestBed } from '@angular/core/testing';
 
 @Component({
     changeDetection: ChangeDetectionStrategy.Eager,
     template: `
-        <div [overflowEdgeThreshold]="threshold" rdxScrollAreaRoot>
+        <div rdxScrollAreaRoot [overflowEdgeThreshold]="threshold">
             <div rdxScrollAreaViewport style="width: 100px; height: 100px">
                 <div rdxScrollAreaContent style="width: 400px; height: 400px">content</div>
             </div>
diff --git a/packages/primitives/scroll-area/index.ts b/packages/primitives/scroll-area/index.ts
index cac5896ec..927774bb4 100644
--- a/packages/primitives/scroll-area/index.ts
+++ b/packages/primitives/scroll-area/index.ts
@@ -1,10 +1,10 @@
-import { NgModule } from '@angular/core';
 import { RdxScrollAreaContent } from './src/scroll-area-content';
 import { RdxScrollAreaCorner } from './src/scroll-area-corner';
 import { RdxScrollAreaRoot } from './src/scroll-area-root';
 import { RdxScrollAreaScrollbar } from './src/scroll-area-scrollbar';
 import { RdxScrollAreaThumb } from './src/scroll-area-thumb';
 import { RdxScrollAreaViewport } from './src/scroll-area-viewport';
+import { NgModule } from '@angular/core';
 
 export * from './src/scroll-area-content';
 export * from './src/scroll-area-corner';
diff --git a/packages/primitives/scroll-area/src/scroll-area-content.ts b/packages/primitives/scroll-area/src/scroll-area-content.ts
index 655230b1a..0e50b92ac 100644
--- a/packages/primitives/scroll-area/src/scroll-area-content.ts
+++ b/packages/primitives/scroll-area/src/scroll-area-content.ts
@@ -1,6 +1,6 @@
-import { afterNextRender, DestroyRef, Directive, ElementRef, inject } from '@angular/core';
 import { injectScrollAreaRootContext } from './scroll-area-root';
 import { injectScrollAreaViewportContext } from './scroll-area-viewport';
+import { afterNextRender, DestroyRef, Directive, ElementRef, inject } from '@angular/core';
 
 /**
  * A container for the content of the scroll area.
diff --git a/packages/primitives/scroll-area/src/scroll-area-corner.ts b/packages/primitives/scroll-area/src/scroll-area-corner.ts
index 5937b7bb9..ed4969e84 100644
--- a/packages/primitives/scroll-area/src/scroll-area-corner.ts
+++ b/packages/primitives/scroll-area/src/scroll-area-corner.ts
@@ -1,5 +1,5 @@
-import { DestroyRef, Directive, ElementRef, inject } from '@angular/core';
 import { injectScrollAreaRootContext } from './scroll-area-root';
+import { DestroyRef, Directive, ElementRef, inject } from '@angular/core';
 
 /**
  * A small rectangular area that appears at the intersection of horizontal and vertical scrollbars.
diff --git a/packages/primitives/scroll-area/src/scroll-area-root.ts b/packages/primitives/scroll-area/src/scroll-area-root.ts
index 16bf20541..0c08017df 100644
--- a/packages/primitives/scroll-area/src/scroll-area-root.ts
+++ b/packages/primitives/scroll-area/src/scroll-area-root.ts
@@ -1,3 +1,5 @@
+import { SCROLL_TIMEOUT } from './constants';
+import { getOffset } from './utils';
 import {
     booleanAttribute,
     computed,
@@ -6,13 +8,11 @@ import {
     ElementRef,
     inject,
     input,
-    signal,
-    Signal
+    Signal,
+    signal
 } from '@angular/core';
 import { BooleanInput, createContext, Direction, injectId } from '@radix-ng/primitives/core';
 import { injectDirection } from '@radix-ng/primitives/direction-provider';
-import { SCROLL_TIMEOUT } from './constants';
-import { getOffset } from './utils';
 
 export type Size = { width: number; height: number };
 export type Coords = { x: number; y: number };
diff --git a/packages/primitives/scroll-area/src/scroll-area-scrollbar.ts b/packages/primitives/scroll-area/src/scroll-area-scrollbar.ts
index 396e014e7..b670fdc42 100644
--- a/packages/primitives/scroll-area/src/scroll-area-scrollbar.ts
+++ b/packages/primitives/scroll-area/src/scroll-area-scrollbar.ts
@@ -1,7 +1,7 @@
-import { booleanAttribute, computed, Directive, effect, ElementRef, inject, input } from '@angular/core';
-import { BooleanInput, createContext } from '@radix-ng/primitives/core';
 import { injectScrollAreaRootContext } from './scroll-area-root';
 import { getOffset } from './utils';
+import { booleanAttribute, computed, Directive, effect, ElementRef, inject, input } from '@angular/core';
+import { BooleanInput, createContext } from '@radix-ng/primitives/core';
 
 export type ScrollbarOrientation = 'vertical' | 'horizontal';
 
diff --git a/packages/primitives/scroll-area/src/scroll-area-thumb.ts b/packages/primitives/scroll-area/src/scroll-area-thumb.ts
index 251ccee43..c1e8373a7 100644
--- a/packages/primitives/scroll-area/src/scroll-area-thumb.ts
+++ b/packages/primitives/scroll-area/src/scroll-area-thumb.ts
@@ -1,6 +1,6 @@
-import { Directive, effect, ElementRef, inject } from '@angular/core';
 import { injectScrollAreaRootContext } from './scroll-area-root';
 import { injectScrollAreaScrollbarContext } from './scroll-area-scrollbar';
+import { Directive, effect, ElementRef, inject } from '@angular/core';
 
 /**
  * The draggable part of the scrollbar that indicates the current scroll position.
diff --git a/packages/primitives/scroll-area/src/scroll-area-viewport.ts b/packages/primitives/scroll-area/src/scroll-area-viewport.ts
index 78246232f..565e48fa4 100644
--- a/packages/primitives/scroll-area/src/scroll-area-viewport.ts
+++ b/packages/primitives/scroll-area/src/scroll-area-viewport.ts
@@ -1,3 +1,6 @@
+import { MIN_THUMB_SIZE, SCROLL_END_TIMEOUT } from './constants';
+import { HiddenState, injectScrollAreaRootContext } from './scroll-area-root';
+import { getOffset, injectScrollbarHideStyles, normalizeScrollOffset } from './utils';
 import { isPlatformBrowser } from '@angular/common';
 import {
     afterNextRender,
@@ -10,9 +13,6 @@ import {
     PLATFORM_ID
 } from '@angular/core';
 import { clamp, createContext } from '@radix-ng/primitives/core';
-import { MIN_THUMB_SIZE, SCROLL_END_TIMEOUT } from './constants';
-import { HiddenState, injectScrollAreaRootContext } from './scroll-area-root';
-import { getOffset, injectScrollbarHideStyles, normalizeScrollOffset } from './utils';
 
 export interface ScrollAreaViewportContext {
     /** Re-measures the viewport and repositions the thumbs. Called by the content's ResizeObserver. */
diff --git a/packages/primitives/scroll-area/src/utils.ts b/packages/primitives/scroll-area/src/utils.ts
index 693c8c171..89cbc8e68 100644
--- a/packages/primitives/scroll-area/src/utils.ts
+++ b/packages/primitives/scroll-area/src/utils.ts
@@ -1,5 +1,5 @@
-import { clamp } from '@radix-ng/primitives/core';
 import { SCROLL_EDGE_TOLERANCE_PX } from './constants';
+import { clamp } from '@radix-ng/primitives/core';
 
 /**
  * Returns the combined start/end `margin` or `padding` of an element along an axis,
diff --git a/packages/primitives/scroll-area/stories/scroll-area.stories.ts b/packages/primitives/scroll-area/stories/scroll-area.stories.ts
index b5e80a2cb..89d28764f 100644
--- a/packages/primitives/scroll-area/stories/scroll-area.stories.ts
+++ b/packages/primitives/scroll-area/stories/scroll-area.stories.ts
@@ -1,4 +1,3 @@
-import { Meta, moduleMetadata, StoryObj } from '@storybook/angular';
 import { tailwindDemoDecorator } from '../../storybook/tailwind-demo';
 import {
     RdxScrollAreaContent,
@@ -9,13 +8,13 @@ import {
     RdxScrollAreaViewport
 } from '../index';
 import { ScrollAreaBothExample } from './scroll-area-both';
-import { ScrollAreaGradientExample } from './scroll-area-gradient';
-import { ScrollAreaTabsExample } from './scroll-area-tabs';
-
 // Full component source for the "Show code" panel (Vite `?raw` import).
 import bothSource from './scroll-area-both?raw';
+import { ScrollAreaGradientExample } from './scroll-area-gradient';
 import gradientSource from './scroll-area-gradient?raw';
+import { ScrollAreaTabsExample } from './scroll-area-tabs';
 import tabsSource from './scroll-area-tabs?raw';
+import { Meta, moduleMetadata, StoryObj } from '@storybook/angular';
 
 const source = (code: string) => ({
     docs: {
diff --git a/packages/primitives/select/__tests__/select-attributes.spec.ts b/packages/primitives/select/__tests__/select-attributes.spec.ts
index 8256050be..83f1b1d4e 100644
--- a/packages/primitives/select/__tests__/select-attributes.spec.ts
+++ b/packages/primitives/select/__tests__/select-attributes.spec.ts
@@ -1,17 +1,17 @@
+import { _importsSelect } from '../index';
+import { RdxSelectRoot } from '../src/select-root';
 import { ChangeDetectionStrategy, Component, signal } from '@angular/core';
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { form, FormField } from '@angular/forms/signals';
 import { By } from '@angular/platform-browser';
 import { RdxFieldRoot } from '@radix-ng/primitives/field';
 import { beforeEach, describe, expect, it } from 'vitest';
-import { _importsSelect } from '../index';
-import { RdxSelectRoot } from '../src/select-root';
 
 @Component({
     changeDetection: ChangeDetectionStrategy.Eager,
     imports: [_importsSelect],
     template: `
-        <div [(value)]="value" [(open)]="open" [modal]="modal()" rdxSelectRoot>
+        <div rdxSelectRoot [modal]="modal()" [(value)]="value" [(open)]="open">
             <button rdxSelectTrigger>
                 <span rdxSelectValue placeholder="Select…"></span>
             </button>
@@ -19,7 +19,7 @@ import { RdxSelectRoot } from '../src/select-root';
                 <div rdxSelectPopup>
                     <div rdxSelectList>
                         @for (fruit of fruits; track fruit) {
-                            <div [value]="fruit" rdxSelectItem>
+                            <div rdxSelectItem [value]="fruit">
                                 <span rdxSelectItemText>{{ fruit }}</span>
                             </div>
                         }
@@ -40,7 +40,7 @@ class Host {
     changeDetection: ChangeDetectionStrategy.Eager,
     imports: [_importsSelect, RdxFieldRoot],
     template: `
-        <div [invalid]="invalid()" [required]="required()" rdxFieldRoot>
+        <div rdxFieldRoot [invalid]="invalid()" [required]="required()">
             <button rdxSelectTrigger rdxSelectRoot>
                 <span rdxSelectValue placeholder="Select…"></span>
             </button>
@@ -161,12 +161,12 @@ describe('Select Field integration on the trigger', () => {
     imports: [_importsSelect],
     template: `
         <div
-            [(value)]="value"
-            [(open)]="open"
+            rdxSelectRoot
             [invalid]="invalid()"
             [errors]="errors()"
             [dirty]="dirty()"
-            rdxSelectRoot
+            [(value)]="value"
+            [(open)]="open"
         >
             <button rdxSelectTrigger>
                 <span rdxSelectValue placeholder="Select…"></span>
@@ -175,7 +175,7 @@ describe('Select Field integration on the trigger', () => {
                 <div rdxSelectPopup>
                     <div rdxSelectList>
                         @for (fruit of fruits; track fruit) {
-                            <div [value]="fruit" rdxSelectItem>
+                            <div rdxSelectItem [value]="fruit">
                                 <span rdxSelectItemText>{{ fruit }}</span>
                             </div>
                         }
@@ -259,7 +259,7 @@ describe('Select validation state', () => {
     changeDetection: ChangeDetectionStrategy.Eager,
     imports: [FormField, _importsSelect],
     template: `
-        <div [formField]="city" rdxSelectRoot>
+        <div rdxSelectRoot [formField]="city">
             <button rdxSelectTrigger>
                 <span rdxSelectValue placeholder="Select…"></span>
             </button>
@@ -267,7 +267,7 @@ describe('Select validation state', () => {
                 <div rdxSelectPopup>
                     <div rdxSelectList>
                         @for (fruit of fruits; track fruit) {
-                            <div [value]="fruit" rdxSelectItem>
+                            <div rdxSelectItem [value]="fruit">
                                 <span rdxSelectItemText>{{ fruit }}</span>
                             </div>
                         }
diff --git a/packages/primitives/select/__tests__/select-comparator.spec.ts b/packages/primitives/select/__tests__/select-comparator.spec.ts
index e89fef99a..baffc79c4 100644
--- a/packages/primitives/select/__tests__/select-comparator.spec.ts
+++ b/packages/primitives/select/__tests__/select-comparator.spec.ts
@@ -1,7 +1,7 @@
+import { _importsSelect } from '../index';
 import { ChangeDetectionStrategy, Component, signal } from '@angular/core';
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { beforeEach, describe, expect, it } from 'vitest';
-import { _importsSelect } from '../index';
 
 interface Fruit {
     id: number;
@@ -12,7 +12,7 @@ interface Fruit {
     changeDetection: ChangeDetectionStrategy.Eager,
     imports: [_importsSelect],
     template: `
-        <div [(value)]="value" [(open)]="open" [isItemEqualToValue]="'id'" [itemToStringLabel]="label" rdxSelectRoot>
+        <div rdxSelectRoot [isItemEqualToValue]="'id'" [itemToStringLabel]="label" [(value)]="value" [(open)]="open">
             <button rdxSelectTrigger>
                 <span #v="rdxSelectedValue" rdxSelectValue placeholder="Select…">{{ v.slotText() }}</span>
             </button>
@@ -20,7 +20,7 @@ interface Fruit {
                 <div rdxSelectPopup>
                     <div rdxSelectList>
                         @for (fruit of fruits; track fruit.id) {
-                            <div [value]="fruit" rdxSelectItem>
+                            <div rdxSelectItem [value]="fruit">
                                 <span rdxSelectItemText>{{ fruit.name }}</span>
                             </div>
                         }
diff --git a/packages/primitives/select/__tests__/select-composite-list.spec.ts b/packages/primitives/select/__tests__/select-composite-list.spec.ts
index f6c428b85..778c7ba83 100644
--- a/packages/primitives/select/__tests__/select-composite-list.spec.ts
+++ b/packages/primitives/select/__tests__/select-composite-list.spec.ts
@@ -1,11 +1,11 @@
-import { ChangeDetectionStrategy, Component, signal } from '@angular/core';
-import { ComponentFixture, TestBed } from '@angular/core/testing';
-import { By } from '@angular/platform-browser';
-import { RdxCompositeList, RdxCompositeMetadata } from '@radix-ng/primitives/composite';
 import { _importsSelect } from '../index';
 import { RdxSelectPopup } from '../src/select-popup';
 import { RdxSelectRoot } from '../src/select-root';
 import { RdxSelectItemMetadata } from '../src/utils';
+import { ChangeDetectionStrategy, Component, signal } from '@angular/core';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { By } from '@angular/platform-browser';
+import { RdxCompositeList, RdxCompositeMetadata } from '@radix-ng/primitives/composite';
 
 interface Fruit {
     label: string;
@@ -17,7 +17,7 @@ interface Fruit {
     changeDetection: ChangeDetectionStrategy.Eager,
     imports: [_importsSelect],
     template: `
-        <div [(value)]="value" rdxSelectRoot>
+        <div rdxSelectRoot [(value)]="value">
             <button rdxSelectTrigger>
                 <span rdxSelectValue placeholder="Select…"></span>
             </button>
@@ -26,7 +26,7 @@ interface Fruit {
                 <div rdxSelectPopup>
                     <div rdxSelectList>
                         @for (fruit of fruits(); track fruit.value) {
-                            <div [value]="fruit.value" [disabled]="fruit.disabled" rdxSelectItem>
+                            <div rdxSelectItem [value]="fruit.value" [disabled]="fruit.disabled">
                                 <span rdxSelectItemText>{{ fruit.label }}</span>
                             </div>
                         }
diff --git a/packages/primitives/select/__tests__/select-focus-manager.spec.ts b/packages/primitives/select/__tests__/select-focus-manager.spec.ts
index facb4ae64..04cf76330 100644
--- a/packages/primitives/select/__tests__/select-focus-manager.spec.ts
+++ b/packages/primitives/select/__tests__/select-focus-manager.spec.ts
@@ -1,9 +1,9 @@
 // @vitest-environment jsdom
+import { RdxReturnFocus } from '../../floating-focus-manager';
+import { _importsSelect } from '../index';
 import { ChangeDetectionStrategy, Component, signal } from '@angular/core';
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { beforeEach, describe, expect, it } from 'vitest';
-import { RdxReturnFocus } from '../../floating-focus-manager';
-import { _importsSelect } from '../index';
 
 const flush = (): Promise<void> => new Promise((resolve) => requestAnimationFrame(() => setTimeout(resolve, 0)));
 
@@ -12,10 +12,10 @@ const flush = (): Promise<void> => new Promise((resolve) => requestAnimationFram
     imports: [_importsSelect],
     template: `
         <input data-testid="before" />
-        <div [(value)]="value" [(open)]="open" rdxSelectRoot>
+        <div rdxSelectRoot [(value)]="value" [(open)]="open">
             <button rdxSelectTrigger>Open</button>
             <div *rdxSelectPortal rdxSelectPositioner>
-                <div [finalFocus]="finalFocus()" rdxSelectPopup>
+                <div rdxSelectPopup [finalFocus]="finalFocus()">
                     <div rdxSelectList>
                         <div value="apple" rdxSelectItem>
                             <span rdxSelectItemText>Apple</span>
diff --git a/packages/primitives/select/__tests__/select-navigation.spec.ts b/packages/primitives/select/__tests__/select-navigation.spec.ts
index 629291307..5abe77cf3 100644
--- a/packages/primitives/select/__tests__/select-navigation.spec.ts
+++ b/packages/primitives/select/__tests__/select-navigation.spec.ts
@@ -1,7 +1,7 @@
+import { _importsSelect } from '../index';
 import { ChangeDetectionStrategy, Component, signal } from '@angular/core';
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { beforeEach, describe, expect, it } from 'vitest';
-import { _importsSelect } from '../index';
 
 interface Fruit {
     label: string;
@@ -13,7 +13,7 @@ interface Fruit {
     changeDetection: ChangeDetectionStrategy.Eager,
     imports: [_importsSelect],
     template: `
-        <div [(value)]="value" [(open)]="open" rdxSelectRoot>
+        <div rdxSelectRoot [(value)]="value" [(open)]="open">
             <button rdxSelectTrigger>
                 <span rdxSelectValue placeholder="Select…"></span>
             </button>
@@ -21,7 +21,7 @@ interface Fruit {
                 <div rdxSelectPopup>
                     <div rdxSelectList>
                         @for (fruit of fruits; track fruit.value) {
-                            <div [value]="fruit.value" [disabled]="fruit.disabled" rdxSelectItem>
+                            <div rdxSelectItem [value]="fruit.value" [disabled]="fruit.disabled">
                                 <span rdxSelectItemText>{{ fruit.label }}</span>
                             </div>
                         }
diff --git a/packages/primitives/select/__tests__/select-open-change.spec.ts b/packages/primitives/select/__tests__/select-open-change.spec.ts
index e17473e16..5e5eee6de 100644
--- a/packages/primitives/select/__tests__/select-open-change.spec.ts
+++ b/packages/primitives/select/__tests__/select-open-change.spec.ts
@@ -1,22 +1,22 @@
-import { ChangeDetectionStrategy, Component, signal } from '@angular/core';
-import { ComponentFixture, TestBed } from '@angular/core/testing';
-import { By } from '@angular/platform-browser';
-import { afterEach, beforeEach, describe, expect, it } from 'vitest';
 import { _importsSelect } from '../index';
 import { RdxSelectItemAlignedPosition } from '../src/select-item-aligned-position';
 import { RdxSelectItemAlignedPositionContent } from '../src/select-item-aligned-position-content';
 import { RdxSelectOpenChangeEvent, RdxSelectRoot, RdxSelectValueChangeEvent } from '../src/select-root';
+import { ChangeDetectionStrategy, Component, signal } from '@angular/core';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { By } from '@angular/platform-browser';
+import { afterEach, beforeEach, describe, expect, it } from 'vitest';
 
 @Component({
     changeDetection: ChangeDetectionStrategy.Eager,
     imports: [_importsSelect],
     template: `
         <div
+            rdxSelectRoot
             [(open)]="open"
             [(value)]="value"
             (onOpenChange)="handleOpenChange($event)"
             (onValueChange)="handleValueChange($event)"
-            rdxSelectRoot
         >
             <button rdxSelectTrigger>
                 <span rdxSelectValue placeholder="Select…"></span>
@@ -26,7 +26,7 @@ import { RdxSelectOpenChangeEvent, RdxSelectRoot, RdxSelectValueChangeEvent } fr
                 <div rdxSelectPopup>
                     <div rdxSelectList>
                         @for (fruit of fruits; track fruit) {
-                            <div [value]="fruit" rdxSelectItem>
+                            <div rdxSelectItem [value]="fruit">
                                 <span rdxSelectItemText>{{ fruit }}</span>
                             </div>
                         }
@@ -66,7 +66,7 @@ class OpenChangeHost {
     changeDetection: ChangeDetectionStrategy.Eager,
     imports: [_importsSelect, RdxSelectItemAlignedPosition, RdxSelectItemAlignedPositionContent],
     template: `
-        <div [(open)]="open" (onOpenChange)="events.push($event)" rdxSelectRoot>
+        <div rdxSelectRoot [(open)]="open" (onOpenChange)="events.push($event)">
             <button rdxSelectTrigger>
                 <span rdxSelectValue placeholder="Select…"></span>
             </button>
@@ -76,7 +76,7 @@ class OpenChangeHost {
                     <div rdxSelectItemAlignedPositionContent>
                         <div rdxSelectList>
                             @for (fruit of fruits; track fruit) {
-                                <div [value]="fruit" rdxSelectItem>
+                                <div rdxSelectItem [value]="fruit">
                                     <span rdxSelectItemText>{{ fruit }}</span>
                                 </div>
                             }
diff --git a/packages/primitives/select/src/select-backdrop.ts b/packages/primitives/select/src/select-backdrop.ts
index df118e909..4f0bf04a3 100644
--- a/packages/primitives/select/src/select-backdrop.ts
+++ b/packages/primitives/select/src/select-backdrop.ts
@@ -1,5 +1,5 @@
-import { Directive } from '@angular/core';
 import { injectSelectRootContext } from './select-root';
+import { Directive } from '@angular/core';
 
 /**
  * An overlay rendered beneath the popup in `modal` mode. Place it inside the portal/presence; style
diff --git a/packages/primitives/select/src/select-item-aligned-position.ts b/packages/primitives/select/src/select-item-aligned-position.ts
index b0616c865..aef4341de 100644
--- a/packages/primitives/select/src/select-item-aligned-position.ts
+++ b/packages/primitives/select/src/select-item-aligned-position.ts
@@ -1,3 +1,7 @@
+import { RdxSelectItemAlignedPositionContent } from './select-item-aligned-position-content';
+import { RDX_SELECT_POSITIONER_TOKEN, RdxPositionerImpl, RdxSelectPopup } from './select-popup';
+import { injectSelectRootContext } from './select-root';
+import { CONTENT_MARGIN } from './utils';
 import {
     afterNextRender,
     computed,
@@ -11,10 +15,6 @@ import {
     signal
 } from '@angular/core';
 import { clamp, resizeEffect } from '@radix-ng/primitives/core';
-import { RdxSelectItemAlignedPositionContent } from './select-item-aligned-position-content';
-import { RDX_SELECT_POSITIONER_TOKEN, RdxPositionerImpl, RdxSelectPopup } from './select-popup';
-import { injectSelectRootContext } from './select-root';
-import { CONTENT_MARGIN } from './utils';
 
 @Directive({
     selector: '[rdxSelectItemAlignedPosition]',
diff --git a/packages/primitives/select/src/select-item-indicator.ts b/packages/primitives/select/src/select-item-indicator.ts
index b6a7ad79b..9e43af12d 100644
--- a/packages/primitives/select/src/select-item-indicator.ts
+++ b/packages/primitives/select/src/select-item-indicator.ts
@@ -1,5 +1,5 @@
-import { Directive } from '@angular/core';
 import { injectSelectItemContext } from './select-item';
+import { Directive } from '@angular/core';
 
 @Directive({
     selector: '[rdxSelectItemIndicator]',
diff --git a/packages/primitives/select/src/select-item-text.ts b/packages/primitives/select/src/select-item-text.ts
index c2ff952e3..1db8cee70 100644
--- a/packages/primitives/select/src/select-item-text.ts
+++ b/packages/primitives/select/src/select-item-text.ts
@@ -1,7 +1,7 @@
-import { afterNextRender, computed, DestroyRef, Directive, ElementRef, inject } from '@angular/core';
 import { injectSelectItemContext } from './select-item';
 import { injectSelectPopupContext } from './select-popup';
 import { injectSelectRootContext } from './select-root';
+import { afterNextRender, computed, DestroyRef, Directive, ElementRef, inject } from '@angular/core';
 
 @Directive({
     selector: '[rdxSelectItemText]',
diff --git a/packages/primitives/select/src/select-item.ts b/packages/primitives/select/src/select-item.ts
index 73767465c..d3b4c4feb 100644
--- a/packages/primitives/select/src/select-item.ts
+++ b/packages/primitives/select/src/select-item.ts
@@ -1,3 +1,6 @@
+import { injectSelectPopupContext } from './select-popup';
+import { injectSelectRootContext } from './select-root';
+import { SELECTION_KEYS, valueComparator } from './utils';
 import {
     afterNextRender,
     booleanAttribute,
@@ -12,9 +15,6 @@ import {
 } from '@angular/core';
 import { RdxCompositeListItem } from '@radix-ng/primitives/composite';
 import { AcceptableValue, createContext, handleAndDispatchCustomEvent, injectId } from '@radix-ng/primitives/core';
-import { injectSelectPopupContext } from './select-popup';
-import { injectSelectRootContext } from './select-root';
-import { SELECTION_KEYS, valueComparator } from './utils';
 
 export interface RdxSelectItemContext {
     value: Signal<AcceptableValue | undefined>;
diff --git a/packages/primitives/select/src/select-list.ts b/packages/primitives/select/src/select-list.ts
index 874747b84..94914c8e3 100644
--- a/packages/primitives/select/src/select-list.ts
+++ b/packages/primitives/select/src/select-list.ts
@@ -1,5 +1,5 @@
-import { afterNextRender, Directive, ElementRef, inject, signal } from '@angular/core';
 import { injectSelectPopupContext } from './select-popup';
+import { afterNextRender, Directive, ElementRef, inject, signal } from '@angular/core';
 
 @Directive({
     selector: '[rdxSelectList]',
diff --git a/packages/primitives/select/src/select-popup.ts b/packages/primitives/select/src/select-popup.ts
index dda7e87f4..49f82ff18 100644
--- a/packages/primitives/select/src/select-popup.ts
+++ b/packages/primitives/select/src/select-popup.ts
@@ -1,3 +1,6 @@
+import { injectSelectRootContext } from './select-root';
+import { getNextMatch } from './useTypeahead';
+import { RdxSelectItemMetadata, SELECTION_KEYS, valueComparator } from './utils';
 import {
     afterNextRender,
     computed,
@@ -10,8 +13,8 @@ import {
     Injector,
     output,
     OutputRef,
-    signal,
-    Signal
+    Signal,
+    signal
 } from '@angular/core';
 import { RdxCompositeItemRegistration, RdxCompositeList } from '@radix-ng/primitives/composite';
 import {
@@ -29,9 +32,6 @@ import {
     RdxFloatingFocusManager
 } from '@radix-ng/primitives/floating-focus-manager';
 import { RdxPopperContent } from '@radix-ng/primitives/popper';
-import { injectSelectRootContext } from './select-root';
-import { getNextMatch } from './useTypeahead';
-import { RdxSelectItemMetadata, SELECTION_KEYS, valueComparator } from './utils';
 
 type RdxSelectCompositeItem = RdxCompositeItemRegistration<RdxSelectItemMetadata>;
 
diff --git a/packages/primitives/select/src/select-portal.ts b/packages/primitives/select/src/select-portal.ts
index e6c67e1c7..dace2242b 100644
--- a/packages/primitives/select/src/select-portal.ts
+++ b/packages/primitives/select/src/select-portal.ts
@@ -1,8 +1,8 @@
+import { injectSelectRootContext } from './select-root';
 import { Directive, isDevMode } from '@angular/core';
 import { rdxDevError } from '@radix-ng/primitives/core';
 import { RdxPortalPresence } from '@radix-ng/primitives/portal';
 import { provideRdxPresenceContext } from '@radix-ng/primitives/presence';
-import { injectSelectRootContext } from './select-root';
 
 /**
  * Structural directive that teleports the select popup into a container (default `document.body`)
diff --git a/packages/primitives/select/src/select-positioner.ts b/packages/primitives/select/src/select-positioner.ts
index 123636983..447c8fc1b 100644
--- a/packages/primitives/select/src/select-positioner.ts
+++ b/packages/primitives/select/src/select-positioner.ts
@@ -1,3 +1,5 @@
+import { RDX_SELECT_POSITIONER_TOKEN, RdxPositionerImpl } from './select-popup';
+import { injectSelectRootContext } from './select-root';
 import { afterNextRender, Directive, ElementRef, forwardRef, inject, Injector } from '@angular/core';
 import { setupInternalBackdrop } from '@radix-ng/primitives/core';
 import {
@@ -6,8 +8,6 @@ import {
     provideRdxPopperContentWrapper,
     RdxPopperContentWrapper
 } from '@radix-ng/primitives/popper';
-import { RDX_SELECT_POSITIONER_TOKEN, RdxPositionerImpl } from './select-popup';
-import { injectSelectRootContext } from './select-root';
 
 /**
  * Positions the select popup against the trigger using the popper engine.
diff --git a/packages/primitives/select/src/select-root.ts b/packages/primitives/select/src/select-root.ts
index f694c9ecb..0ed6197d2 100644
--- a/packages/primitives/select/src/select-root.ts
+++ b/packages/primitives/select/src/select-root.ts
@@ -1,3 +1,4 @@
+import { compare, valueComparator } from './utils';
 import {
     booleanAttribute,
     computed,
@@ -36,7 +37,6 @@ import {
 import { injectDirection } from '@radix-ng/primitives/direction-provider';
 import { getInteractionTypeFromEvent, RdxInteractionType } from '@radix-ng/primitives/floating-focus-manager';
 import { RdxPopper } from '@radix-ng/primitives/popper';
-import { compare, valueComparator } from './utils';
 
 export interface SelectOption {
     value: AcceptableValue | undefined;
diff --git a/packages/primitives/select/src/select-scroll-button-base.ts b/packages/primitives/select/src/select-scroll-button-base.ts
index 0c559ed47..7aadf56b5 100644
--- a/packages/primitives/select/src/select-scroll-button-base.ts
+++ b/packages/primitives/select/src/select-scroll-button-base.ts
@@ -1,5 +1,5 @@
-import { DestroyRef, Directive, effect, inject, output, signal } from '@angular/core';
 import { injectSelectPopupContext } from './select-popup';
+import { DestroyRef, Directive, effect, inject, output, signal } from '@angular/core';
 
 @Directive({
     selector: '[rdxSelectScrollButtonBase]',
diff --git a/packages/primitives/select/src/select-scroll-down-button.ts b/packages/primitives/select/src/select-scroll-down-button.ts
index 341d7fab0..f243744a1 100644
--- a/packages/primitives/select/src/select-scroll-down-button.ts
+++ b/packages/primitives/select/src/select-scroll-down-button.ts
@@ -1,6 +1,6 @@
-import { Directive, effect, inject, signal } from '@angular/core';
 import { injectSelectPopupContext } from './select-popup';
 import { RdxSelectScrollButtonBase } from './select-scroll-button-base';
+import { Directive, effect, inject, signal } from '@angular/core';
 
 @Directive({
     selector: '[rdxSelectScrollDownButton]',
diff --git a/packages/primitives/select/src/select-scroll-up-button.ts b/packages/primitives/select/src/select-scroll-up-button.ts
index e42668ee3..3cfd9ae7d 100644
--- a/packages/primitives/select/src/select-scroll-up-button.ts
+++ b/packages/primitives/select/src/select-scroll-up-button.ts
@@ -1,6 +1,6 @@
-import { Directive, effect, inject, signal } from '@angular/core';
 import { injectSelectPopupContext } from './select-popup';
 import { RdxSelectScrollButtonBase } from './select-scroll-button-base';
+import { Directive, effect, inject, signal } from '@angular/core';
 
 @Directive({
     selector: '[rdxSelectScrollUpButton]',
diff --git a/packages/primitives/select/src/select-trigger.ts b/packages/primitives/select/src/select-trigger.ts
index 889c66bcf..1aad8942c 100644
--- a/packages/primitives/select/src/select-trigger.ts
+++ b/packages/primitives/select/src/select-trigger.ts
@@ -1,10 +1,10 @@
+import { injectSelectRootContext } from './select-root';
+import { OPEN_KEYS } from './utils';
 import { afterNextRender, booleanAttribute, computed, Directive, ElementRef, inject, input } from '@angular/core';
 import { injectId } from '@radix-ng/primitives/core';
 import { injectFieldRootContext } from '@radix-ng/primitives/field';
 import { createRdxTriggerInteraction } from '@radix-ng/primitives/floating-focus-manager';
 import { RdxPopperAnchor } from '@radix-ng/primitives/popper';
-import { injectSelectRootContext } from './select-root';
-import { OPEN_KEYS } from './utils';
 
 const attr = (value: boolean) => (value ? '' : undefined);
 
diff --git a/packages/primitives/select/src/select-value.ts b/packages/primitives/select/src/select-value.ts
index 2b2ecb4cf..4ef978d78 100644
--- a/packages/primitives/select/src/select-value.ts
+++ b/packages/primitives/select/src/select-value.ts
@@ -1,7 +1,7 @@
-import { afterNextRender, computed, Directive, ElementRef, inject, input } from '@angular/core';
-import { AcceptableValue } from '@radix-ng/primitives/core';
 import { injectSelectRootContext } from './select-root';
 import { valueComparator } from './utils';
+import { afterNextRender, computed, Directive, ElementRef, inject, input } from '@angular/core';
+import { AcceptableValue } from '@radix-ng/primitives/core';
 
 @Directive({
     selector: 'span[rdxSelectValue]',
diff --git a/packages/primitives/select/stories/select-aligned-position-with-scroll.ts b/packages/primitives/select/stories/select-aligned-position-with-scroll.ts
index 38881af2c..807f47a18 100644
--- a/packages/primitives/select/stories/select-aligned-position-with-scroll.ts
+++ b/packages/primitives/select/stories/select-aligned-position-with-scroll.ts
@@ -1,5 +1,3 @@
-import { ChangeDetectionStrategy, Component, signal } from '@angular/core';
-import { LucideCheck, LucideChevronDown, LucideChevronUp } from '@lucide/angular';
 import { RdxSelectGroup } from '../src/select-group';
 import { RdxSelectGroupLabel } from '../src/select-group-label';
 import { RdxSelectItem } from '../src/select-item';
@@ -15,6 +13,8 @@ import { RdxSelectScrollDownButton } from '../src/select-scroll-down-button';
 import { RdxSelectScrollUpButton } from '../src/select-scroll-up-button';
 import { RdxSelectTrigger } from '../src/select-trigger';
 import { RdxSelectValue } from '../src/select-value';
+import { ChangeDetectionStrategy, Component, signal } from '@angular/core';
+import { LucideCheck, LucideChevronDown, LucideChevronUp } from '@lucide/angular';
 
 @Component({
     changeDetection: ChangeDetectionStrategy.Eager,
@@ -40,7 +40,7 @@ import { RdxSelectValue } from '../src/select-value';
         RdxSelectScrollUpButton
     ],
     template: `
-        <ng-container [value]="fruit()" rdxSelectRoot>
+        <ng-container rdxSelectRoot [value]="fruit()">
             <button
                 class="border-border bg-background text-foreground data-[placeholder]:text-muted-foreground hover:bg-muted focus-visible:ring-ring focus-visible:ring-offset-background inline-flex h-9 min-w-40 items-center justify-between gap-2 rounded-md border px-3 text-sm shadow-sm outline-none focus-visible:ring-2 focus-visible:ring-offset-2"
                 aria-label="Customise options"
@@ -70,8 +70,8 @@ import { RdxSelectValue } from '../src/select-value';
                                 @for (option of options; track option) {
                                     <div
                                         class="text-popover-foreground data-[disabled]:text-muted-foreground data-[highlighted]:bg-primary data-[highlighted]:text-primary-foreground relative flex h-7 cursor-default items-center rounded-sm pr-8 pl-6 text-sm leading-none outline-none select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50"
-                                        [value]="option"
                                         rdxSelectItem
+                                        [value]="option"
                                     >
                                         <span
                                             class="absolute left-0 inline-flex w-6 items-center justify-center"
@@ -91,8 +91,8 @@ import { RdxSelectValue } from '../src/select-value';
                                 @for (vegetable of vegetables; track vegetable) {
                                     <div
                                         class="text-popover-foreground data-[disabled]:text-muted-foreground data-[highlighted]:bg-primary data-[highlighted]:text-primary-foreground relative flex h-7 cursor-default items-center rounded-sm pr-8 pl-6 text-sm leading-none outline-none select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50"
-                                        [value]="vegetable"
                                         rdxSelectItem
+                                        [value]="vegetable"
                                     >
                                         <span
                                             class="absolute left-0 inline-flex w-6 items-center justify-center"
diff --git a/packages/primitives/select/stories/select-aligned-position.ts b/packages/primitives/select/stories/select-aligned-position.ts
index a180b76e9..28e0fc887 100644
--- a/packages/primitives/select/stories/select-aligned-position.ts
+++ b/packages/primitives/select/stories/select-aligned-position.ts
@@ -1,5 +1,3 @@
-import { booleanAttribute, ChangeDetectionStrategy, Component, input, signal } from '@angular/core';
-import { LucideCheck, LucideChevronDown } from '@lucide/angular';
 import { RdxSelectGroup } from '../src/select-group';
 import { RdxSelectGroupLabel } from '../src/select-group-label';
 import { RdxSelectItem } from '../src/select-item';
@@ -13,6 +11,8 @@ import { RdxSelectPortal } from '../src/select-portal';
 import { RdxSelectRoot } from '../src/select-root';
 import { RdxSelectTrigger } from '../src/select-trigger';
 import { RdxSelectValue } from '../src/select-value';
+import { booleanAttribute, ChangeDetectionStrategy, Component, input, signal } from '@angular/core';
+import { LucideCheck, LucideChevronDown } from '@lucide/angular';
 
 @Component({
     changeDetection: ChangeDetectionStrategy.Eager,
@@ -35,7 +35,7 @@ import { RdxSelectValue } from '../src/select-value';
         RdxSelectItemIndicator
     ],
     template: `
-        <ng-container [value]="fruit()" [modal]="modal()" rdxSelectRoot>
+        <ng-container rdxSelectRoot [value]="fruit()" [modal]="modal()">
             <button
                 class="border-border bg-background text-foreground data-[placeholder]:text-muted-foreground hover:bg-muted focus-visible:ring-ring focus-visible:ring-offset-background inline-flex h-9 min-w-40 items-center justify-between gap-2 rounded-md border px-3 text-sm shadow-sm outline-none focus-visible:ring-2 focus-visible:ring-offset-2"
                 aria-label="Customise options"
@@ -59,8 +59,8 @@ import { RdxSelectValue } from '../src/select-value';
                                 @for (option of options; track option) {
                                     <div
                                         class="text-popover-foreground data-[disabled]:text-muted-foreground data-[highlighted]:bg-primary data-[highlighted]:text-primary-foreground relative flex h-7 cursor-default items-center rounded-sm pr-8 pl-6 text-sm leading-none outline-none select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50"
-                                        [value]="option"
                                         rdxSelectItem
+                                        [value]="option"
                                     >
                                         <span
                                             class="absolute left-0 inline-flex w-6 items-center justify-center"
@@ -80,8 +80,8 @@ import { RdxSelectValue } from '../src/select-value';
                                 @for (vegetable of vegetables; track vegetable) {
                                     <div
                                         class="text-popover-foreground data-[disabled]:text-muted-foreground data-[highlighted]:bg-primary data-[highlighted]:text-primary-foreground relative flex h-7 cursor-default items-center rounded-sm pr-8 pl-6 text-sm leading-none outline-none select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50"
-                                        [value]="vegetable"
                                         rdxSelectItem
+                                        [value]="vegetable"
                                     >
                                         <span
                                             class="absolute left-0 inline-flex w-6 items-center justify-center"
diff --git a/packages/primitives/select/stories/select-default.ts b/packages/primitives/select/stories/select-default.ts
index a07039583..53163f4e5 100644
--- a/packages/primitives/select/stories/select-default.ts
+++ b/packages/primitives/select/stories/select-default.ts
@@ -1,6 +1,3 @@
-import { ChangeDetectionStrategy, Component, input } from '@angular/core';
-import { LucideCheck, LucideChevronDown } from '@lucide/angular';
-import { Align } from '@radix-ng/primitives/popper';
 import { RdxSelectGroup } from '../src/select-group';
 import { RdxSelectGroupLabel } from '../src/select-group-label';
 import { RdxSelectItem } from '../src/select-item';
@@ -13,6 +10,9 @@ import { RdxSelectPositioner } from '../src/select-positioner';
 import { RdxSelectRoot } from '../src/select-root';
 import { RdxSelectTrigger } from '../src/select-trigger';
 import { RdxSelectValue } from '../src/select-value';
+import { ChangeDetectionStrategy, Component, input } from '@angular/core';
+import { LucideCheck, LucideChevronDown } from '@lucide/angular';
+import { Align } from '@radix-ng/primitives/popper';
 
 @Component({
     changeDetection: ChangeDetectionStrategy.Eager,
@@ -46,7 +46,7 @@ import { RdxSelectValue } from '../src/select-value';
                 <svg lucideChevronDown size="16" />
             </button>
 
-            <div class="z-[100]" *rdxSelectPortal [sideOffset]="sideOffset()" [align]="align()" rdxSelectPositioner>
+            <div *rdxSelectPortal class="z-[100]" rdxSelectPositioner [sideOffset]="sideOffset()" [align]="align()">
                 <div
                     class="border-border bg-popover text-popover-foreground min-w-40 rounded-lg border shadow-md will-change-[opacity,transform]"
                     rdxSelectPopup
@@ -57,8 +57,8 @@ import { RdxSelectValue } from '../src/select-value';
                             @for (option of options; track option) {
                                 <div
                                     class="text-popover-foreground data-[disabled]:text-muted-foreground data-[highlighted]:bg-primary data-[highlighted]:text-primary-foreground relative flex h-7 cursor-default items-center rounded-sm pr-8 pl-6 text-sm leading-none outline-none select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50"
-                                    [value]="option"
                                     rdxSelectItem
+                                    [value]="option"
                                 >
                                     <span
                                         class="absolute left-0 inline-flex w-6 items-center justify-center"
@@ -76,8 +76,8 @@ import { RdxSelectValue } from '../src/select-value';
                             @for (vegetable of vegetables; track vegetable) {
                                 <div
                                     class="text-popover-foreground data-[disabled]:text-muted-foreground data-[highlighted]:bg-primary data-[highlighted]:text-primary-foreground relative flex h-7 cursor-default items-center rounded-sm pr-8 pl-6 text-sm leading-none outline-none select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50"
-                                    [value]="vegetable"
                                     rdxSelectItem
+                                    [value]="vegetable"
                                 >
                                     <span
                                         class="absolute left-0 inline-flex w-6 items-center justify-center"
diff --git a/packages/primitives/select/stories/select-events.ts b/packages/primitives/select/stories/select-events.ts
index a75a68c9a..54b6f8948 100644
--- a/packages/primitives/select/stories/select-events.ts
+++ b/packages/primitives/select/stories/select-events.ts
@@ -1,5 +1,3 @@
-import { ChangeDetectionStrategy, Component, signal } from '@angular/core';
-import { LucideCheck, LucideChevronDown } from '@lucide/angular';
 import {
     RdxSelectItem,
     RdxSelectItemIndicator,
@@ -14,6 +12,8 @@ import {
     RdxSelectValue,
     RdxSelectValueChangeEvent
 } from '../index';
+import { ChangeDetectionStrategy, Component, signal } from '@angular/core';
+import { LucideCheck, LucideChevronDown } from '@lucide/angular';
 
 interface SelectEventLogEntry {
     label: string;
@@ -45,11 +45,11 @@ interface SelectEventLogEntry {
                 <div class="flex flex-col gap-2">
                     <ng-container
                         #root="rdxSelectRoot"
+                        rdxSelectRoot
                         [(open)]="open"
                         [(value)]="value"
                         (onOpenChange)="handleOpenChange($event)"
                         (onValueChange)="handleValueChange($event)"
-                        rdxSelectRoot
                     >
                         <button
                             class="border-border bg-background text-foreground data-[placeholder]:text-muted-foreground hover:bg-muted focus-visible:ring-ring focus-visible:ring-offset-background inline-flex h-9 w-full items-center justify-between gap-2 rounded-md border px-3 text-sm shadow-sm outline-none focus-visible:ring-2 focus-visible:ring-offset-2"
@@ -62,7 +62,7 @@ interface SelectEventLogEntry {
                             <svg lucideChevronDown size="16" />
                         </button>
 
-                        <div class="z-[100]" *rdxSelectPortal sideOffset="6" rdxSelectPositioner>
+                        <div *rdxSelectPortal class="z-[100]" sideOffset="6" rdxSelectPositioner>
                             <div
                                 class="border-border bg-popover text-popover-foreground min-w-48 rounded-lg border p-1 shadow-md"
                                 rdxSelectPopup
@@ -71,8 +71,8 @@ interface SelectEventLogEntry {
                                     @for (option of options; track option.value) {
                                         <div
                                             class="data-[highlighted]:bg-primary data-[highlighted]:text-primary-foreground relative flex h-8 cursor-default items-center rounded-sm pr-8 pl-7 text-sm outline-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50"
-                                            [value]="option.value"
                                             rdxSelectItem
+                                            [value]="option.value"
                                         >
                                             <span
                                                 class="absolute left-2 inline-flex size-4 items-center justify-center"
@@ -90,8 +90,8 @@ interface SelectEventLogEntry {
                         <div class="grid gap-2 pt-1">
                             <button
                                 class="border-border bg-background text-foreground hover:bg-muted inline-flex h-7 items-center justify-between rounded-md border px-3 text-xs"
-                                (click)="cancelNextOpen.update((value) => !value)"
                                 type="button"
+                                (click)="cancelNextOpen.update((value) => !value)"
                             >
                                 <span>Cancel next open</span>
                                 <span class="text-muted-foreground">{{ cancelNextOpen() ? 'armed' : 'off' }}</span>
@@ -99,8 +99,8 @@ interface SelectEventLogEntry {
 
                             <button
                                 class="border-border bg-background text-foreground hover:bg-muted inline-flex h-7 items-center justify-between rounded-md border px-3 text-xs"
-                                (click)="cancelNextValue.update((value) => !value)"
                                 type="button"
+                                (click)="cancelNextValue.update((value) => !value)"
                             >
                                 <span>Cancel next value</span>
                                 <span class="text-muted-foreground">{{ cancelNextValue() ? 'armed' : 'off' }}</span>
@@ -130,8 +130,8 @@ interface SelectEventLogEntry {
                         </div>
                         <button
                             class="text-muted-foreground hover:text-foreground inline-flex h-7 items-center rounded-md px-2 text-xs"
-                            (click)="logs.set([])"
                             type="button"
+                            (click)="logs.set([])"
                         >
                             Clear
                         </button>
diff --git a/packages/primitives/select/stories/select-multiple.ts b/packages/primitives/select/stories/select-multiple.ts
index ebd3997e1..28ed0e6b1 100644
--- a/packages/primitives/select/stories/select-multiple.ts
+++ b/packages/primitives/select/stories/select-multiple.ts
@@ -1,5 +1,3 @@
-import { ChangeDetectionStrategy, Component, signal } from '@angular/core';
-import { LucideCheck, LucideChevronDown } from '@lucide/angular';
 import { RdxSelectGroup } from '../src/select-group';
 import { RdxSelectGroupLabel } from '../src/select-group-label';
 import { RdxSelectIcon } from '../src/select-icon';
@@ -14,6 +12,8 @@ import { RdxSelectRoot } from '../src/select-root';
 import { RdxSelectSeparator } from '../src/select-separator';
 import { RdxSelectTrigger } from '../src/select-trigger';
 import { RdxSelectValue } from '../src/select-value';
+import { ChangeDetectionStrategy, Component, signal } from '@angular/core';
+import { LucideCheck, LucideChevronDown } from '@lucide/angular';
 
 /**
  * Multiple selection: picks accumulate in the value array, `RdxSelectValue` joins their labels, and
@@ -42,7 +42,7 @@ import { RdxSelectValue } from '../src/select-value';
         RdxSelectItemIndicator
     ],
     template: `
-        <div [(value)]="value" multiple rdxSelectRoot>
+        <div multiple rdxSelectRoot [(value)]="value">
             <button
                 class="border-border bg-background text-foreground data-[placeholder]:text-muted-foreground hover:bg-muted focus-visible:ring-ring focus-visible:ring-offset-background inline-flex h-9 min-w-52 items-center justify-between gap-2 rounded-md border px-3 text-sm shadow-sm outline-none focus-visible:ring-2 focus-visible:ring-offset-2"
                 aria-label="Pick fruits"
@@ -54,7 +54,7 @@ import { RdxSelectValue } from '../src/select-value';
                 <svg lucideChevronDown size="16" rdxSelectIcon></svg>
             </button>
 
-            <div class="z-[100]" *rdxSelectPortal [sideOffset]="5" rdxSelectPositioner>
+            <div *rdxSelectPortal class="z-[100]" rdxSelectPositioner [sideOffset]="5">
                 <div
                     class="border-border bg-popover text-popover-foreground min-w-52 rounded-lg border p-1 shadow-md"
                     rdxSelectPopup
@@ -63,8 +63,8 @@ import { RdxSelectValue } from '../src/select-value';
                         <div class="text-muted-foreground px-6 text-xs leading-6" rdxSelectGroupLabel>Fruits</div>
                         <div rdxSelectGroup>
                             @for (fruit of fruits; track fruit) {
-                                <div [class]="itemClass" [value]="fruit" rdxSelectItem>
-                                    <span [class]="indicatorClass" rdxSelectItemIndicator>
+                                <div rdxSelectItem [class]="itemClass" [value]="fruit">
+                                    <span rdxSelectItemIndicator [class]="indicatorClass">
                                         <svg lucideCheck size="16"></svg>
                                     </span>
                                     <span rdxSelectItemText>{{ fruit }}</span>
@@ -75,8 +75,8 @@ import { RdxSelectValue } from '../src/select-value';
                         <div class="text-muted-foreground px-6 text-xs leading-6" rdxSelectGroupLabel>Berries</div>
                         <div rdxSelectGroup>
                             @for (berry of berries; track berry) {
-                                <div [class]="itemClass" [value]="berry" rdxSelectItem>
-                                    <span [class]="indicatorClass" rdxSelectItemIndicator>
+                                <div rdxSelectItem [class]="itemClass" [value]="berry">
+                                    <span rdxSelectItemIndicator [class]="indicatorClass">
                                         <svg lucideCheck size="16"></svg>
                                     </span>
                                     <span rdxSelectItemText>{{ berry }}</span>
diff --git a/packages/primitives/select/stories/select-object-values.ts b/packages/primitives/select/stories/select-object-values.ts
index 5e140157a..eb7d7e7e2 100644
--- a/packages/primitives/select/stories/select-object-values.ts
+++ b/packages/primitives/select/stories/select-object-values.ts
@@ -1,5 +1,3 @@
-import { ChangeDetectionStrategy, Component } from '@angular/core';
-import { LucideCheck, LucideChevronsUpDown } from '@lucide/angular';
 import { RdxSelectItem } from '../src/select-item';
 import { RdxSelectItemIndicator } from '../src/select-item-indicator';
 import { RdxSelectItemText } from '../src/select-item-text';
@@ -10,6 +8,8 @@ import { RdxSelectPositioner } from '../src/select-positioner';
 import { RdxSelectRoot } from '../src/select-root';
 import { RdxSelectTrigger } from '../src/select-trigger';
 import { RdxSelectValue } from '../src/select-value';
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { LucideCheck, LucideChevronsUpDown } from '@lucide/angular';
 
 interface ShippingMethod {
     id: string;
@@ -46,7 +46,7 @@ interface ShippingMethod {
                 Shipping method
             </label>
 
-            <ng-container #root="rdxSelectRoot" [value]="shippingMethods[0]" [isItemEqualToValue]="'id'" rdxSelectRoot>
+            <ng-container #root="rdxSelectRoot" rdxSelectRoot [value]="shippingMethods[0]" [isItemEqualToValue]="'id'">
                 <button
                     class="border-border bg-background text-foreground hover:bg-muted focus-visible:ring-ring focus-visible:ring-offset-background inline-flex min-h-9 min-w-64 items-center justify-between gap-3 rounded-md border px-3 py-1.5 text-sm shadow-sm outline-none focus-visible:ring-2 focus-visible:ring-offset-2 data-[disabled]:opacity-50"
                     aria-labelledby="shipping-method-label"
@@ -67,7 +67,7 @@ interface ShippingMethod {
                     <svg class="text-muted-foreground shrink-0" lucideChevronsUpDown size="16" />
                 </button>
 
-                <div class="z-[100]" *rdxSelectPortal [sideOffset]="5" align="start" rdxSelectPositioner>
+                <div *rdxSelectPortal class="z-[100]" align="start" rdxSelectPositioner [sideOffset]="5">
                     <div
                         class="border-border bg-popover text-popover-foreground min-w-[var(--radix-select-trigger-width)] rounded-lg border shadow-md will-change-[opacity,transform]"
                         rdxSelectPopup
@@ -76,8 +76,8 @@ interface ShippingMethod {
                             @for (method of shippingMethods; track method.id) {
                                 <div
                                     class="text-popover-foreground data-[disabled]:text-muted-foreground data-[highlighted]:bg-primary data-[highlighted]:text-primary-foreground group relative grid cursor-default grid-cols-[1.25rem_1fr] items-start gap-2 rounded-sm py-1.5 pr-3 pl-2 outline-none select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50"
-                                    [value]="method"
                                     rdxSelectItem
+                                    [value]="method"
                                 >
                                     <span
                                         class="col-start-1 mt-0.5 inline-flex items-center justify-center"
diff --git a/packages/primitives/select/stories/select-with-scroll.ts b/packages/primitives/select/stories/select-with-scroll.ts
index 548280f55..44c65782b 100644
--- a/packages/primitives/select/stories/select-with-scroll.ts
+++ b/packages/primitives/select/stories/select-with-scroll.ts
@@ -1,5 +1,3 @@
-import { ChangeDetectionStrategy, Component } from '@angular/core';
-import { LucideCheck, LucideChevronDown, LucideChevronUp } from '@lucide/angular';
 import { RdxSelectGroup } from '../src/select-group';
 import { RdxSelectGroupLabel } from '../src/select-group-label';
 import { RdxSelectItem } from '../src/select-item';
@@ -14,6 +12,8 @@ import { RdxSelectScrollDownButton } from '../src/select-scroll-down-button';
 import { RdxSelectScrollUpButton } from '../src/select-scroll-up-button';
 import { RdxSelectTrigger } from '../src/select-trigger';
 import { RdxSelectValue } from '../src/select-value';
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { LucideCheck, LucideChevronDown, LucideChevronUp } from '@lucide/angular';
 
 @Component({
     changeDetection: ChangeDetectionStrategy.Eager,
@@ -50,7 +50,7 @@ import { RdxSelectValue } from '../src/select-value';
                 <svg lucideChevronDown size="16" />
             </button>
 
-            <div class="z-[100]" *rdxSelectPortal [sideOffset]="5" align="start" rdxSelectPositioner>
+            <div *rdxSelectPortal class="z-[100]" align="start" rdxSelectPositioner [sideOffset]="5">
                 <div
                     class="border-border bg-popover text-popover-foreground max-h-[300px] min-w-40 overflow-hidden rounded-lg border shadow-md will-change-[opacity,transform]"
                     rdxSelectPopup
@@ -67,8 +67,8 @@ import { RdxSelectValue } from '../src/select-value';
                             @for (option of options; track option) {
                                 <div
                                     class="text-popover-foreground data-[disabled]:text-muted-foreground data-[highlighted]:bg-primary data-[highlighted]:text-primary-foreground relative flex h-7 cursor-default items-center rounded-sm pr-8 pl-6 text-sm leading-none outline-none select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50"
-                                    [value]="option"
                                     rdxSelectItem
+                                    [value]="option"
                                 >
                                     <span
                                         class="absolute left-0 inline-flex w-6 items-center justify-center"
@@ -86,8 +86,8 @@ import { RdxSelectValue } from '../src/select-value';
                             @for (vegetable of vegetables; track vegetable) {
                                 <div
                                     class="text-popover-foreground data-[disabled]:text-muted-foreground data-[highlighted]:bg-primary data-[highlighted]:text-primary-foreground relative flex h-7 cursor-default items-center rounded-sm pr-8 pl-6 text-sm leading-none outline-none select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50"
-                                    [value]="vegetable"
                                     rdxSelectItem
+                                    [value]="vegetable"
                                 >
                                     <span
                                         class="absolute left-0 inline-flex w-6 items-center justify-center"
diff --git a/packages/primitives/select/stories/select.stories.ts b/packages/primitives/select/stories/select.stories.ts
index 259b68bb6..8350dcf2a 100644
--- a/packages/primitives/select/stories/select.stories.ts
+++ b/packages/primitives/select/stories/select.stories.ts
@@ -1,9 +1,8 @@
-import { Meta, moduleMetadata, StoryObj } from '@storybook/angular';
 import { tailwindDemoDecorator } from '../../storybook/tailwind-demo';
 import { SelectAlignedPosition } from './select-aligned-position';
+import alignedPositionSource from './select-aligned-position?raw';
 import { SelectAlignedPositionWithScroll } from './select-aligned-position-with-scroll';
 import alignedPositionWithScrollSource from './select-aligned-position-with-scroll?raw';
-import alignedPositionSource from './select-aligned-position?raw';
 import { SelectDefault } from './select-default';
 import defaultSource from './select-default?raw';
 import { SelectEvents } from './select-events';
@@ -14,6 +13,7 @@ import { SelectObjectValues } from './select-object-values';
 import objectValuesSource from './select-object-values?raw';
 import { SelectWithScroll } from './select-with-scroll';
 import withScrollSource from './select-with-scroll?raw';
+import { Meta, moduleMetadata, StoryObj } from '@storybook/angular';
 
 const html = String.raw;
 
diff --git a/packages/primitives/separator/__tests__/separator.directive.spec.ts b/packages/primitives/separator/__tests__/separator.directive.spec.ts
index 4e3654fdf..1a18ba90b 100644
--- a/packages/primitives/separator/__tests__/separator.directive.spec.ts
+++ b/packages/primitives/separator/__tests__/separator.directive.spec.ts
@@ -1,6 +1,6 @@
+import { Orientation, RdxSeparatorRootDirective } from '../src/separator.directive';
 import { ChangeDetectionStrategy, Component } from '@angular/core';
 import { ComponentFixture, TestBed } from '@angular/core/testing';
-import { Orientation, RdxSeparatorRootDirective } from '../src/separator.directive';
 
 @Component({
     changeDetection: ChangeDetectionStrategy.Eager,
diff --git a/packages/primitives/separator/stories/separator.stories.ts b/packages/primitives/separator/stories/separator.stories.ts
index 4b28d1ee4..6b56ea4ee 100644
--- a/packages/primitives/separator/stories/separator.stories.ts
+++ b/packages/primitives/separator/stories/separator.stories.ts
@@ -1,7 +1,7 @@
-import { CommonModule } from '@angular/common';
-import { moduleMetadata } from '@storybook/angular';
 import { tailwindDemoDecorator } from '../../storybook/tailwind-demo';
 import { RdxSeparatorRootDirective } from '../src/separator.directive';
+import { CommonModule } from '@angular/common';
+import { moduleMetadata } from '@storybook/angular';
 
 const html = String.raw;
 
diff --git a/packages/primitives/signal-forms/__tests__/signal-field.spec.ts b/packages/primitives/signal-forms/__tests__/signal-field.spec.ts
index 2ac9a108f..fd65d5cc0 100644
--- a/packages/primitives/signal-forms/__tests__/signal-field.spec.ts
+++ b/packages/primitives/signal-forms/__tests__/signal-field.spec.ts
@@ -1,9 +1,9 @@
+import { RdxSignalField } from '../src/signal-field';
 import { ChangeDetectionStrategy, Component, signal } from '@angular/core';
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { form, FormField, required } from '@angular/forms/signals';
 import { By } from '@angular/platform-browser';
 import { RdxFieldRoot } from '@radix-ng/primitives/field';
-import { RdxSignalField } from '../src/signal-field';
 
 @Component({
     changeDetection: ChangeDetectionStrategy.Eager,
@@ -11,7 +11,7 @@ import { RdxSignalField } from '../src/signal-field';
     // The field expression is bound exactly ONCE (on `[formField]`); `rdxSignalField` reads it from there.
     template: `
         <div rdxFieldRoot>
-            <input [formField]="name" rdxSignalField />
+            <input rdxSignalField [formField]="name" />
         </div>
     `
 })
diff --git a/packages/primitives/signal-forms/__tests__/signal-form.spec.ts b/packages/primitives/signal-forms/__tests__/signal-form.spec.ts
index 7495188bb..076468b35 100644
--- a/packages/primitives/signal-forms/__tests__/signal-form.spec.ts
+++ b/packages/primitives/signal-forms/__tests__/signal-form.spec.ts
@@ -1,18 +1,18 @@
+import { RdxSignalField } from '../src/signal-field';
+import { RdxSignalForm } from '../src/signal-form';
 import { ChangeDetectionStrategy, Component, signal } from '@angular/core';
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { form, FormField, required } from '@angular/forms/signals';
 import { By } from '@angular/platform-browser';
 import { RdxFieldError, RdxFieldRoot } from '@radix-ng/primitives/field';
 import { RdxFormRoot } from '@radix-ng/primitives/form';
-import { RdxSignalField } from '../src/signal-field';
-import { RdxSignalForm } from '../src/signal-form';
 
 @Component({
     changeDetection: ChangeDetectionStrategy.Eager,
     imports: [FormField, RdxFormRoot, RdxFieldRoot, RdxSignalForm],
     // The form is bound once; the field carries only `name` — its errors are routed by `errorsFor`.
     template: `
-        <form [rdxSignalForm]="formTree" rdxFormRoot>
+        <form rdxFormRoot [rdxSignalForm]="formTree">
             <div rdxFieldRoot name="email">
                 <input [formField]="email" />
             </div>
@@ -68,7 +68,7 @@ describe('RdxSignalForm — aggregate state + errorsFor routing', () => {
     imports: [FormField, RdxFormRoot, RdxFieldRoot, RdxSignalForm],
     // A nested field — `errorsFor` must walk the dotted path `address.street`, not just top-level keys.
     template: `
-        <form [rdxSignalForm]="formTree" rdxFormRoot>
+        <form rdxFormRoot [rdxSignalForm]="formTree">
             <div rdxFieldRoot name="address.street">
                 <input [formField]="street" />
             </div>
@@ -116,9 +116,9 @@ describe('RdxSignalForm — errorsFor resolves a dotted path', () => {
     // Both adapters on the same field: per-field `rdxSignalField` AND form-level `name` routing.
     // `messages()` must dedupe so the shared error renders once.
     template: `
-        <form [rdxSignalForm]="formTree" rdxFormRoot>
+        <form rdxFormRoot [rdxSignalForm]="formTree">
             <div rdxFieldRoot name="email">
-                <input [formField]="email" rdxSignalField />
+                <input rdxSignalField [formField]="email" />
                 <p #err="rdxFieldError" rdxFieldError>{{ err.messages().join('|') }}</p>
             </div>
         </form>
diff --git a/packages/primitives/signal-forms/index.ts b/packages/primitives/signal-forms/index.ts
index 264e5817d..264174bdb 100644
--- a/packages/primitives/signal-forms/index.ts
+++ b/packages/primitives/signal-forms/index.ts
@@ -1,6 +1,6 @@
-import { NgModule } from '@angular/core';
 import { RdxSignalField } from './src/signal-field';
 import { RdxSignalForm } from './src/signal-form';
+import { NgModule } from '@angular/core';
 
 export * from './src/signal-field';
 export * from './src/signal-form';
diff --git a/packages/primitives/signal-forms/stories/signal-forms-field.ts b/packages/primitives/signal-forms/stories/signal-forms-field.ts
index c1de15f0b..db00729ce 100644
--- a/packages/primitives/signal-forms/stories/signal-forms-field.ts
+++ b/packages/primitives/signal-forms/stories/signal-forms-field.ts
@@ -1,3 +1,6 @@
+import { cn, demoButton, demoInput } from '../../storybook/styles';
+import { RdxSignalField } from '../src/signal-field';
+import { RdxSignalForm } from '../src/signal-form';
 import { ChangeDetectionStrategy, Component, signal } from '@angular/core';
 import { email as emailFormat, form, FormField, required } from '@angular/forms/signals';
 import {
@@ -8,9 +11,6 @@ import {
     RdxFieldRoot
 } from '@radix-ng/primitives/field';
 import { RdxFormRoot, RdxFormSubmitEvent } from '@radix-ng/primitives/form';
-import { cn, demoButton, demoInput } from '../../storybook/styles';
-import { RdxSignalField } from '../src/signal-field';
-import { RdxSignalForm } from '../src/signal-form';
 
 @Component({
     changeDetection: ChangeDetectionStrategy.Eager,
@@ -29,22 +29,22 @@ import { RdxSignalForm } from '../src/signal-form';
     template: `
         <form
             class="flex w-80 flex-col gap-3"
+            rdxFormRoot
             [rdxSignalForm]="loginForm"
             (onFormSubmit)="onSubmit($event)"
-            rdxFormRoot
         >
             <!--
               No manual [invalid]/[touched]/[dirty]/[disabled] on rdxFieldRoot — rdxSignalField drives them
               from the Signal Forms field, and the field expression is bound exactly once (on [formField]).
             -->
             <div class="flex flex-col gap-2" rdxFieldRoot required>
-                <label [class]="labelClass" rdxFieldLabel>Email</label>
-                <input [class]="inputClass" [formField]="email" rdxFieldControl rdxSignalField type="email" />
-                <p [class]="descriptionClass" rdxFieldDescription>Use the email connected to your account.</p>
-                <p #err="rdxFieldError" [class]="errorClass" rdxFieldError>{{ err.messages().join(' ') }}</p>
+                <label rdxFieldLabel [class]="labelClass">Email</label>
+                <input rdxFieldControl rdxSignalField type="email" [class]="inputClass" [formField]="email" />
+                <p rdxFieldDescription [class]="descriptionClass">Use the email connected to your account.</p>
+                <p #err="rdxFieldError" rdxFieldError [class]="errorClass">{{ err.messages().join(' ') }}</p>
             </div>
 
-            <button [class]="buttonClass" type="submit">Submit</button>
+            <button type="submit" [class]="buttonClass">Submit</button>
         </form>
     `
 })
diff --git a/packages/primitives/signal-forms/stories/signal-forms.stories.ts b/packages/primitives/signal-forms/stories/signal-forms.stories.ts
index 535744b79..75e687316 100644
--- a/packages/primitives/signal-forms/stories/signal-forms.stories.ts
+++ b/packages/primitives/signal-forms/stories/signal-forms.stories.ts
@@ -1,7 +1,7 @@
-import { Meta, moduleMetadata, StoryObj } from '@storybook/angular';
 import { tailwindDemoDecorator } from '../../storybook/tailwind-demo';
 import { SignalFormsFieldExample } from './signal-forms-field';
 import fieldSource from './signal-forms-field?raw';
+import { Meta, moduleMetadata, StoryObj } from '@storybook/angular';
 
 const html = String.raw;
 
diff --git a/packages/primitives/slider/__tests__/slider.spec.ts b/packages/primitives/slider/__tests__/slider.spec.ts
index 738cd87e3..2b47a7ce7 100644
--- a/packages/primitives/slider/__tests__/slider.spec.ts
+++ b/packages/primitives/slider/__tests__/slider.spec.ts
@@ -1,8 +1,10 @@
-import { ChangeDetectionStrategy, Component, signal } from '@angular/core';
-import { ComponentFixture, TestBed } from '@angular/core/testing';
-import { form, FormField } from '@angular/forms/signals';
-import { By } from '@angular/platform-browser';
-import { vi } from 'vitest';
+import {
+    getPushedThumbValues,
+    getSliderValue,
+    resolveThumbCollision,
+    roundValueToStep,
+    valueToPercent
+} from '../src/slider.utils';
 import { RdxSliderControl } from '../src/slider-control';
 import { RdxSliderIndicator } from '../src/slider-indicator';
 import {
@@ -16,13 +18,11 @@ import { RdxSliderThumb } from '../src/slider-thumb';
 import { RdxSliderThumbInput } from '../src/slider-thumb-input';
 import { RdxSliderTrack } from '../src/slider-track';
 import { RdxSliderValue } from '../src/slider-value';
-import {
-    getPushedThumbValues,
-    getSliderValue,
-    resolveThumbCollision,
-    roundValueToStep,
-    valueToPercent
-} from '../src/slider.utils';
+import { ChangeDetectionStrategy, Component, signal } from '@angular/core';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { form, FormField } from '@angular/forms/signals';
+import { By } from '@angular/platform-browser';
+import { vi } from 'vitest';
 
 describe('slider utils', () => {
     it('valueToPercent maps the range to 0–100', () => {
@@ -85,19 +85,19 @@ describe('slider utils', () => {
     ],
     template: `
         <div
-            [(value)]="value"
+            rdxSliderRoot
             [step]="step()"
             [disabled]="disabled()"
             [name]="name()"
+            [(value)]="value"
             (onValueChange)="onChange($event)"
-            rdxSliderRoot
         >
             <output rdxSliderValue></output>
             <div rdxSliderControl>
                 <div rdxSliderTrack>
                     <div rdxSliderIndicator></div>
                     @for (v of thumbs(); track $index) {
-                        <div [index]="$index" rdxSliderThumb>
+                        <div rdxSliderThumb [index]="$index">
                             <input rdxSliderThumbInput aria-label="value" />
                         </div>
                     }
@@ -121,11 +121,11 @@ class TestComponent {
     imports: [RdxSliderRoot, RdxSliderControl, RdxSliderTrack, RdxSliderIndicator, RdxSliderThumb, RdxSliderThumbInput],
     template: `
         <div
-            [(value)]="value"
+            rdxSliderRoot
             [thumbAlignment]="thumbAlignment()"
+            [(value)]="value"
             (onValueChange)="onChange($event)"
             (onValueCommitted)="onCommit($event)"
-            rdxSliderRoot
         >
             <div rdxSliderControl>
                 <div rdxSliderTrack>
@@ -149,11 +149,11 @@ class EdgeComponent {
     changeDetection: ChangeDetectionStrategy.Eager,
     imports: [RdxSliderRoot, RdxSliderControl, RdxSliderTrack, RdxSliderIndicator, RdxSliderThumb, RdxSliderThumbInput],
     template: `
-        <div [value]="value()" rdxSliderRoot>
+        <div rdxSliderRoot [value]="value()">
             <div rdxSliderControl>
                 <div rdxSliderTrack>
                     <div rdxSliderIndicator></div>
-                    <div [index]="1" rdxSliderThumb>
+                    <div rdxSliderThumb [index]="1">
                         <input rdxSliderThumbInput aria-label="value" />
                     </div>
                 </div>
@@ -406,7 +406,7 @@ describe('RdxSlider', () => {
     changeDetection: ChangeDetectionStrategy.Eager,
     imports: [RdxSliderRoot, RdxSliderControl, RdxSliderTrack, RdxSliderIndicator, RdxSliderThumb, RdxSliderThumbInput],
     template: `
-        <div [(value)]="value" [invalid]="invalid()" [errors]="errors()" [dirty]="dirty()" rdxSliderRoot>
+        <div rdxSliderRoot [invalid]="invalid()" [errors]="errors()" [dirty]="dirty()" [(value)]="value">
             <div rdxSliderControl>
                 <div rdxSliderTrack>
                     <div rdxSliderIndicator></div>
@@ -488,7 +488,7 @@ describe('RdxSlider validation state', () => {
         RdxSliderThumbInput
     ],
     template: `
-        <div [formField]="amount" rdxSliderRoot>
+        <div rdxSliderRoot [formField]="amount">
             <div rdxSliderControl>
                 <div rdxSliderTrack>
                     <div rdxSliderIndicator></div>
diff --git a/packages/primitives/slider/index.ts b/packages/primitives/slider/index.ts
index 8e0b5f9b0..b732e444f 100644
--- a/packages/primitives/slider/index.ts
+++ b/packages/primitives/slider/index.ts
@@ -1,4 +1,3 @@
-import { NgModule } from '@angular/core';
 import { RdxSliderControl } from './src/slider-control';
 import { RdxSliderIndicator } from './src/slider-indicator';
 import { RdxSliderRoot } from './src/slider-root';
@@ -6,7 +5,9 @@ import { RdxSliderThumb } from './src/slider-thumb';
 import { RdxSliderThumbInput } from './src/slider-thumb-input';
 import { RdxSliderTrack } from './src/slider-track';
 import { RdxSliderValue } from './src/slider-value';
+import { NgModule } from '@angular/core';
 
+export * from './src/slider.utils';
 export * from './src/slider-context';
 export * from './src/slider-control';
 export * from './src/slider-indicator';
@@ -15,7 +16,6 @@ export * from './src/slider-thumb';
 export * from './src/slider-thumb-input';
 export * from './src/slider-track';
 export * from './src/slider-value';
-export * from './src/slider.utils';
 
 const _imports = [
     RdxSliderRoot,
diff --git a/packages/primitives/slider/src/slider-context.ts b/packages/primitives/slider/src/slider-context.ts
index 1aa18bd15..e23538c84 100644
--- a/packages/primitives/slider/src/slider-context.ts
+++ b/packages/primitives/slider/src/slider-context.ts
@@ -1,5 +1,5 @@
-import { createContext } from '@radix-ng/primitives/core';
 import type { RdxSliderRoot } from './slider-root';
+import { createContext } from '@radix-ng/primitives/core';
 
 /**
  * The Slider context exposes the root directive instance to every child part.
diff --git a/packages/primitives/slider/src/slider-control.ts b/packages/primitives/slider/src/slider-control.ts
index f414d9fdc..0cca2cf7a 100644
--- a/packages/primitives/slider/src/slider-control.ts
+++ b/packages/primitives/slider/src/slider-control.ts
@@ -1,6 +1,3 @@
-import { DOCUMENT } from '@angular/common';
-import { DestroyRef, Directive, ElementRef, inject } from '@angular/core';
-import { injectSliderRootContext } from './slider-context';
 import {
     clamp,
     getControlOffset,
@@ -10,6 +7,9 @@ import {
     roundValueToStep,
     validateMinimumDistance
 } from './slider.utils';
+import { injectSliderRootContext } from './slider-context';
+import { DOCUMENT } from '@angular/common';
+import { DestroyRef, Directive, ElementRef, inject } from '@angular/core';
 
 const INTENTIONAL_DRAG_COUNT_THRESHOLD = 2;
 
diff --git a/packages/primitives/slider/src/slider-indicator.ts b/packages/primitives/slider/src/slider-indicator.ts
index 2fb94bf3d..8488d820e 100644
--- a/packages/primitives/slider/src/slider-indicator.ts
+++ b/packages/primitives/slider/src/slider-indicator.ts
@@ -1,6 +1,6 @@
-import { computed, Directive } from '@angular/core';
-import { injectSliderRootContext } from './slider-context';
 import { valueToPercent } from './slider.utils';
+import { injectSliderRootContext } from './slider-context';
+import { computed, Directive } from '@angular/core';
 
 function getInsetStyles(
     vertical: boolean,
diff --git a/packages/primitives/slider/src/slider-root.ts b/packages/primitives/slider/src/slider-root.ts
index e545e6ea1..81b65ac62 100644
--- a/packages/primitives/slider/src/slider-root.ts
+++ b/packages/primitives/slider/src/slider-root.ts
@@ -1,3 +1,14 @@
+import {
+    areValuesEqual,
+    asc,
+    clamp,
+    formatNumber,
+    getSliderValue,
+    SliderOrientation,
+    ThumbCollisionBehavior,
+    validateMinimumDistance
+} from './slider.utils';
+import { provideSliderRootContext } from './slider-context';
 import {
     booleanAttribute,
     computed,
@@ -7,8 +18,8 @@ import {
     model,
     numberAttribute,
     output,
-    signal,
-    Signal
+    Signal,
+    signal
 } from '@angular/core';
 import { RdxCompositeList } from '@radix-ng/primitives/composite';
 import {
@@ -26,17 +37,6 @@ import {
     RdxFormUiTouchTarget
 } from '@radix-ng/primitives/core';
 import { injectDirection } from '@radix-ng/primitives/direction-provider';
-import { provideSliderRootContext } from './slider-context';
-import {
-    areValuesEqual,
-    asc,
-    clamp,
-    formatNumber,
-    getSliderValue,
-    SliderOrientation,
-    ThumbCollisionBehavior,
-    validateMinimumDistance
-} from './slider.utils';
 
 export type SliderValue = number | number[];
 export type RdxSliderThumbAlignment = 'center' | 'edge' | 'edge-client-only';
diff --git a/packages/primitives/slider/src/slider-thumb-input.ts b/packages/primitives/slider/src/slider-thumb-input.ts
index 61ead7725..28556a42b 100644
--- a/packages/primitives/slider/src/slider-thumb-input.ts
+++ b/packages/primitives/slider/src/slider-thumb-input.ts
@@ -1,8 +1,8 @@
-import { computed, DestroyRef, Directive, effect, ElementRef, inject, input } from '@angular/core';
-import { injectId } from '@radix-ng/primitives/core';
+import { ALL_KEYS, COMPOSITE_KEYS, getDefaultAriaValueText, getNewValue, roundValueToStep } from './slider.utils';
 import { injectSliderRootContext } from './slider-context';
 import { RdxSliderThumb } from './slider-thumb';
-import { ALL_KEYS, COMPOSITE_KEYS, getDefaultAriaValueText, getNewValue, roundValueToStep } from './slider.utils';
+import { computed, DestroyRef, Directive, effect, ElementRef, inject, input } from '@angular/core';
+import { injectId } from '@radix-ng/primitives/core';
 
 /**
  * The native `input[type=range]` nested inside a thumb. It is visually hidden but
diff --git a/packages/primitives/slider/src/slider-thumb.ts b/packages/primitives/slider/src/slider-thumb.ts
index 795dd0e55..c2eb51c12 100644
--- a/packages/primitives/slider/src/slider-thumb.ts
+++ b/packages/primitives/slider/src/slider-thumb.ts
@@ -1,3 +1,6 @@
+import { getInsetThumbPositionPercent, valueToPercent } from './slider.utils';
+import { injectSliderRootContext } from './slider-context';
+import { RdxSliderThumbMetadata, RdxSliderThumbRef } from './slider-root';
 import {
     afterNextRender,
     afterRenderEffect,
@@ -15,9 +18,6 @@ import {
 } from '@angular/core';
 import { RdxCompositeListItem } from '@radix-ng/primitives/composite';
 import { BooleanInput, NumberInput } from '@radix-ng/primitives/core';
-import { injectSliderRootContext } from './slider-context';
-import { RdxSliderThumbMetadata, RdxSliderThumbRef } from './slider-root';
-import { getInsetThumbPositionPercent, valueToPercent } from './slider.utils';
 
 /**
  * A draggable handle. Render one per value; place an `input[rdxSliderThumbInput]`
diff --git a/packages/primitives/slider/src/slider-track.ts b/packages/primitives/slider/src/slider-track.ts
index aa1e5fa38..f61ab1e89 100644
--- a/packages/primitives/slider/src/slider-track.ts
+++ b/packages/primitives/slider/src/slider-track.ts
@@ -1,5 +1,5 @@
-import { Directive } from '@angular/core';
 import { injectSliderRootContext } from './slider-context';
+import { Directive } from '@angular/core';
 
 /**
  * The track of the slider — the positioning context for the indicator and thumbs.
diff --git a/packages/primitives/slider/src/slider-value.ts b/packages/primitives/slider/src/slider-value.ts
index 7581542da..bf0b9d291 100644
--- a/packages/primitives/slider/src/slider-value.ts
+++ b/packages/primitives/slider/src/slider-value.ts
@@ -1,5 +1,5 @@
-import { computed, Directive, input } from '@angular/core';
 import { injectSliderRootContext } from './slider-context';
+import { computed, Directive, input } from '@angular/core';
 
 /**
  * Displays the slider's current value(s) as formatted text. Renders into an
diff --git a/packages/primitives/slider/stories/slider-default.ts b/packages/primitives/slider/stories/slider-default.ts
index fee7c2c45..b2e779890 100644
--- a/packages/primitives/slider/stories/slider-default.ts
+++ b/packages/primitives/slider/stories/slider-default.ts
@@ -13,7 +13,7 @@ import {
     selector: 'slider-default-example',
     imports: [RdxSliderRoot, RdxSliderControl, RdxSliderTrack, RdxSliderIndicator, RdxSliderThumb, RdxSliderThumbInput],
     template: `
-        <div class="relative w-56 select-none" [value]="45" [step]="5" rdxSliderRoot>
+        <div class="relative w-56 select-none" rdxSliderRoot [value]="45" [step]="5">
             <div class="flex h-5 w-full touch-none items-center" rdxSliderControl>
                 <div class="bg-muted relative h-1 w-full rounded-full" rdxSliderTrack>
                     <div class="bg-primary h-full rounded-full" rdxSliderIndicator></div>
diff --git a/packages/primitives/slider/stories/slider-disabled.ts b/packages/primitives/slider/stories/slider-disabled.ts
index 038dd77bb..bc3c785e1 100644
--- a/packages/primitives/slider/stories/slider-disabled.ts
+++ b/packages/primitives/slider/stories/slider-disabled.ts
@@ -13,7 +13,7 @@ import {
     selector: 'slider-disabled-example',
     imports: [RdxSliderRoot, RdxSliderControl, RdxSliderTrack, RdxSliderIndicator, RdxSliderThumb, RdxSliderThumbInput],
     template: `
-        <div class="relative w-56 select-none data-[disabled]:opacity-50" [value]="45" rdxSliderRoot disabled>
+        <div class="relative w-56 select-none data-[disabled]:opacity-50" rdxSliderRoot disabled [value]="45">
             <div class="flex h-5 w-full touch-none items-center" rdxSliderControl>
                 <div class="bg-muted relative h-1 w-full rounded-full" rdxSliderTrack>
                     <div class="bg-primary h-full rounded-full" rdxSliderIndicator></div>
diff --git a/packages/primitives/slider/stories/slider-events.ts b/packages/primitives/slider/stories/slider-events.ts
index 8ea462956..4c9fb5f31 100644
--- a/packages/primitives/slider/stories/slider-events.ts
+++ b/packages/primitives/slider/stories/slider-events.ts
@@ -18,12 +18,12 @@ import {
         <div class="grid w-80 gap-4">
             <div
                 class="relative w-full select-none"
+                rdxSliderRoot
+                name="volume"
                 [value]="value()"
                 [step]="5"
                 (onValueChange)="onValueChange($event)"
                 (onValueCommitted)="onValueCommitted($event)"
-                rdxSliderRoot
-                name="volume"
             >
                 <div class="flex h-5 w-full touch-none items-center" rdxSliderControl>
                     <div class="bg-muted relative h-1 w-full rounded-full" rdxSliderTrack>
@@ -41,9 +41,9 @@ import {
             <label class="text-foreground flex items-center gap-2 text-sm">
                 <input
                     class="accent-primary size-4"
+                    type="checkbox"
                     [checked]="locked()"
                     (change)="locked.set($any($event.target).checked)"
-                    type="checkbox"
                 />
                 Cancel value changes
             </label>
diff --git a/packages/primitives/slider/stories/slider-forms.ts b/packages/primitives/slider/stories/slider-forms.ts
index 3b0f7b746..a202eb791 100644
--- a/packages/primitives/slider/stories/slider-forms.ts
+++ b/packages/primitives/slider/stories/slider-forms.ts
@@ -24,7 +24,7 @@ import {
     template: `
         <div class="flex flex-col gap-3">
             <label class="text-foreground text-sm" id="volume-label">Volume</label>
-            <div class="relative w-56 select-none" [formControl]="volume" [step]="5" rdxSliderRoot>
+            <div class="relative w-56 select-none" rdxSliderRoot [formControl]="volume" [step]="5">
                 <div class="flex h-5 w-full touch-none items-center" rdxSliderControl>
                     <div class="bg-muted relative h-1 w-full rounded-full" rdxSliderTrack>
                         <div class="bg-primary h-full rounded-full" rdxSliderIndicator></div>
diff --git a/packages/primitives/slider/stories/slider-range.ts b/packages/primitives/slider/stories/slider-range.ts
index 7b9d20ab1..bb8ef8e13 100644
--- a/packages/primitives/slider/stories/slider-range.ts
+++ b/packages/primitives/slider/stories/slider-range.ts
@@ -13,21 +13,21 @@ import {
     selector: 'slider-range-example',
     imports: [RdxSliderRoot, RdxSliderControl, RdxSliderTrack, RdxSliderIndicator, RdxSliderThumb, RdxSliderThumbInput],
     template: `
-        <div class="relative w-56 select-none" [value]="[25, 75]" [minStepsBetweenValues]="1" rdxSliderRoot>
+        <div class="relative w-56 select-none" rdxSliderRoot [value]="[25, 75]" [minStepsBetweenValues]="1">
             <div class="flex h-5 w-full touch-none items-center" rdxSliderControl>
                 <div class="bg-muted relative h-1 w-full rounded-full" rdxSliderTrack>
                     <div class="bg-primary h-full rounded-full" rdxSliderIndicator></div>
                     <div
                         class="border-border bg-background focus-within:ring-ring block size-5 rounded-full border shadow-sm focus-within:ring-2"
-                        [index]="0"
                         rdxSliderThumb
+                        [index]="0"
                     >
                         <input rdxSliderThumbInput aria-label="Minimum" />
                     </div>
                     <div
                         class="border-border bg-background focus-within:ring-ring block size-5 rounded-full border shadow-sm focus-within:ring-2"
-                        [index]="1"
                         rdxSliderThumb
+                        [index]="1"
                     >
                         <input rdxSliderThumbInput aria-label="Maximum" />
                     </div>
diff --git a/packages/primitives/slider/stories/slider-thumb-alignment.ts b/packages/primitives/slider/stories/slider-thumb-alignment.ts
index d2b4b7e0f..13a781a4b 100644
--- a/packages/primitives/slider/stories/slider-thumb-alignment.ts
+++ b/packages/primitives/slider/stories/slider-thumb-alignment.ts
@@ -16,7 +16,7 @@ import {
         <div class="grid w-72 gap-6">
             <div class="grid gap-2">
                 <span class="text-foreground text-sm font-medium">Center</span>
-                <div class="relative px-2 select-none" [value]="50" thumbAlignment="center" rdxSliderRoot>
+                <div class="relative px-2 select-none" thumbAlignment="center" rdxSliderRoot [value]="50">
                     <div class="flex h-6 w-full touch-none items-center" rdxSliderControl>
                         <div class="bg-muted relative h-1 w-full rounded-full" rdxSliderTrack>
                             <div class="bg-primary h-full rounded-full" rdxSliderIndicator></div>
@@ -33,7 +33,7 @@ import {
 
             <div class="grid gap-2">
                 <span class="text-foreground text-sm font-medium">Edge</span>
-                <div class="relative px-2 select-none" [value]="50" thumbAlignment="edge" rdxSliderRoot>
+                <div class="relative px-2 select-none" thumbAlignment="edge" rdxSliderRoot [value]="50">
                     <div class="flex h-6 w-full touch-none items-center" rdxSliderControl>
                         <div class="bg-muted relative h-1 w-full rounded-full" rdxSliderTrack>
                             <div class="bg-primary h-full rounded-full" rdxSliderIndicator></div>
@@ -50,7 +50,7 @@ import {
 
             <div class="grid gap-2">
                 <span class="text-foreground text-sm font-medium">Edge client only</span>
-                <div class="relative px-2 select-none" [value]="50" thumbAlignment="edge-client-only" rdxSliderRoot>
+                <div class="relative px-2 select-none" thumbAlignment="edge-client-only" rdxSliderRoot [value]="50">
                     <div class="flex h-6 w-full touch-none items-center" rdxSliderControl>
                         <div class="bg-muted relative h-1 w-full rounded-full" rdxSliderTrack>
                             <div class="bg-primary h-full rounded-full" rdxSliderIndicator></div>
diff --git a/packages/primitives/slider/stories/slider-value.ts b/packages/primitives/slider/stories/slider-value.ts
index 628caf863..2f17ec654 100644
--- a/packages/primitives/slider/stories/slider-value.ts
+++ b/packages/primitives/slider/stories/slider-value.ts
@@ -22,7 +22,7 @@ import {
         RdxSliderValue
     ],
     template: `
-        <div class="relative w-56 select-none" [value]="42" [format]="format" rdxSliderRoot>
+        <div class="relative w-56 select-none" rdxSliderRoot [value]="42" [format]="format">
             <div class="text-foreground mb-2 flex items-center justify-between text-sm">
                 <span id="slider-value-label">Budget</span>
                 <output class="text-muted-foreground tabular-nums" rdxSliderValue></output>
diff --git a/packages/primitives/slider/stories/slider-vertical.ts b/packages/primitives/slider/stories/slider-vertical.ts
index 59d6e36ef..bfe7d6b09 100644
--- a/packages/primitives/slider/stories/slider-vertical.ts
+++ b/packages/primitives/slider/stories/slider-vertical.ts
@@ -13,7 +13,7 @@ import {
     selector: 'slider-vertical-example',
     imports: [RdxSliderRoot, RdxSliderControl, RdxSliderTrack, RdxSliderIndicator, RdxSliderThumb, RdxSliderThumbInput],
     template: `
-        <div class="relative h-56 w-5 select-none" [value]="45" [step]="5" rdxSliderRoot orientation="vertical">
+        <div class="relative h-56 w-5 select-none" rdxSliderRoot orientation="vertical" [value]="45" [step]="5">
             <div class="flex h-full w-5 touch-none justify-center" rdxSliderControl>
                 <div class="bg-muted relative h-full w-1 rounded-full" rdxSliderTrack>
                     <div class="bg-primary w-full rounded-full" rdxSliderIndicator></div>
diff --git a/packages/primitives/slider/stories/slider.stories.ts b/packages/primitives/slider/stories/slider.stories.ts
index 83a23e5f0..d0fe5d973 100644
--- a/packages/primitives/slider/stories/slider.stories.ts
+++ b/packages/primitives/slider/stories/slider.stories.ts
@@ -1,4 +1,3 @@
-import { Meta, moduleMetadata, StoryObj } from '@storybook/angular';
 import { tailwindDemoDecorator } from '../../storybook/tailwind-demo';
 import { SliderDefaultExample } from './slider-default';
 import defaultSource from './slider-default?raw';
@@ -16,6 +15,7 @@ import { SliderValueExample } from './slider-value';
 import valueSource from './slider-value?raw';
 import { SliderVerticalExample } from './slider-vertical';
 import verticalSource from './slider-vertical?raw';
+import { Meta, moduleMetadata, StoryObj } from '@storybook/angular';
 
 const html = String.raw;
 
diff --git a/packages/primitives/stepper/__tests__/stepper.spec.ts b/packages/primitives/stepper/__tests__/stepper.spec.ts
index 53562a43a..12eb3ab8e 100644
--- a/packages/primitives/stepper/__tests__/stepper.spec.ts
+++ b/packages/primitives/stepper/__tests__/stepper.spec.ts
@@ -1,20 +1,20 @@
+import { RdxStepperItemDirective } from '../src/stepper-item.directive';
+import { RdxStepperRootDirective, RdxStepperValueChangeEvent } from '../src/stepper-root.directive';
+import { RdxStepperTriggerDirective } from '../src/stepper-trigger.directive';
 import { ChangeDetectionStrategy, Component } from '@angular/core';
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { By } from '@angular/platform-browser';
 import { vi } from 'vitest';
-import { RdxStepperItemDirective } from '../src/stepper-item.directive';
-import { RdxStepperRootDirective, RdxStepperValueChangeEvent } from '../src/stepper-root.directive';
-import { RdxStepperTriggerDirective } from '../src/stepper-trigger.directive';
 
 @Component({
     changeDetection: ChangeDetectionStrategy.Eager,
     imports: [RdxStepperRootDirective, RdxStepperItemDirective, RdxStepperTriggerDirective],
     template: `
-        <div [(value)]="value" (onValueChange)="onValueChange($event)" rdxStepperRoot>
-            <div [step]="1" rdxStepperItem>
+        <div rdxStepperRoot [(value)]="value" (onValueChange)="onValueChange($event)">
+            <div rdxStepperItem [step]="1">
                 <button rdxStepperTrigger>One</button>
             </div>
-            <div [step]="2" rdxStepperItem>
+            <div rdxStepperItem [step]="2">
                 <button rdxStepperTrigger>Two</button>
             </div>
         </div>
diff --git a/packages/primitives/stepper/index.ts b/packages/primitives/stepper/index.ts
index 32e707f38..cf72e3a55 100644
--- a/packages/primitives/stepper/index.ts
+++ b/packages/primitives/stepper/index.ts
@@ -1,4 +1,3 @@
-import { NgModule } from '@angular/core';
 import { RdxStepperDescriptionDirective } from './src/stepper-description.directive';
 import { RdxStepperIndicatorDirective } from './src/stepper-indicator.directive';
 import { RdxStepperItemDirective } from './src/stepper-item.directive';
@@ -6,12 +5,13 @@ import { RdxStepperRootDirective } from './src/stepper-root.directive';
 import { RdxStepperSeparatorDirective } from './src/stepper-separator.directive';
 import { RdxStepperTitleDirective } from './src/stepper-title.directive';
 import { RdxStepperTriggerDirective } from './src/stepper-trigger.directive';
+import { NgModule } from '@angular/core';
 
 export * from './src/stepper-description.directive';
 export * from './src/stepper-indicator.directive';
 export * from './src/stepper-item.directive';
-export * from './src/stepper-root-context.token';
 export * from './src/stepper-root.directive';
+export * from './src/stepper-root-context.token';
 export * from './src/stepper-separator.directive';
 export * from './src/stepper-title.directive';
 export * from './src/stepper-trigger.directive';
diff --git a/packages/primitives/stepper/src/stepper-description.directive.ts b/packages/primitives/stepper/src/stepper-description.directive.ts
index 8e8782ba4..8abfc8a9c 100644
--- a/packages/primitives/stepper/src/stepper-description.directive.ts
+++ b/packages/primitives/stepper/src/stepper-description.directive.ts
@@ -1,5 +1,5 @@
-import { Directive } from '@angular/core';
 import { injectStepperItemContext } from './stepper-item-context.token';
+import { Directive } from '@angular/core';
 
 @Directive({
     selector: '[rdxStepperDescription]',
diff --git a/packages/primitives/stepper/src/stepper-indicator.directive.ts b/packages/primitives/stepper/src/stepper-indicator.directive.ts
index 47be37dc1..4313b41c1 100644
--- a/packages/primitives/stepper/src/stepper-indicator.directive.ts
+++ b/packages/primitives/stepper/src/stepper-indicator.directive.ts
@@ -1,5 +1,5 @@
-import { Directive } from '@angular/core';
 import { injectStepperItemContext } from './stepper-item-context.token';
+import { Directive } from '@angular/core';
 
 @Directive({
     selector: '[rdxStepperIndicator]',
diff --git a/packages/primitives/stepper/src/stepper-item-context.token.ts b/packages/primitives/stepper/src/stepper-item-context.token.ts
index 2cb0bb843..076f5a191 100644
--- a/packages/primitives/stepper/src/stepper-item-context.token.ts
+++ b/packages/primitives/stepper/src/stepper-item-context.token.ts
@@ -1,6 +1,6 @@
+import { StepperState } from './types';
 import { inject, InjectionToken, InputSignalWithTransform, Signal } from '@angular/core';
 import { BooleanInput, NumberInput } from '@radix-ng/primitives/core';
-import { StepperState } from './types';
 
 export interface StepperItemContext {
     titleId: string;
diff --git a/packages/primitives/stepper/src/stepper-item.directive.ts b/packages/primitives/stepper/src/stepper-item.directive.ts
index 87174c0a5..f993e5da8 100644
--- a/packages/primitives/stepper/src/stepper-item.directive.ts
+++ b/packages/primitives/stepper/src/stepper-item.directive.ts
@@ -1,8 +1,8 @@
-import { booleanAttribute, computed, Directive, forwardRef, input, numberAttribute } from '@angular/core';
-import { BooleanInput, injectId, NumberInput } from '@radix-ng/primitives/core';
 import { STEPPER_ITEM_CONTEXT, StepperItemContext } from './stepper-item-context.token';
 import { injectStepperRootContext } from './stepper-root-context.token';
 import { StepperState } from './types';
+import { booleanAttribute, computed, Directive, forwardRef, input, numberAttribute } from '@angular/core';
+import { BooleanInput, injectId, NumberInput } from '@radix-ng/primitives/core';
 
 @Directive({
     selector: '[rdxStepperItem]',
diff --git a/packages/primitives/stepper/src/stepper-root.directive.ts b/packages/primitives/stepper/src/stepper-root.directive.ts
index 452afbd79..889905a5b 100644
--- a/packages/primitives/stepper/src/stepper-root.directive.ts
+++ b/packages/primitives/stepper/src/stepper-root.directive.ts
@@ -1,3 +1,4 @@
+import { STEPPER_ROOT_CONTEXT, StepperRootContext } from './stepper-root-context.token';
 import {
     booleanAttribute,
     computed,
@@ -20,7 +21,6 @@ import {
     RdxLiveAnnouncer
 } from '@radix-ng/primitives/core';
 import { injectDirection } from '@radix-ng/primitives/direction-provider';
-import { STEPPER_ROOT_CONTEXT, StepperRootContext } from './stepper-root-context.token';
 
 export type RdxStepperValueChangeReason = 'trigger-press' | 'keyboard' | 'none';
 export type RdxStepperValueChangeEventDetails = RdxCancelableChangeEventDetails<RdxStepperValueChangeReason>;
diff --git a/packages/primitives/stepper/src/stepper-separator.directive.ts b/packages/primitives/stepper/src/stepper-separator.directive.ts
index 839135f01..a685f527f 100644
--- a/packages/primitives/stepper/src/stepper-separator.directive.ts
+++ b/packages/primitives/stepper/src/stepper-separator.directive.ts
@@ -1,7 +1,7 @@
-import { Directive, effect, inject } from '@angular/core';
-import { RdxSeparatorRootDirective } from '@radix-ng/primitives/separator';
 import { injectStepperItemContext } from './stepper-item-context.token';
 import { injectStepperRootContext } from './stepper-root-context.token';
+import { Directive, effect, inject } from '@angular/core';
+import { RdxSeparatorRootDirective } from '@radix-ng/primitives/separator';
 
 @Directive({
     selector: '[rdxStepperSeparator]',
diff --git a/packages/primitives/stepper/src/stepper-title.directive.ts b/packages/primitives/stepper/src/stepper-title.directive.ts
index 4bb65f68e..3eb99eb8c 100644
--- a/packages/primitives/stepper/src/stepper-title.directive.ts
+++ b/packages/primitives/stepper/src/stepper-title.directive.ts
@@ -1,5 +1,5 @@
-import { Directive } from '@angular/core';
 import { injectStepperItemContext } from './stepper-item-context.token';
+import { Directive } from '@angular/core';
 
 @Directive({
     selector: '[rdxStepperTitle]',
diff --git a/packages/primitives/stepper/src/stepper-trigger.directive.ts b/packages/primitives/stepper/src/stepper-trigger.directive.ts
index aceef7c33..35eced580 100644
--- a/packages/primitives/stepper/src/stepper-trigger.directive.ts
+++ b/packages/primitives/stepper/src/stepper-trigger.directive.ts
@@ -1,8 +1,8 @@
+import { injectStepperItemContext } from './stepper-item-context.token';
+import { injectStepperRootContext } from './stepper-root-context.token';
 import { computed, DestroyRef, Directive, ElementRef, inject } from '@angular/core';
 import * as kbd from '@radix-ng/primitives/core';
 import { getActiveElement, useArrowNavigation } from '@radix-ng/primitives/core';
-import { injectStepperItemContext } from './stepper-item-context.token';
-import { injectStepperRootContext } from './stepper-root-context.token';
 
 // as button
 @Directive({
diff --git a/packages/primitives/stepper/stories/stepper-navigation.component.ts b/packages/primitives/stepper/stories/stepper-navigation.component.ts
index 2d9d5f621..f980cb77c 100644
--- a/packages/primitives/stepper/stories/stepper-navigation.component.ts
+++ b/packages/primitives/stepper/stories/stepper-navigation.component.ts
@@ -1,10 +1,10 @@
+import { RdxStepperModule } from '../index';
 import { ChangeDetectionStrategy, Component, computed, signal } from '@angular/core';
 import {
     LucideChevronLeft as ChevronLeft,
     LucideChevronRight as ChevronRight,
     LucideDynamicIcon
 } from '@lucide/angular';
-import { RdxStepperModule } from '../index';
 
 @Component({
     changeDetection: ChangeDetectionStrategy.Eager,
@@ -18,19 +18,19 @@ import { RdxStepperModule } from '../index';
             <div class="flex w-full items-center gap-2">
                 <button
                     class="border-border bg-background text-foreground hover:bg-muted flex h-8 w-10 shrink-0 cursor-pointer items-center justify-center rounded-md border shadow-sm focus-visible:[box-shadow:inset_0_0_0_2px_var(--ring)] disabled:cursor-not-allowed disabled:opacity-50"
+                    aria-label="Prev step"
                     [disabled]="isFirstStep()"
                     (click)="prevStep()"
-                    aria-label="Prev step"
                 >
-                    <svg class="flex" [lucideIcon]="ChevronLeft" size="16" strokeWidth="2" aria-hidden="true" />
+                    <svg class="flex" size="16" strokeWidth="2" aria-hidden="true" [lucideIcon]="ChevronLeft" />
                 </button>
 
-                <div class="flex min-w-0 flex-1 gap-1" [value]="currentStep()" rdxStepperRoot>
+                <div class="flex min-w-0 flex-1 gap-1" rdxStepperRoot [value]="currentStep()">
                     @for (item of steps; track $index) {
                         <div
                             class="group relative flex min-w-0 flex-1 flex-col items-center"
-                            [step]="item"
                             rdxStepperItem
+                            [step]="item"
                         >
                             <button
                                 class="flex w-full flex-col items-start gap-2 rounded-full focus-visible:[box-shadow:inset_0_0_0_2px_var(--ring)]"
@@ -49,11 +49,11 @@ import { RdxStepperModule } from '../index';
 
                 <button
                     class="border-border bg-background text-foreground hover:bg-muted flex h-8 w-10 shrink-0 cursor-pointer items-center justify-center rounded-md border shadow-sm focus-visible:[box-shadow:inset_0_0_0_2px_var(--ring)] disabled:cursor-not-allowed disabled:opacity-50"
+                    aria-label="Next step"
                     [disabled]="isLastStep()"
                     (click)="nextStep()"
-                    aria-label="Next step"
                 >
-                    <svg class="flex" [lucideIcon]="ChevronRight" size="16" strokeWidth="2" aria-hidden="true" />
+                    <svg class="flex" size="16" strokeWidth="2" aria-hidden="true" [lucideIcon]="ChevronRight" />
                 </button>
             </div>
 
diff --git a/packages/primitives/stepper/stories/stepper.stories.ts b/packages/primitives/stepper/stories/stepper.stories.ts
index 06472ff09..c65911aee 100644
--- a/packages/primitives/stepper/stories/stepper.stories.ts
+++ b/packages/primitives/stepper/stories/stepper.stories.ts
@@ -1,4 +1,3 @@
-import { Meta, moduleMetadata, StoryObj } from '@storybook/angular';
 import { tailwindDemoDecorator } from '../../storybook/tailwind-demo';
 import { RdxStepperIndicatorDirective } from '../src/stepper-indicator.directive';
 import { RdxStepperItemDirective } from '../src/stepper-item.directive';
@@ -6,6 +5,7 @@ import { RdxStepperRootDirective } from '../src/stepper-root.directive';
 import { RdxStepperSeparatorDirective } from '../src/stepper-separator.directive';
 import { RdxStepperTriggerDirective } from '../src/stepper-trigger.directive';
 import { StepperNavigationComponent } from './stepper-navigation.component';
+import { Meta, moduleMetadata, StoryObj } from '@storybook/angular';
 
 export default {
     title: 'Primitives/Stepper',
diff --git a/packages/primitives/switch/__tests__/switch.spec.ts b/packages/primitives/switch/__tests__/switch.spec.ts
index c108e1fde..06e802dcb 100644
--- a/packages/primitives/switch/__tests__/switch.spec.ts
+++ b/packages/primitives/switch/__tests__/switch.spec.ts
@@ -1,24 +1,24 @@
+import { RdxSwitchInput } from '../src/switch-input';
+import { RdxSwitchCheckedChangeEvent, RdxSwitchRoot } from '../src/switch-root';
+import { RdxSwitchThumb } from '../src/switch-thumb';
 import { ChangeDetectionStrategy, Component, inject, signal } from '@angular/core';
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { FormBuilder, FormControl, FormGroup, ReactiveFormsModule, Validators } from '@angular/forms';
 import { form, FormField } from '@angular/forms/signals';
 import { By } from '@angular/platform-browser';
 import { vi } from 'vitest';
-import { RdxSwitchInput } from '../src/switch-input';
-import { RdxSwitchCheckedChangeEvent, RdxSwitchRoot } from '../src/switch-root';
-import { RdxSwitchThumb } from '../src/switch-thumb';
 
 @Component({
     changeDetection: ChangeDetectionStrategy.Eager,
     imports: [RdxSwitchRoot, RdxSwitchThumb, RdxSwitchInput],
     template: `
         <button
-            [(checked)]="checked"
+            rdxSwitchRoot
             [disabled]="disabled()"
             [readonly]="readonly()"
             [required]="required()"
+            [(checked)]="checked"
             (onCheckedChange)="onChange($event)"
-            rdxSwitchRoot
         >
             <input rdxSwitchInput />
             <span rdxSwitchThumb></span>
@@ -229,7 +229,7 @@ describe('RdxSwitch with ReactiveForms', () => {
     changeDetection: ChangeDetectionStrategy.Eager,
     imports: [RdxSwitchRoot, RdxSwitchInput, RdxSwitchThumb],
     template: `
-        <button [value]="'enabled'" name="airplane" rdxSwitchRoot>
+        <button name="airplane" rdxSwitchRoot [value]="'enabled'">
             <input rdxSwitchInput />
             <span rdxSwitchThumb></span>
         </button>
@@ -263,7 +263,7 @@ describe('RdxSwitch submit value (`value` alias)', () => {
     changeDetection: ChangeDetectionStrategy.Eager,
     imports: [RdxSwitchRoot, RdxSwitchInput, RdxSwitchThumb],
     template: `
-        <button [invalid]="invalid()" [errors]="errors()" rdxSwitchRoot>
+        <button rdxSwitchRoot [invalid]="invalid()" [errors]="errors()">
             <input rdxSwitchInput />
             <span rdxSwitchThumb></span>
         </button>
@@ -326,7 +326,7 @@ describe('RdxSwitch validation state (batch #4)', () => {
     changeDetection: ChangeDetectionStrategy.Eager,
     imports: [FormField, RdxSwitchRoot, RdxSwitchInput, RdxSwitchThumb],
     template: `
-        <button [formField]="enabled" rdxSwitchRoot>
+        <button rdxSwitchRoot [formField]="enabled">
             <input rdxSwitchInput />
             <span rdxSwitchThumb></span>
         </button>
diff --git a/packages/primitives/switch/index.ts b/packages/primitives/switch/index.ts
index b39c6a61c..c60671330 100644
--- a/packages/primitives/switch/index.ts
+++ b/packages/primitives/switch/index.ts
@@ -1,7 +1,7 @@
-import { NgModule } from '@angular/core';
 import { RdxSwitchInput } from './src/switch-input';
 import { RdxSwitchRoot } from './src/switch-root';
 import { RdxSwitchThumb } from './src/switch-thumb';
+import { NgModule } from '@angular/core';
 
 export * from './src/switch-context';
 export * from './src/switch-input';
diff --git a/packages/primitives/switch/src/switch-input.ts b/packages/primitives/switch/src/switch-input.ts
index a38b3d662..b3ae11657 100644
--- a/packages/primitives/switch/src/switch-input.ts
+++ b/packages/primitives/switch/src/switch-input.ts
@@ -1,5 +1,5 @@
-import { Directive } from '@angular/core';
 import { injectSwitchContext } from './switch-context';
+import { Directive } from '@angular/core';
 
 /**
  * The hidden native checkbox that mirrors the switch state for form submission and screen readers.
diff --git a/packages/primitives/switch/src/switch-root.ts b/packages/primitives/switch/src/switch-root.ts
index 10c4ecf54..9b0520a2c 100644
--- a/packages/primitives/switch/src/switch-root.ts
+++ b/packages/primitives/switch/src/switch-root.ts
@@ -1,3 +1,4 @@
+import { provideSwitchContext, RdxSwitchContext } from './switch-context';
 import { booleanAttribute, computed, Directive, effect, inject, input, model, output } from '@angular/core';
 import {
     BooleanInput,
@@ -10,7 +11,6 @@ import {
     RdxFormUiControlBase,
     RdxFormUiTouchTarget
 } from '@radix-ng/primitives/core';
-import { provideSwitchContext, RdxSwitchContext } from './switch-context';
 
 export type RdxSwitchCheckedChangeReason = 'none';
 export type RdxSwitchCheckedChangeEventDetails = RdxCancelableChangeEventDetails<RdxSwitchCheckedChangeReason>;
diff --git a/packages/primitives/switch/src/switch-thumb.ts b/packages/primitives/switch/src/switch-thumb.ts
index 7f13eeb04..a4b9afa3b 100644
--- a/packages/primitives/switch/src/switch-thumb.ts
+++ b/packages/primitives/switch/src/switch-thumb.ts
@@ -1,5 +1,5 @@
-import { Directive } from '@angular/core';
 import { injectSwitchContext } from './switch-context';
+import { Directive } from '@angular/core';
 
 /**
  * The moving part of the switch that indicates whether it is on or off.
diff --git a/packages/primitives/switch/stories/switch-preselection.ts b/packages/primitives/switch/stories/switch-preselection.ts
index a998427b5..db56b4b8e 100644
--- a/packages/primitives/switch/stories/switch-preselection.ts
+++ b/packages/primitives/switch/stories/switch-preselection.ts
@@ -16,8 +16,8 @@ import { RdxSwitchInput, RdxSwitchRoot, RdxSwitchThumb } from '@radix-ng/primiti
             <button
                 class="bg-muted data-[checked]:bg-primary focus-visible:ring-ring relative inline-flex h-6 w-11 shrink-0 cursor-pointer items-center rounded-full border-0 p-0 shadow-sm transition-colors outline-none focus-visible:ring-2 disabled:cursor-not-allowed disabled:opacity-50"
                 id="airplane-mode-model"
-                [(checked)]="checked"
                 rdxSwitchRoot
+                [(checked)]="checked"
             >
                 <input rdxSwitchInput />
                 <span
diff --git a/packages/primitives/switch/stories/switch-reactive-forms.ts b/packages/primitives/switch/stories/switch-reactive-forms.ts
index b1c30a135..f0b92ce26 100644
--- a/packages/primitives/switch/stories/switch-reactive-forms.ts
+++ b/packages/primitives/switch/stories/switch-reactive-forms.ts
@@ -38,8 +38,8 @@ import { RdxSwitchInput, RdxSwitchRoot, RdxSwitchThumb } from '@radix-ng/primiti
         <p class="mt-3">
             <button
                 class="border-border bg-background text-foreground focus-visible:ring-ring inline-flex h-9 items-center rounded-md border px-3 text-sm font-medium shadow-sm outline-none focus-visible:ring-2"
-                (click)="setValue()"
                 type="button"
+                (click)="setValue()"
             >
                 Set preset value
             </button>
diff --git a/packages/primitives/switch/stories/switch.stories.ts b/packages/primitives/switch/stories/switch.stories.ts
index 89b646b28..da0f29e3e 100644
--- a/packages/primitives/switch/stories/switch.stories.ts
+++ b/packages/primitives/switch/stories/switch.stories.ts
@@ -1,4 +1,3 @@
-import { Meta, moduleMetadata, StoryObj } from '@storybook/angular';
 import { tailwindDemoDecorator } from '../../storybook/tailwind-demo';
 import { SwitchDefaultExample } from './switch-default';
 import defaultSource from './switch-default?raw';
@@ -10,6 +9,7 @@ import { SwitchReactiveForms } from './switch-reactive-forms';
 import formsSource from './switch-reactive-forms?raw';
 import { SwitchReadonlyExample } from './switch-readonly';
 import readonlySource from './switch-readonly?raw';
+import { Meta, moduleMetadata, StoryObj } from '@storybook/angular';
 
 const html = String.raw;
 
diff --git a/packages/primitives/tabs/__tests__/tabs.spec.ts b/packages/primitives/tabs/__tests__/tabs.spec.ts
index 3d7fed8b5..eed55f782 100644
--- a/packages/primitives/tabs/__tests__/tabs.spec.ts
+++ b/packages/primitives/tabs/__tests__/tabs.spec.ts
@@ -1,26 +1,26 @@
-import { ChangeDetectionStrategy, Component, signal } from '@angular/core';
-import { ComponentFixture, TestBed } from '@angular/core/testing';
-import { DataOrientation } from '@radix-ng/primitives/core';
 import { RdxTabsList } from '../src/tabs-list';
 import { RdxTabsPanel } from '../src/tabs-panel';
 import { RdxTabsPanelPresence } from '../src/tabs-panel-presence';
 import { RdxTabsRoot, RdxTabsValueChangeEvent } from '../src/tabs-root';
 import { RdxTabsTab } from '../src/tabs-tab';
 import { RdxTabsValue } from '../src/utils';
+import { ChangeDetectionStrategy, Component, signal } from '@angular/core';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { DataOrientation } from '@radix-ng/primitives/core';
 
 @Component({
     changeDetection: ChangeDetectionStrategy.Eager,
     template: `
         <div
-            [(value)]="value"
+            rdxTabsRoot
             [defaultValue]="defaultValue"
             [orientation]="orientation()"
+            [(value)]="value"
             (onValueChange)="onValueChange($event)"
-            rdxTabsRoot
         >
-            <div [activateOnFocus]="activateOnFocus()" [loopFocus]="loopFocus()" rdxTabsList>
+            <div rdxTabsList [activateOnFocus]="activateOnFocus()" [loopFocus]="loopFocus()">
                 <button rdxTabsTab value="one">One</button>
-                <button [disabled]="disabledTwo()" rdxTabsTab value="two">Two</button>
+                <button rdxTabsTab value="two" [disabled]="disabledTwo()">Two</button>
                 <button rdxTabsTab value="three">Three</button>
             </div>
             <div rdxTabsPanel value="one">Panel one</div>
@@ -283,13 +283,13 @@ describe('Tabs', () => {
 @Component({
     changeDetection: ChangeDetectionStrategy.Eager,
     template: `
-        <div (onValueChange)="onValueChange($event)" rdxTabsRoot>
+        <div rdxTabsRoot (onValueChange)="onValueChange($event)">
             <div rdxTabsList>
-                <button [disabled]="firstDisabled()" [value]="0" rdxTabsTab>Zero</button>
-                <button [value]="1" rdxTabsTab>One</button>
+                <button rdxTabsTab [disabled]="firstDisabled()" [value]="0">Zero</button>
+                <button rdxTabsTab [value]="1">One</button>
             </div>
-            <div [value]="0" rdxTabsPanel>Panel zero</div>
-            <div [value]="1" rdxTabsPanel>Panel one</div>
+            <div rdxTabsPanel [value]="0">Panel zero</div>
+            <div rdxTabsPanel [value]="1">Panel one</div>
         </div>
     `,
     imports: [RdxTabsRoot, RdxTabsList, RdxTabsTab, RdxTabsPanel]
@@ -369,16 +369,16 @@ describe('Tabs implicit defaultValue', () => {
 @Component({
     changeDetection: ChangeDetectionStrategy.Eager,
     template: `
-        <div [(value)]="value" defaultValue="one" rdxTabsRoot>
+        <div defaultValue="one" rdxTabsRoot [(value)]="value">
             <div rdxTabsList>
                 <button rdxTabsTab value="one">One</button>
                 <button rdxTabsTab value="two">Two</button>
             </div>
-            <div [keepMounted]="keepMounted()" rdxTabsPanel value="one">
-                <p class="content-one" *rdxTabsPanelPresence>Panel one</p>
+            <div rdxTabsPanel value="one" [keepMounted]="keepMounted()">
+                <p *rdxTabsPanelPresence class="content-one">Panel one</p>
             </div>
-            <div [keepMounted]="keepMounted()" rdxTabsPanel value="two">
-                <p class="content-two" *rdxTabsPanelPresence>Panel two</p>
+            <div rdxTabsPanel value="two" [keepMounted]="keepMounted()">
+                <p *rdxTabsPanelPresence class="content-two">Panel two</p>
             </div>
         </div>
     `,
diff --git a/packages/primitives/tabs/index.ts b/packages/primitives/tabs/index.ts
index 1b5171ff3..0461b0028 100644
--- a/packages/primitives/tabs/index.ts
+++ b/packages/primitives/tabs/index.ts
@@ -1,10 +1,10 @@
-import { NgModule } from '@angular/core';
 import { RdxTabsIndicator } from './src/tabs-indicator';
 import { RdxTabsList } from './src/tabs-list';
 import { RdxTabsPanel } from './src/tabs-panel';
 import { RdxTabsPanelPresence } from './src/tabs-panel-presence';
 import { RdxTabsRoot } from './src/tabs-root';
 import { RdxTabsTab } from './src/tabs-tab';
+import { NgModule } from '@angular/core';
 
 export * from './src/tabs-indicator';
 export * from './src/tabs-list';
diff --git a/packages/primitives/tabs/src/tabs-indicator.ts b/packages/primitives/tabs/src/tabs-indicator.ts
index bdf638d44..fda082a2b 100644
--- a/packages/primitives/tabs/src/tabs-indicator.ts
+++ b/packages/primitives/tabs/src/tabs-indicator.ts
@@ -1,6 +1,6 @@
-import { afterNextRender, DestroyRef, Directive, effect, inject, signal, untracked } from '@angular/core';
 import { injectTabsRootContext } from './tabs-root-context';
 import { makeTabId } from './utils';
+import { afterNextRender, DestroyRef, Directive, effect, inject, signal, untracked } from '@angular/core';
 
 interface TabGeometry {
     top: number;
diff --git a/packages/primitives/tabs/src/tabs-list.ts b/packages/primitives/tabs/src/tabs-list.ts
index 80091847a..31e039aa6 100644
--- a/packages/primitives/tabs/src/tabs-list.ts
+++ b/packages/primitives/tabs/src/tabs-list.ts
@@ -1,7 +1,7 @@
-import { booleanAttribute, computed, Directive, effect, ElementRef, inject, input } from '@angular/core';
-import { RdxCompositeMetadata, RdxCompositeRoot } from '@radix-ng/primitives/composite';
 import { injectTabsRootContext } from './tabs-root-context';
 import { RdxTabsTabMetadata } from './utils';
+import { booleanAttribute, computed, Directive, effect, ElementRef, inject, input } from '@angular/core';
+import { RdxCompositeMetadata, RdxCompositeRoot } from '@radix-ng/primitives/composite';
 
 /**
  * Groups the individual tab buttons and manages keyboard navigation.
diff --git a/packages/primitives/tabs/src/tabs-panel-presence.ts b/packages/primitives/tabs/src/tabs-panel-presence.ts
index 02ba3951f..a94f0aefe 100644
--- a/packages/primitives/tabs/src/tabs-panel-presence.ts
+++ b/packages/primitives/tabs/src/tabs-panel-presence.ts
@@ -1,6 +1,6 @@
+import { RdxTabsPanel } from './tabs-panel';
 import { Directive, inject } from '@angular/core';
 import { RdxPresenceDirective } from '@radix-ng/primitives/presence';
-import { RdxTabsPanel } from './tabs-panel';
 
 /**
  * Structural directive that mounts the tab panel contents only while the panel is active,
diff --git a/packages/primitives/tabs/src/tabs-panel.ts b/packages/primitives/tabs/src/tabs-panel.ts
index 627838066..ef37e16d6 100644
--- a/packages/primitives/tabs/src/tabs-panel.ts
+++ b/packages/primitives/tabs/src/tabs-panel.ts
@@ -1,3 +1,5 @@
+import { injectTabsRootContext } from './tabs-root-context';
+import { makePanelId, makeTabId, RdxTabsValue } from './utils';
 import {
     booleanAttribute,
     computed,
@@ -13,8 +15,6 @@ import {
 import { RdxCompositeListItem } from '@radix-ng/primitives/composite';
 import { useTransitionStatus } from '@radix-ng/primitives/core';
 import { provideRdxPresenceContext } from '@radix-ng/primitives/presence';
-import { injectTabsRootContext } from './tabs-root-context';
-import { makePanelId, makeTabId, RdxTabsValue } from './utils';
 
 const panelPresenceContext = () => ({ present: inject(RdxTabsPanel).present });
 
diff --git a/packages/primitives/tabs/src/tabs-root-context.ts b/packages/primitives/tabs/src/tabs-root-context.ts
index a16e33d4c..15078da61 100644
--- a/packages/primitives/tabs/src/tabs-root-context.ts
+++ b/packages/primitives/tabs/src/tabs-root-context.ts
@@ -1,8 +1,8 @@
+import type { RdxTabsValueChangeReason } from './tabs-root';
+import { RdxTabsActivationDirection, RdxTabsTabMetadata, RdxTabsValue } from './utils';
 import { Signal } from '@angular/core';
 import { RdxCompositeMetadata } from '@radix-ng/primitives/composite';
 import { createContext, DataOrientation } from '@radix-ng/primitives/core';
-import type { RdxTabsValueChangeReason } from './tabs-root';
-import { RdxTabsActivationDirection, RdxTabsTabMetadata, RdxTabsValue } from './utils';
 
 export interface RdxTabsRootContext {
     /** Stable id used to derive tab / panel ids. */
diff --git a/packages/primitives/tabs/src/tabs-root.ts b/packages/primitives/tabs/src/tabs-root.ts
index 1edc7cacb..e1445c90c 100644
--- a/packages/primitives/tabs/src/tabs-root.ts
+++ b/packages/primitives/tabs/src/tabs-root.ts
@@ -1,3 +1,5 @@
+import { provideTabsRootContext, RdxTabsRootContext } from './tabs-root-context';
+import { RdxTabsActivationDirection, RdxTabsTabMetadata, RdxTabsValue } from './utils';
 import { Directive, effect, inject, input, model, output, signal, untracked } from '@angular/core';
 import { RdxCompositeList, RdxCompositeMetadata } from '@radix-ng/primitives/composite';
 import {
@@ -6,8 +8,6 @@ import {
     injectId,
     RdxCancelableChangeEventDetails
 } from '@radix-ng/primitives/core';
-import { provideTabsRootContext, RdxTabsRootContext } from './tabs-root-context';
-import { RdxTabsActivationDirection, RdxTabsTabMetadata, RdxTabsValue } from './utils';
 
 export type RdxTabsValueChangeReason = 'none' | 'disabled' | 'missing' | 'initial';
 export type RdxTabsValueChangeEventDetails = RdxCancelableChangeEventDetails<RdxTabsValueChangeReason> & {
diff --git a/packages/primitives/tabs/src/tabs-tab.ts b/packages/primitives/tabs/src/tabs-tab.ts
index e35ff9579..09d2bbbf3 100644
--- a/packages/primitives/tabs/src/tabs-tab.ts
+++ b/packages/primitives/tabs/src/tabs-tab.ts
@@ -1,8 +1,8 @@
+import { injectTabsRootContext } from './tabs-root-context';
+import { makePanelId, makeTabId, RdxTabsValue } from './utils';
 import { booleanAttribute, computed, Directive, effect, inject, input } from '@angular/core';
 import { RdxCompositeItem } from '@radix-ng/primitives/composite';
 import { BooleanInput } from '@radix-ng/primitives/core';
-import { injectTabsRootContext } from './tabs-root-context';
-import { makePanelId, makeTabId, RdxTabsValue } from './utils';
 
 /**
  * An individual interactive tab button that activates its corresponding panel.
diff --git a/packages/primitives/tabs/stories/tabs-keyframes.ts b/packages/primitives/tabs/stories/tabs-keyframes.ts
index ea2fb6a20..cc9c6f91a 100644
--- a/packages/primitives/tabs/stories/tabs-keyframes.ts
+++ b/packages/primitives/tabs/stories/tabs-keyframes.ts
@@ -34,16 +34,16 @@ import { RdxTabsList, RdxTabsPanel, RdxTabsPanelPresence, RdxTabsRoot, RdxTabsTa
             <div class="grid">
                 <div class="group col-start-1 row-start-1" rdxTabsPanel value="account">
                     <div
-                        class="bg-background text-foreground animate-tabs-panel-in group-data-[hidden]:animate-tabs-panel-out p-6 text-sm leading-6 outline-none"
                         *rdxTabsPanelPresence
+                        class="bg-background text-foreground animate-tabs-panel-in group-data-[hidden]:animate-tabs-panel-out p-6 text-sm leading-6 outline-none"
                     >
                         Make changes to your account here. Click save when you're done.
                     </div>
                 </div>
                 <div class="group col-start-1 row-start-1" rdxTabsPanel value="password">
                     <div
-                        class="bg-background text-foreground animate-tabs-panel-in group-data-[hidden]:animate-tabs-panel-out p-6 text-sm leading-6 outline-none"
                         *rdxTabsPanelPresence
+                        class="bg-background text-foreground animate-tabs-panel-in group-data-[hidden]:animate-tabs-panel-out p-6 text-sm leading-6 outline-none"
                     >
                         Change your password here. After saving, you'll be logged out.
                     </div>
diff --git a/packages/primitives/tabs/stories/tabs.stories.ts b/packages/primitives/tabs/stories/tabs.stories.ts
index 9b74fae31..d76f2b6ca 100644
--- a/packages/primitives/tabs/stories/tabs.stories.ts
+++ b/packages/primitives/tabs/stories/tabs.stories.ts
@@ -1,3 +1,10 @@
+import { tailwindDemoDecorator } from '../../storybook/tailwind-demo';
+import { TabsAnimatedExample } from './tabs-animated';
+import animatedSource from './tabs-animated?raw';
+import { TabsIndicatorExample } from './tabs-indicator';
+import indicatorSource from './tabs-indicator?raw';
+import { TabsKeyframesExample } from './tabs-keyframes';
+import keyframesSource from './tabs-keyframes?raw';
 import {
     RdxTabsIndicator,
     RdxTabsList,
@@ -7,13 +14,6 @@ import {
     RdxTabsTab
 } from '@radix-ng/primitives/tabs';
 import { Meta, moduleMetadata, StoryObj } from '@storybook/angular';
-import { tailwindDemoDecorator } from '../../storybook/tailwind-demo';
-import { TabsAnimatedExample } from './tabs-animated';
-import animatedSource from './tabs-animated?raw';
-import { TabsIndicatorExample } from './tabs-indicator';
-import indicatorSource from './tabs-indicator?raw';
-import { TabsKeyframesExample } from './tabs-keyframes';
-import keyframesSource from './tabs-keyframes?raw';
 
 const html = String.raw;
 
diff --git a/packages/primitives/test-setup.ts b/packages/primitives/test-setup.ts
index be26c7ad7..c3449d8c1 100644
--- a/packages/primitives/test-setup.ts
+++ b/packages/primitives/test-setup.ts
@@ -1,8 +1,8 @@
 import '@angular/compiler';
+import '@testing-library/jest-dom/vitest';
 import { NgModule, provideZonelessChangeDetection } from '@angular/core';
 import { getTestBed } from '@angular/core/testing';
 import { BrowserTestingModule, platformBrowserTesting } from '@angular/platform-browser/testing';
-import '@testing-library/jest-dom/vitest';
 import { toHaveNoViolations } from 'jest-axe';
 import { describe, expect, it } from 'vitest';
 
diff --git a/packages/primitives/time-field/__tests__/time-field.spec.ts b/packages/primitives/time-field/__tests__/time-field.spec.ts
index fb5f1d3a7..5c91dcc2e 100644
--- a/packages/primitives/time-field/__tests__/time-field.spec.ts
+++ b/packages/primitives/time-field/__tests__/time-field.spec.ts
@@ -1,25 +1,25 @@
+import { RdxTimeFieldInputDirective } from '../src/time-field-input.directive';
+import { RdxTimeFieldRootDirective } from '../src/time-field-root.directive';
 import { ChangeDetectionStrategy, Component, signal } from '@angular/core';
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { form, FormField } from '@angular/forms/signals';
 import { By } from '@angular/platform-browser';
 import { Time } from '@internationalized/date';
 import { Granularity, HourCycle, TimeValue } from '@radix-ng/primitives/core';
-import { RdxTimeFieldInputDirective } from '../src/time-field-input.directive';
-import { RdxTimeFieldRootDirective } from '../src/time-field-root.directive';
 
 @Component({
     changeDetection: ChangeDetectionStrategy.Eager,
     template: `
         <div
             #root="rdxTimeFieldRoot"
-            [(value)]="value"
+            rdxTimeFieldRoot
             [granularity]="granularity()"
             [hourCycle]="hourCycle()"
             [placeholder]="placeholder()"
-            rdxTimeFieldRoot
+            [(value)]="value"
         >
             @for (item of root.segmentContents(); track $index) {
-                <div [part]="item.part" rdxTimeFieldInput>{{ item.value }}</div>
+                <div rdxTimeFieldInput [part]="item.part">{{ item.value }}</div>
             }
         </div>
     `,
@@ -216,14 +216,14 @@ describe('Time Field', () => {
     template: `
         <div
             #root="rdxTimeFieldRoot"
+            rdxTimeFieldRoot
             [value]="value()"
             [invalid]="invalid()"
             [errors]="errors()"
             [dirty]="dirty()"
-            rdxTimeFieldRoot
         >
             @for (item of root.segmentContents(); track $index) {
-                <div [part]="item.part" rdxTimeFieldInput>{{ item.value }}</div>
+                <div rdxTimeFieldInput [part]="item.part">{{ item.value }}</div>
             }
         </div>
     `,
@@ -287,9 +287,9 @@ describe('RdxTimeField validation state', () => {
 @Component({
     changeDetection: ChangeDetectionStrategy.Eager,
     template: `
-        <div #root="rdxTimeFieldRoot" [formField]="time" rdxTimeFieldRoot>
+        <div #root="rdxTimeFieldRoot" rdxTimeFieldRoot [formField]="time">
             @for (item of root.segmentContents(); track $index) {
-                <div [part]="item.part" rdxTimeFieldInput>{{ item.value }}</div>
+                <div rdxTimeFieldInput [part]="item.part">{{ item.value }}</div>
             }
         </div>
     `,
diff --git a/packages/primitives/time-field/index.ts b/packages/primitives/time-field/index.ts
index 1bba52965..852a3ac56 100644
--- a/packages/primitives/time-field/index.ts
+++ b/packages/primitives/time-field/index.ts
@@ -1,6 +1,6 @@
-import { NgModule } from '@angular/core';
 import { RdxTimeFieldInputDirective } from './src/time-field-input.directive';
 import { RdxTimeFieldRootDirective } from './src/time-field-root.directive';
+import { NgModule } from '@angular/core';
 
 export * from './src/time-field-context.token';
 export * from './src/time-field-input.directive';
diff --git a/packages/primitives/time-field/src/time-field-input.directive.ts b/packages/primitives/time-field/src/time-field-input.directive.ts
index 1982912f4..5c340b373 100644
--- a/packages/primitives/time-field/src/time-field-input.directive.ts
+++ b/packages/primitives/time-field/src/time-field-input.directive.ts
@@ -1,7 +1,7 @@
+import { injectTimeFieldsRootContext } from './time-field-context.token';
 import { computed, Directive, effect, ElementRef, inject, input, signal, WritableSignal } from '@angular/core';
 import { DateValue } from '@internationalized/date';
 import { SegmentPart, useDateField } from '@radix-ng/primitives/core';
-import { injectTimeFieldsRootContext } from './time-field-context.token';
 
 @Directive({
     selector: '[rdxTimeFieldInput]',
diff --git a/packages/primitives/time-field/src/time-field-root.directive.ts b/packages/primitives/time-field/src/time-field-root.directive.ts
index f084f48ff..f97e72c6f 100644
--- a/packages/primitives/time-field/src/time-field-root.directive.ts
+++ b/packages/primitives/time-field/src/time-field-root.directive.ts
@@ -1,3 +1,5 @@
+import { TIME_FIELDS_ROOT_CONTEXT } from './time-field-context.token';
+import { RdxTimeFieldInputDirective } from './time-field-input.directive';
 import {
     booleanAttribute,
     computed,
@@ -37,8 +39,6 @@ import {
     watch
 } from '@radix-ng/primitives/core';
 import { injectDirection } from '@radix-ng/primitives/direction-provider';
-import { TIME_FIELDS_ROOT_CONTEXT } from './time-field-context.token';
-import { RdxTimeFieldInputDirective } from './time-field-input.directive';
 
 function convertValue(value: TimeValue, date: DateValue = today(getLocalTimeZone())) {
     if (value && 'day' in value) {
diff --git a/packages/primitives/time-field/stories/time-field-default.ts b/packages/primitives/time-field/stories/time-field-default.ts
index 50da9fded..59db0ba17 100644
--- a/packages/primitives/time-field/stories/time-field-default.ts
+++ b/packages/primitives/time-field/stories/time-field-default.ts
@@ -10,27 +10,27 @@ import { RdxVisuallyHiddenInputDirective } from '@radix-ng/primitives/visually-h
         <div class="flex flex-col gap-1.5">
             <label class="text-foreground text-sm font-medium" id="time-default-label">Time</label>
             <div
-                class="border-border bg-background text-foreground focus-within:ring-ring data-[invalid]:border-destructive inline-flex w-fit items-center rounded-md border px-3 py-2 text-sm shadow-sm select-none focus-within:ring-2 data-[disabled]:cursor-not-allowed data-[disabled]:opacity-50"
                 #root="rdxTimeFieldRoot"
+                class="border-border bg-background text-foreground focus-within:ring-ring data-[invalid]:border-destructive inline-flex w-fit items-center rounded-md border px-3 py-2 text-sm shadow-sm select-none focus-within:ring-2 data-[disabled]:cursor-not-allowed data-[disabled]:opacity-50"
                 aria-labelledby="time-default-label"
                 rdxTimeFieldRoot
             >
                 @for (item of root.segmentContents(); track $index) {
                     @if (item.part === 'literal') {
-                        <span class="text-muted-foreground px-px" [part]="item.part" rdxTimeFieldInput>
+                        <span class="text-muted-foreground px-px" rdxTimeFieldInput [part]="item.part">
                             {{ item.value }}
                         </span>
                     } @else {
                         <div
                             class="data-[placeholder]:text-muted-foreground hover:bg-muted focus:bg-primary focus:text-primary-foreground rounded px-0.5 tabular-nums outline-none"
-                            [part]="item.part"
                             rdxTimeFieldInput
+                            [part]="item.part"
                         >
                             {{ item.value }}
                         </div>
                     }
                 }
-                <input [value]="root.value()" rdxVisuallyHiddenInput feature="focusable" />
+                <input rdxVisuallyHiddenInput feature="focusable" [value]="root.value()" />
             </div>
         </div>
     `
diff --git a/packages/primitives/time-field/stories/time-field-disabled.ts b/packages/primitives/time-field/stories/time-field-disabled.ts
index ffc6280ba..d331f0127 100644
--- a/packages/primitives/time-field/stories/time-field-disabled.ts
+++ b/packages/primitives/time-field/stories/time-field-disabled.ts
@@ -11,29 +11,29 @@ import { RdxVisuallyHiddenInputDirective } from '@radix-ng/primitives/visually-h
         <div class="flex flex-col gap-1.5">
             <label class="text-foreground text-sm font-medium" id="time-disabled-label">Time</label>
             <div
-                class="border-border bg-background text-foreground inline-flex w-fit items-center rounded-md border px-3 py-2 text-sm shadow-sm select-none data-[disabled]:cursor-not-allowed data-[disabled]:opacity-50"
                 #root="rdxTimeFieldRoot"
-                [value]="value"
+                class="border-border bg-background text-foreground inline-flex w-fit items-center rounded-md border px-3 py-2 text-sm shadow-sm select-none data-[disabled]:cursor-not-allowed data-[disabled]:opacity-50"
                 aria-labelledby="time-disabled-label"
                 disabled
                 rdxTimeFieldRoot
+                [value]="value"
             >
                 @for (item of root.segmentContents(); track $index) {
                     @if (item.part === 'literal') {
-                        <span class="text-muted-foreground px-px" [part]="item.part" rdxTimeFieldInput>
+                        <span class="text-muted-foreground px-px" rdxTimeFieldInput [part]="item.part">
                             {{ item.value }}
                         </span>
                     } @else {
                         <div
                             class="data-[placeholder]:text-muted-foreground rounded px-0.5 tabular-nums outline-none"
-                            [part]="item.part"
                             rdxTimeFieldInput
+                            [part]="item.part"
                         >
                             {{ item.value }}
                         </div>
                     }
                 }
-                <input [value]="root.value()" rdxVisuallyHiddenInput feature="focusable" />
+                <input rdxVisuallyHiddenInput feature="focusable" [value]="root.value()" />
             </div>
         </div>
     `
diff --git a/packages/primitives/time-field/stories/time-field-granularity.ts b/packages/primitives/time-field/stories/time-field-granularity.ts
index 500ffcd11..02fb8e2a8 100644
--- a/packages/primitives/time-field/stories/time-field-granularity.ts
+++ b/packages/primitives/time-field/stories/time-field-granularity.ts
@@ -15,28 +15,28 @@ import { RdxVisuallyHiddenInputDirective } from '@radix-ng/primitives/visually-h
                         {{ granularity }}
                     </label>
                     <div
-                        class="border-border bg-background text-foreground focus-within:ring-ring inline-flex w-fit items-center rounded-md border px-3 py-2 text-sm shadow-sm select-none focus-within:ring-2"
                         #root="rdxTimeFieldRoot"
+                        class="border-border bg-background text-foreground focus-within:ring-ring inline-flex w-fit items-center rounded-md border px-3 py-2 text-sm shadow-sm select-none focus-within:ring-2"
+                        rdxTimeFieldRoot
                         [granularity]="granularity"
                         [attr.aria-labelledby]="granularity + '-label'"
-                        rdxTimeFieldRoot
                     >
                         @for (item of root.segmentContents(); track $index) {
                             @if (item.part === 'literal') {
-                                <span class="text-muted-foreground px-px" [part]="item.part" rdxTimeFieldInput>
+                                <span class="text-muted-foreground px-px" rdxTimeFieldInput [part]="item.part">
                                     {{ item.value }}
                                 </span>
                             } @else {
                                 <div
                                     class="data-[placeholder]:text-muted-foreground hover:bg-muted focus:bg-primary focus:text-primary-foreground rounded px-0.5 tabular-nums outline-none"
-                                    [part]="item.part"
                                     rdxTimeFieldInput
+                                    [part]="item.part"
                                 >
                                     {{ item.value }}
                                 </div>
                             }
                         }
-                        <input [value]="root.value()" rdxVisuallyHiddenInput feature="focusable" />
+                        <input rdxVisuallyHiddenInput feature="focusable" [value]="root.value()" />
                     </div>
                 </div>
             }
diff --git a/packages/primitives/time-field/stories/time-field-hour-cycle.ts b/packages/primitives/time-field/stories/time-field-hour-cycle.ts
index df012cddd..657f141c4 100644
--- a/packages/primitives/time-field/stories/time-field-hour-cycle.ts
+++ b/packages/primitives/time-field/stories/time-field-hour-cycle.ts
@@ -11,56 +11,56 @@ import { RdxVisuallyHiddenInputDirective } from '@radix-ng/primitives/visually-h
             <div class="flex flex-col gap-1.5">
                 <label class="text-foreground text-sm font-medium" id="time-12h-label">12-hour</label>
                 <div
-                    class="border-border bg-background text-foreground focus-within:ring-ring inline-flex w-fit items-center rounded-md border px-3 py-2 text-sm shadow-sm select-none focus-within:ring-2"
                     #h12="rdxTimeFieldRoot"
-                    [hourCycle]="12"
+                    class="border-border bg-background text-foreground focus-within:ring-ring inline-flex w-fit items-center rounded-md border px-3 py-2 text-sm shadow-sm select-none focus-within:ring-2"
                     aria-labelledby="time-12h-label"
                     rdxTimeFieldRoot
+                    [hourCycle]="12"
                 >
                     @for (item of h12.segmentContents(); track $index) {
                         @if (item.part === 'literal') {
-                            <span class="text-muted-foreground px-px" [part]="item.part" rdxTimeFieldInput>
+                            <span class="text-muted-foreground px-px" rdxTimeFieldInput [part]="item.part">
                                 {{ item.value }}
                             </span>
                         } @else {
                             <div
                                 class="data-[placeholder]:text-muted-foreground hover:bg-muted focus:bg-primary focus:text-primary-foreground rounded px-0.5 tabular-nums outline-none"
-                                [part]="item.part"
                                 rdxTimeFieldInput
+                                [part]="item.part"
                             >
                                 {{ item.value }}
                             </div>
                         }
                     }
-                    <input [value]="h12.value()" rdxVisuallyHiddenInput feature="focusable" />
+                    <input rdxVisuallyHiddenInput feature="focusable" [value]="h12.value()" />
                 </div>
             </div>
 
             <div class="flex flex-col gap-1.5">
                 <label class="text-foreground text-sm font-medium" id="time-24h-label">24-hour</label>
                 <div
-                    class="border-border bg-background text-foreground focus-within:ring-ring inline-flex w-fit items-center rounded-md border px-3 py-2 text-sm shadow-sm select-none focus-within:ring-2"
                     #h24="rdxTimeFieldRoot"
-                    [hourCycle]="24"
+                    class="border-border bg-background text-foreground focus-within:ring-ring inline-flex w-fit items-center rounded-md border px-3 py-2 text-sm shadow-sm select-none focus-within:ring-2"
                     aria-labelledby="time-24h-label"
                     rdxTimeFieldRoot
+                    [hourCycle]="24"
                 >
                     @for (item of h24.segmentContents(); track $index) {
                         @if (item.part === 'literal') {
-                            <span class="text-muted-foreground px-px" [part]="item.part" rdxTimeFieldInput>
+                            <span class="text-muted-foreground px-px" rdxTimeFieldInput [part]="item.part">
                                 {{ item.value }}
                             </span>
                         } @else {
                             <div
                                 class="data-[placeholder]:text-muted-foreground hover:bg-muted focus:bg-primary focus:text-primary-foreground rounded px-0.5 tabular-nums outline-none"
-                                [part]="item.part"
                                 rdxTimeFieldInput
+                                [part]="item.part"
                             >
                                 {{ item.value }}
                             </div>
                         }
                     }
-                    <input [value]="h24.value()" rdxVisuallyHiddenInput feature="focusable" />
+                    <input rdxVisuallyHiddenInput feature="focusable" [value]="h24.value()" />
                 </div>
             </div>
         </div>
diff --git a/packages/primitives/time-field/stories/time-field-localization.ts b/packages/primitives/time-field/stories/time-field-localization.ts
index a01916189..d60c89aab 100644
--- a/packages/primitives/time-field/stories/time-field-localization.ts
+++ b/packages/primitives/time-field/stories/time-field-localization.ts
@@ -18,29 +18,29 @@ interface LocaleExample {
                 <div class="flex flex-col gap-1.5">
                     <label class="text-foreground text-sm font-medium" [id]="example.id">{{ example.label }}</label>
                     <div
-                        class="border-border bg-background text-foreground focus-within:ring-ring inline-flex w-fit items-center rounded-md border px-3 py-2 text-sm shadow-sm select-none focus-within:ring-2"
                         #root="rdxTimeFieldRoot"
-                        [locale]="example.locale"
-                        [attr.aria-labelledby]="example.id"
+                        class="border-border bg-background text-foreground focus-within:ring-ring inline-flex w-fit items-center rounded-md border px-3 py-2 text-sm shadow-sm select-none focus-within:ring-2"
                         granularity="second"
                         rdxTimeFieldRoot
+                        [locale]="example.locale"
+                        [attr.aria-labelledby]="example.id"
                     >
                         @for (item of root.segmentContents(); track $index) {
                             @if (item.part === 'literal') {
-                                <span class="text-muted-foreground px-px" [part]="item.part" rdxTimeFieldInput>
+                                <span class="text-muted-foreground px-px" rdxTimeFieldInput [part]="item.part">
                                     {{ item.value }}
                                 </span>
                             } @else {
                                 <div
                                     class="data-[placeholder]:text-muted-foreground hover:bg-muted focus:bg-primary focus:text-primary-foreground rounded px-0.5 tabular-nums outline-none"
-                                    [part]="item.part"
                                     rdxTimeFieldInput
+                                    [part]="item.part"
                                 >
                                     {{ item.value }}
                                 </div>
                             }
                         }
-                        <input [value]="root.value()" rdxVisuallyHiddenInput feature="focusable" />
+                        <input rdxVisuallyHiddenInput feature="focusable" [value]="root.value()" />
                     </div>
                 </div>
             }
diff --git a/packages/primitives/time-field/stories/time-field-readonly.ts b/packages/primitives/time-field/stories/time-field-readonly.ts
index 03d783852..bee1371ac 100644
--- a/packages/primitives/time-field/stories/time-field-readonly.ts
+++ b/packages/primitives/time-field/stories/time-field-readonly.ts
@@ -11,30 +11,30 @@ import { RdxVisuallyHiddenInputDirective } from '@radix-ng/primitives/visually-h
         <div class="flex flex-col gap-1.5">
             <label class="text-foreground text-sm font-medium" id="time-readonly-label">Time</label>
             <div
-                class="border-border bg-muted text-foreground focus-within:ring-ring inline-flex w-fit items-center rounded-md border px-3 py-2 text-sm shadow-sm select-none focus-within:ring-2"
                 #root="rdxTimeFieldRoot"
-                [value]="value"
+                class="border-border bg-muted text-foreground focus-within:ring-ring inline-flex w-fit items-center rounded-md border px-3 py-2 text-sm shadow-sm select-none focus-within:ring-2"
                 aria-labelledby="time-readonly-label"
                 granularity="second"
                 readonly
                 rdxTimeFieldRoot
+                [value]="value"
             >
                 @for (item of root.segmentContents(); track $index) {
                     @if (item.part === 'literal') {
-                        <span class="text-muted-foreground px-px" [part]="item.part" rdxTimeFieldInput>
+                        <span class="text-muted-foreground px-px" rdxTimeFieldInput [part]="item.part">
                             {{ item.value }}
                         </span>
                     } @else {
                         <div
                             class="data-[placeholder]:text-muted-foreground focus:bg-primary focus:text-primary-foreground rounded px-0.5 tabular-nums outline-none"
-                            [part]="item.part"
                             rdxTimeFieldInput
+                            [part]="item.part"
                         >
                             {{ item.value }}
                         </div>
                     }
                 }
-                <input [value]="root.value()" rdxVisuallyHiddenInput feature="focusable" />
+                <input rdxVisuallyHiddenInput feature="focusable" [value]="root.value()" />
             </div>
         </div>
     `
diff --git a/packages/primitives/time-field/stories/time-field-validation.ts b/packages/primitives/time-field/stories/time-field-validation.ts
index 6a704ea3c..5eb6f74c8 100644
--- a/packages/primitives/time-field/stories/time-field-validation.ts
+++ b/packages/primitives/time-field/stories/time-field-validation.ts
@@ -13,30 +13,30 @@ import { RdxVisuallyHiddenInputDirective } from '@radix-ng/primitives/visually-h
                 Office hours (09:00–17:00)
             </label>
             <div
-                class="border-border bg-background text-foreground focus-within:ring-ring data-[invalid]:border-destructive data-[invalid]:focus-within:ring-destructive inline-flex w-fit items-center rounded-md border px-3 py-2 text-sm shadow-sm select-none focus-within:ring-2"
                 #root="rdxTimeFieldRoot"
+                class="border-border bg-background text-foreground focus-within:ring-ring data-[invalid]:border-destructive data-[invalid]:focus-within:ring-destructive inline-flex w-fit items-center rounded-md border px-3 py-2 text-sm shadow-sm select-none focus-within:ring-2"
+                aria-labelledby="time-validation-label"
+                rdxTimeFieldRoot
                 [value]="value"
                 [minValue]="minValue"
                 [maxValue]="maxValue"
-                aria-labelledby="time-validation-label"
-                rdxTimeFieldRoot
             >
                 @for (item of root.segmentContents(); track $index) {
                     @if (item.part === 'literal') {
-                        <span class="text-muted-foreground px-px" [part]="item.part" rdxTimeFieldInput>
+                        <span class="text-muted-foreground px-px" rdxTimeFieldInput [part]="item.part">
                             {{ item.value }}
                         </span>
                     } @else {
                         <div
                             class="data-[placeholder]:text-muted-foreground data-[invalid]:text-destructive hover:bg-muted focus:bg-primary focus:text-primary-foreground rounded px-0.5 tabular-nums outline-none"
-                            [part]="item.part"
                             rdxTimeFieldInput
+                            [part]="item.part"
                         >
                             {{ item.value }}
                         </div>
                     }
                 }
-                <input [value]="root.value()" rdxVisuallyHiddenInput feature="focusable" />
+                <input rdxVisuallyHiddenInput feature="focusable" [value]="root.value()" />
             </div>
             @if (root.isInvalid()) {
                 <p class="text-destructive text-xs">Please pick a time between 09:00 and 17:00.</p>
diff --git a/packages/primitives/time-field/stories/time-field.stories.ts b/packages/primitives/time-field/stories/time-field.stories.ts
index 9bfe63e14..3f7521903 100644
--- a/packages/primitives/time-field/stories/time-field.stories.ts
+++ b/packages/primitives/time-field/stories/time-field.stories.ts
@@ -1,4 +1,3 @@
-import { Meta, moduleMetadata, StoryObj } from '@storybook/angular';
 import { tailwindDemoDecorator } from '../../storybook/tailwind-demo';
 import { TimeFieldDefaultExample } from './time-field-default';
 import defaultSource from './time-field-default?raw';
@@ -14,6 +13,7 @@ import { TimeFieldReadonlyExample } from './time-field-readonly';
 import readonlySource from './time-field-readonly?raw';
 import { TimeFieldValidationExample } from './time-field-validation';
 import validationSource from './time-field-validation?raw';
+import { Meta, moduleMetadata, StoryObj } from '@storybook/angular';
 
 const html = String.raw;
 
diff --git a/packages/primitives/toast/__tests__/toast-manager.spec.ts b/packages/primitives/toast/__tests__/toast-manager.spec.ts
index 0d03278e5..7f9a8117f 100644
--- a/packages/primitives/toast/__tests__/toast-manager.spec.ts
+++ b/packages/primitives/toast/__tests__/toast-manager.spec.ts
@@ -1,10 +1,10 @@
-import { ChangeDetectionStrategy, Component, inject } from '@angular/core';
-import { TestBed } from '@angular/core/testing';
 import { RdxToastDescription } from '../src/toast-description';
 import { RdxToastManager } from '../src/toast-provider';
 import { RdxToastRoot } from '../src/toast-root';
 import { RdxToastTitle } from '../src/toast-title';
 import { RdxToastViewport } from '../src/toast-viewport';
+import { ChangeDetectionStrategy, Component, inject } from '@angular/core';
+import { TestBed } from '@angular/core/testing';
 
 @Component({
     changeDetection: ChangeDetectionStrategy.Eager,
@@ -12,7 +12,7 @@ import { RdxToastViewport } from '../src/toast-viewport';
     template: `
         <div rdxToastViewport>
             @for (toast of toasts(); track toast.id) {
-                <div [toast]="toast" rdxToastRoot>
+                <div rdxToastRoot [toast]="toast">
                     @if (toast.title) {
                         <p rdxToastTitle>{{ toast.title }}</p>
                     }
diff --git a/packages/primitives/toast/index.ts b/packages/primitives/toast/index.ts
index 2b0f8fa8d..1b21c6795 100644
--- a/packages/primitives/toast/index.ts
+++ b/packages/primitives/toast/index.ts
@@ -1,4 +1,3 @@
-import { NgModule } from '@angular/core';
 import { RdxToastAction } from './src/toast-action';
 import { RdxToastClose } from './src/toast-close';
 import { RdxToastContent } from './src/toast-content';
@@ -9,7 +8,9 @@ import { RdxToastProvider } from './src/toast-provider';
 import { RdxToastRoot } from './src/toast-root';
 import { RdxToastTitle } from './src/toast-title';
 import { RdxToastViewport } from './src/toast-viewport';
+import { NgModule } from '@angular/core';
 
+export * from './src/toast.types';
 export * from './src/toast-action';
 export * from './src/toast-close';
 export * from './src/toast-content';
@@ -21,7 +22,6 @@ export * from './src/toast-root';
 export * from './src/toast-swipe';
 export * from './src/toast-title';
 export * from './src/toast-viewport';
-export * from './src/toast.types';
 
 export const toastImports = [
     RdxToastProvider,
diff --git a/packages/primitives/toast/src/toast-action.ts b/packages/primitives/toast/src/toast-action.ts
index 390f96d8e..ee94a86a3 100644
--- a/packages/primitives/toast/src/toast-action.ts
+++ b/packages/primitives/toast/src/toast-action.ts
@@ -1,5 +1,5 @@
-import { Directive } from '@angular/core';
 import { injectRdxToastRootContext } from './toast-root';
+import { Directive } from '@angular/core';
 
 /**
  * An action button inside a toast (e.g. "Undo"). Unlike {@link RdxToastClose} it does not dismiss
diff --git a/packages/primitives/toast/src/toast-close.ts b/packages/primitives/toast/src/toast-close.ts
index ebdf0ddab..c813133b1 100644
--- a/packages/primitives/toast/src/toast-close.ts
+++ b/packages/primitives/toast/src/toast-close.ts
@@ -1,5 +1,5 @@
-import { Directive } from '@angular/core';
 import { injectRdxToastRootContext } from './toast-root';
+import { Directive } from '@angular/core';
 
 /** Button that dismisses its toast. Put it on a native `<button>` for built-in semantics. */
 @Directive({
diff --git a/packages/primitives/toast/src/toast-content.ts b/packages/primitives/toast/src/toast-content.ts
index cc821525e..25ffb5e1b 100644
--- a/packages/primitives/toast/src/toast-content.ts
+++ b/packages/primitives/toast/src/toast-content.ts
@@ -1,5 +1,5 @@
-import { Directive } from '@angular/core';
 import { injectRdxToastRootContext } from './toast-root';
+import { Directive } from '@angular/core';
 
 /**
  * Wraps a toast's inner parts (title, description, actions) — the Angular counterpart of
diff --git a/packages/primitives/toast/src/toast-description.ts b/packages/primitives/toast/src/toast-description.ts
index 20d3194df..41d1f9420 100644
--- a/packages/primitives/toast/src/toast-description.ts
+++ b/packages/primitives/toast/src/toast-description.ts
@@ -1,5 +1,5 @@
-import { DestroyRef, Directive, inject } from '@angular/core';
 import { injectRdxToastRootContext } from './toast-root';
+import { DestroyRef, Directive, inject } from '@angular/core';
 
 /** Supporting body text for a toast; registers so `aria-describedby` only targets a real node. */
 @Directive({
diff --git a/packages/primitives/toast/src/toast-provider.ts b/packages/primitives/toast/src/toast-provider.ts
index b20b3aa19..e7ac6ac92 100644
--- a/packages/primitives/toast/src/toast-provider.ts
+++ b/packages/primitives/toast/src/toast-provider.ts
@@ -1,6 +1,6 @@
+import { RdxToastAddOptions, RdxToastObject, RdxToastPromiseOptions } from './toast.types';
 import { computed, Directive, effect, inject, Injectable, input, Provider, signal } from '@angular/core';
 import { RdxIdGenerator } from '@radix-ng/primitives/core';
-import { RdxToastAddOptions, RdxToastObject, RdxToastPromiseOptions } from './toast.types';
 
 /** Default auto-dismiss delay (ms) applied when a toast omits `timeout`. */
 const DEFAULT_TIMEOUT = 5000;
diff --git a/packages/primitives/toast/src/toast-root.ts b/packages/primitives/toast/src/toast-root.ts
index d7121abb8..8e1688d61 100644
--- a/packages/primitives/toast/src/toast-root.ts
+++ b/packages/primitives/toast/src/toast-root.ts
@@ -1,8 +1,8 @@
-import { computed, DestroyRef, Directive, effect, ElementRef, inject, Injector, input, signal } from '@angular/core';
-import { createContext, elementSize, injectId } from '@radix-ng/primitives/core';
+import { RdxToastObject } from './toast.types';
 import { RdxToastManager } from './toast-provider';
 import { RdxToastSwipeDirection, useToastSwipe } from './toast-swipe';
-import { RdxToastObject } from './toast.types';
+import { computed, DestroyRef, Directive, effect, ElementRef, inject, Injector, input, signal } from '@angular/core';
+import { createContext, elementSize, injectId } from '@radix-ng/primitives/core';
 
 export interface RdxToastRootContext {
     /** The toast model this part tree renders. */
diff --git a/packages/primitives/toast/src/toast-title.ts b/packages/primitives/toast/src/toast-title.ts
index 5e4f016ad..087a4604e 100644
--- a/packages/primitives/toast/src/toast-title.ts
+++ b/packages/primitives/toast/src/toast-title.ts
@@ -1,5 +1,5 @@
-import { DestroyRef, Directive, inject } from '@angular/core';
 import { injectRdxToastRootContext } from './toast-root';
+import { DestroyRef, Directive, inject } from '@angular/core';
 
 /** Accessible title for a toast; registers so the root only points `aria-labelledby` at a real node. */
 @Directive({
diff --git a/packages/primitives/toast/src/toast-viewport.ts b/packages/primitives/toast/src/toast-viewport.ts
index dd07087dd..e53ef4006 100644
--- a/packages/primitives/toast/src/toast-viewport.ts
+++ b/packages/primitives/toast/src/toast-viewport.ts
@@ -1,5 +1,5 @@
-import { DestroyRef, Directive, effect, inject, signal } from '@angular/core';
 import { RdxToastManager } from './toast-provider';
+import { DestroyRef, Directive, effect, inject, signal } from '@angular/core';
 
 /**
  * The positioned region that holds the visible toasts — the Angular counterpart of
diff --git a/packages/primitives/toast/stories/toast-anchored.ts b/packages/primitives/toast/stories/toast-anchored.ts
index d2bc093a1..1e1cd9715 100644
--- a/packages/primitives/toast/stories/toast-anchored.ts
+++ b/packages/primitives/toast/stories/toast-anchored.ts
@@ -1,6 +1,6 @@
+import { cn, demoButton, demoToast } from '../../storybook/styles';
 import { ChangeDetectionStrategy, Component, inject } from '@angular/core';
 import { provideRdxToastManager, RdxToastManager, toastImports } from '@radix-ng/primitives/toast';
-import { cn, demoButton, demoToast } from '../../storybook/styles';
 
 /**
  * An anchored toast is positioned against an element with `rdxToastPositioner` (powered by popper)
@@ -16,17 +16,17 @@ import { cn, demoButton, demoToast } from '../../storybook/styles';
         <button [class]="cn(b.base, b.primary, b.size.md)" (click)="show($event)">Anchored toast</button>
 
         <div rdxToastPortal>
-            <div [class]="t.viewport" rdxToastViewport>
+            <div rdxToastViewport [class]="t.viewport">
                 @for (toast of manager.toasts(); track toast.id) {
                     @if (toast.positionerProps; as positioner) {
-                        <div [anchor]="positioner.anchor" [side]="positioner.side ?? 'top'" rdxToastPositioner>
-                            <div [class]="t.anchored" [toast]="toast" rdxToastRoot>
-                                <div [class]="t.content" rdxToastContent>
+                        <div rdxToastPositioner [anchor]="positioner.anchor" [side]="positioner.side ?? 'top'">
+                            <div rdxToastRoot [class]="t.anchored" [toast]="toast">
+                                <div rdxToastContent [class]="t.content">
                                     <div class="min-w-0 flex-1">
-                                        <p [class]="t.title" rdxToastTitle>{{ toast.title }}</p>
-                                        <p [class]="t.description" rdxToastDescription>{{ toast.description }}</p>
+                                        <p rdxToastTitle [class]="t.title">{{ toast.title }}</p>
+                                        <p rdxToastDescription [class]="t.description">{{ toast.description }}</p>
                                     </div>
-                                    <button [class]="t.close" aria-label="Dismiss" rdxToastClose>✕</button>
+                                    <button aria-label="Dismiss" rdxToastClose [class]="t.close">✕</button>
                                 </div>
                             </div>
                         </div>
diff --git a/packages/primitives/toast/stories/toast-custom-data.ts b/packages/primitives/toast/stories/toast-custom-data.ts
index a5daae69d..c46462648 100644
--- a/packages/primitives/toast/stories/toast-custom-data.ts
+++ b/packages/primitives/toast/stories/toast-custom-data.ts
@@ -1,6 +1,6 @@
+import { cn, demoButton, demoToast } from '../../storybook/styles';
 import { ChangeDetectionStrategy, Component, inject } from '@angular/core';
 import { provideRdxToastManager, RdxToastManager, toastImports } from '@radix-ng/primitives/toast';
-import { cn, demoButton, demoToast } from '../../storybook/styles';
 
 interface MentionData {
     user: string;
@@ -21,11 +21,11 @@ interface MentionData {
         <button [class]="cn(b.base, b.primary, b.size.md)" (click)="mention()">New mention</button>
 
         <div rdxToastPortal>
-            <div [class]="t.viewport" rdxToastViewport>
+            <div rdxToastViewport [class]="t.viewport">
                 @for (toast of manager.toasts(); track toast.id) {
-                    <div [class]="t.root" [toast]="toast" rdxToastRoot>
+                    <div rdxToastRoot [class]="t.root" [toast]="toast">
                         @let data = $any(toast.data);
-                        <div [class]="t.content" rdxToastContent>
+                        <div rdxToastContent [class]="t.content">
                             <span
                                 class="bg-muted text-muted-foreground grid size-9 shrink-0 place-items-center rounded-full text-xs font-semibold"
                                 aria-hidden="true"
@@ -33,10 +33,10 @@ interface MentionData {
                                 {{ data.initials }}
                             </span>
                             <div class="min-w-0 flex-1">
-                                <p [class]="t.title" rdxToastTitle>{{ data.user }} mentioned you</p>
-                                <p [class]="t.description" rdxToastDescription>“{{ data.message }}”</p>
+                                <p rdxToastTitle [class]="t.title">{{ data.user }} mentioned you</p>
+                                <p rdxToastDescription [class]="t.description">“{{ data.message }}”</p>
                             </div>
-                            <button [class]="t.close" aria-label="Dismiss" rdxToastClose>✕</button>
+                            <button aria-label="Dismiss" rdxToastClose [class]="t.close">✕</button>
                         </div>
                     </div>
                 }
diff --git a/packages/primitives/toast/stories/toast-custom-position.ts b/packages/primitives/toast/stories/toast-custom-position.ts
index 28f86842f..a006d7643 100644
--- a/packages/primitives/toast/stories/toast-custom-position.ts
+++ b/packages/primitives/toast/stories/toast-custom-position.ts
@@ -1,6 +1,6 @@
+import { cn, demoButton, demoToast } from '../../storybook/styles';
 import { ChangeDetectionStrategy, Component, inject } from '@angular/core';
 import { provideRdxToastManager, RdxToastManager, toastImports } from '@radix-ng/primitives/toast';
-import { cn, demoButton, demoToast } from '../../storybook/styles';
 
 /**
  * Placement is entirely the consumer's CSS — the primitive only positions nothing. Here the viewport
@@ -16,15 +16,15 @@ import { cn, demoButton, demoToast } from '../../storybook/styles';
         <button [class]="cn(b.base, b.primary, b.size.md)" (click)="add()">Show toast (top)</button>
 
         <div rdxToastPortal>
-            <div [class]="t.viewportTop" rdxToastViewport>
+            <div rdxToastViewport [class]="t.viewportTop">
                 @for (toast of manager.toasts(); track toast.id) {
-                    <div [class]="t.rootTop" [toast]="toast" [swipeDirection]="['up']" rdxToastRoot>
-                        <div [class]="t.content" rdxToastContent>
+                    <div rdxToastRoot [class]="t.rootTop" [toast]="toast" [swipeDirection]="['up']">
+                        <div rdxToastContent [class]="t.content">
                             <div class="min-w-0 flex-1">
-                                <p [class]="t.title" rdxToastTitle>{{ toast.title }}</p>
-                                <p [class]="t.description" rdxToastDescription>{{ toast.description }}</p>
+                                <p rdxToastTitle [class]="t.title">{{ toast.title }}</p>
+                                <p rdxToastDescription [class]="t.description">{{ toast.description }}</p>
                             </div>
-                            <button [class]="t.close" aria-label="Dismiss" rdxToastClose>✕</button>
+                            <button aria-label="Dismiss" rdxToastClose [class]="t.close">✕</button>
                         </div>
                     </div>
                 }
diff --git a/packages/primitives/toast/stories/toast-deduplicated.ts b/packages/primitives/toast/stories/toast-deduplicated.ts
index 7ecf81732..b63b8aedd 100644
--- a/packages/primitives/toast/stories/toast-deduplicated.ts
+++ b/packages/primitives/toast/stories/toast-deduplicated.ts
@@ -1,6 +1,6 @@
+import { cn, demoButton, demoToast } from '../../storybook/styles';
 import { ChangeDetectionStrategy, Component, inject } from '@angular/core';
 import { provideRdxToastManager, RdxToastManager, toastImports } from '@radix-ng/primitives/toast';
-import { cn, demoButton, demoToast } from '../../storybook/styles';
 
 /**
  * Passing a fixed `id` upserts instead of stacking — repeated calls update the same toast in place
@@ -16,15 +16,15 @@ import { cn, demoButton, demoToast } from '../../storybook/styles';
         <button [class]="cn(b.base, b.primary, b.size.md)" (click)="copy()">Copy link</button>
 
         <div rdxToastPortal>
-            <div [class]="t.viewport" rdxToastViewport>
+            <div rdxToastViewport [class]="t.viewport">
                 @for (toast of manager.toasts(); track toast.id) {
-                    <div [class]="t.root" [toast]="toast" rdxToastRoot>
-                        <div [class]="t.content" rdxToastContent>
+                    <div rdxToastRoot [class]="t.root" [toast]="toast">
+                        <div rdxToastContent [class]="t.content">
                             <div class="min-w-0 flex-1">
-                                <p [class]="t.title" rdxToastTitle>{{ toast.title }}</p>
-                                <p [class]="t.description" rdxToastDescription>{{ toast.description }}</p>
+                                <p rdxToastTitle [class]="t.title">{{ toast.title }}</p>
+                                <p rdxToastDescription [class]="t.description">{{ toast.description }}</p>
                             </div>
-                            <button [class]="t.close" aria-label="Dismiss" rdxToastClose>✕</button>
+                            <button aria-label="Dismiss" rdxToastClose [class]="t.close">✕</button>
                         </div>
                     </div>
                 }
diff --git a/packages/primitives/toast/stories/toast-default.ts b/packages/primitives/toast/stories/toast-default.ts
index 994cbfa69..56d4686da 100644
--- a/packages/primitives/toast/stories/toast-default.ts
+++ b/packages/primitives/toast/stories/toast-default.ts
@@ -1,6 +1,6 @@
+import { cn, demoButton, demoToast } from '../../storybook/styles';
 import { ChangeDetectionStrategy, Component, inject } from '@angular/core';
 import { provideRdxToastManager, RdxToastManager, toastImports } from '@radix-ng/primitives/toast';
-import { cn, demoButton, demoToast } from '../../storybook/styles';
 
 @Component({
     changeDetection: ChangeDetectionStrategy.Eager,
@@ -11,17 +11,17 @@ import { cn, demoButton, demoToast } from '../../storybook/styles';
         <button [class]="cn(b.base, b.primary, b.size.md)" (click)="notify()">Show toast</button>
 
         <div rdxToastPortal>
-            <div [class]="t.viewport" rdxToastViewport>
+            <div rdxToastViewport [class]="t.viewport">
                 @for (toast of manager.toasts(); track toast.id) {
-                    <div [class]="t.root" [toast]="toast" rdxToastRoot>
-                        <div [class]="t.content" rdxToastContent>
+                    <div rdxToastRoot [class]="t.root" [toast]="toast">
+                        <div rdxToastContent [class]="t.content">
                             <div class="min-w-0 flex-1">
-                                <p [class]="t.title" rdxToastTitle>{{ toast.title }}</p>
+                                <p rdxToastTitle [class]="t.title">{{ toast.title }}</p>
                                 @if (toast.description) {
-                                    <p [class]="t.description" rdxToastDescription>{{ toast.description }}</p>
+                                    <p rdxToastDescription [class]="t.description">{{ toast.description }}</p>
                                 }
                             </div>
-                            <button [class]="t.close" aria-label="Dismiss" rdxToastClose>✕</button>
+                            <button aria-label="Dismiss" rdxToastClose [class]="t.close">✕</button>
                         </div>
                     </div>
                 }
diff --git a/packages/primitives/toast/stories/toast-promise.ts b/packages/primitives/toast/stories/toast-promise.ts
index 86330eeb6..d3f92826f 100644
--- a/packages/primitives/toast/stories/toast-promise.ts
+++ b/packages/primitives/toast/stories/toast-promise.ts
@@ -1,6 +1,6 @@
+import { cn, demoButton, demoToast } from '../../storybook/styles';
 import { ChangeDetectionStrategy, Component, inject } from '@angular/core';
 import { provideRdxToastManager, RdxToastManager, toastImports } from '@radix-ng/primitives/toast';
-import { cn, demoButton, demoToast } from '../../storybook/styles';
 
 /**
  * `manager.promise()` drives a single toast through a promise's lifecycle: it shows the `loading`
@@ -19,18 +19,18 @@ import { cn, demoButton, demoToast } from '../../storybook/styles';
         </div>
 
         <div rdxToastPortal>
-            <div [class]="t.viewport" rdxToastViewport>
+            <div rdxToastViewport [class]="t.viewport">
                 @for (toast of manager.toasts(); track toast.id) {
-                    <div [class]="t.root" [toast]="toast" rdxToastRoot>
-                        <div [class]="t.content" rdxToastContent>
+                    <div rdxToastRoot [class]="t.root" [toast]="toast">
+                        <div rdxToastContent [class]="t.content">
                             <div class="min-w-0 flex-1">
-                                <p [class]="t.title" rdxToastTitle>{{ toast.title }}</p>
+                                <p rdxToastTitle [class]="t.title">{{ toast.title }}</p>
                                 @if (toast.description) {
-                                    <p [class]="t.description" rdxToastDescription>{{ toast.description }}</p>
+                                    <p rdxToastDescription [class]="t.description">{{ toast.description }}</p>
                                 }
                             </div>
                             @if (!toast.loading) {
-                                <button [class]="t.close" aria-label="Dismiss" rdxToastClose>✕</button>
+                                <button aria-label="Dismiss" rdxToastClose [class]="t.close">✕</button>
                             }
                         </div>
                     </div>
diff --git a/packages/primitives/toast/stories/toast-stacking.ts b/packages/primitives/toast/stories/toast-stacking.ts
index 6a04e50bc..0e0ec7cf8 100644
--- a/packages/primitives/toast/stories/toast-stacking.ts
+++ b/packages/primitives/toast/stories/toast-stacking.ts
@@ -1,6 +1,6 @@
+import { cn, demoButton, demoToast } from '../../storybook/styles';
 import { ChangeDetectionStrategy, Component, inject } from '@angular/core';
 import { provideRdxToastManager, RdxToastManager, toastImports } from '@radix-ng/primitives/toast';
-import { cn, demoButton, demoToast } from '../../storybook/styles';
 
 /**
  * Push several toasts to see the collapsed stack, then hover (or focus) the stack to expand it —
@@ -19,15 +19,15 @@ import { cn, demoButton, demoToast } from '../../storybook/styles';
         </div>
 
         <div rdxToastPortal>
-            <div [class]="t.viewport" rdxToastViewport>
+            <div rdxToastViewport [class]="t.viewport">
                 @for (toast of manager.toasts(); track toast.id) {
-                    <div [class]="t.root" [toast]="toast" rdxToastRoot>
-                        <div [class]="t.content" rdxToastContent>
+                    <div rdxToastRoot [class]="t.root" [toast]="toast">
+                        <div rdxToastContent [class]="t.content">
                             <div class="min-w-0 flex-1">
-                                <p [class]="t.title" rdxToastTitle>{{ toast.title }}</p>
-                                <p [class]="t.description" rdxToastDescription>{{ toast.description }}</p>
+                                <p rdxToastTitle [class]="t.title">{{ toast.title }}</p>
+                                <p rdxToastDescription [class]="t.description">{{ toast.description }}</p>
                             </div>
-                            <button [class]="t.close" aria-label="Dismiss" rdxToastClose>✕</button>
+                            <button aria-label="Dismiss" rdxToastClose [class]="t.close">✕</button>
                         </div>
                     </div>
                 }
diff --git a/packages/primitives/toast/stories/toast-swipe.ts b/packages/primitives/toast/stories/toast-swipe.ts
index 9b6a508e3..9c6a4ffdf 100644
--- a/packages/primitives/toast/stories/toast-swipe.ts
+++ b/packages/primitives/toast/stories/toast-swipe.ts
@@ -1,6 +1,6 @@
+import { cn, demoButton, demoToast } from '../../storybook/styles';
 import { ChangeDetectionStrategy, Component, inject } from '@angular/core';
 import { provideRdxToastManager, RdxToastManager, toastImports } from '@radix-ng/primitives/toast';
-import { cn, demoButton, demoToast } from '../../storybook/styles';
 
 /**
  * Toasts can be dismissed by swiping. `swipeDirection` lists the allowed directions; the gesture
@@ -16,17 +16,17 @@ import { cn, demoButton, demoToast } from '../../storybook/styles';
         <button [class]="cn(b.base, b.primary, b.size.md)" (click)="add()">Show swipeable toast</button>
 
         <div rdxToastPortal>
-            <div [class]="t.viewport" rdxToastViewport>
+            <div rdxToastViewport [class]="t.viewport">
                 @for (toast of manager.toasts(); track toast.id) {
-                    <div [class]="t.root" [toast]="toast" [swipeDirection]="['right', 'down']" rdxToastRoot>
-                        <div [class]="t.content" rdxToastContent>
+                    <div rdxToastRoot [class]="t.root" [toast]="toast" [swipeDirection]="['right', 'down']">
+                        <div rdxToastContent [class]="t.content">
                             <div class="min-w-0 flex-1">
-                                <p [class]="t.title" rdxToastTitle>Swipe me away</p>
-                                <p [class]="t.description" rdxToastDescription>
+                                <p rdxToastTitle [class]="t.title">Swipe me away</p>
+                                <p rdxToastDescription [class]="t.description">
                                     Drag right or down to dismiss. Release early to snap back.
                                 </p>
                             </div>
-                            <button [class]="t.close" aria-label="Dismiss" rdxToastClose>✕</button>
+                            <button aria-label="Dismiss" rdxToastClose [class]="t.close">✕</button>
                         </div>
                     </div>
                 }
diff --git a/packages/primitives/toast/stories/toast-types.ts b/packages/primitives/toast/stories/toast-types.ts
index 88a8c79e8..1a04ff07d 100644
--- a/packages/primitives/toast/stories/toast-types.ts
+++ b/packages/primitives/toast/stories/toast-types.ts
@@ -1,7 +1,7 @@
+import { cn, demoButton, demoToast } from '../../storybook/styles';
 import { ChangeDetectionStrategy, Component, inject } from '@angular/core';
 import { LucideCircleCheck, LucideCircleX, LucideInfo } from '@lucide/angular';
 import { provideRdxToastManager, RdxToastManager, toastImports } from '@radix-ng/primitives/toast';
-import { cn, demoButton, demoToast } from '../../storybook/styles';
 
 /**
  * `type` is a free-form category surfaced back on the toast object — branch on it in the template
@@ -21,26 +21,26 @@ import { cn, demoButton, demoToast } from '../../storybook/styles';
         </div>
 
         <div rdxToastPortal>
-            <div [class]="t.viewport" rdxToastViewport>
+            <div rdxToastViewport [class]="t.viewport">
                 @for (toast of manager.toasts(); track toast.id) {
-                    <div [class]="t.root" [toast]="toast" rdxToastRoot>
-                        <div [class]="t.content" rdxToastContent>
+                    <div rdxToastRoot [class]="t.root" [toast]="toast">
+                        <div rdxToastContent [class]="t.content">
                             @switch (toast.type) {
                                 @case ('success') {
-                                    <svg [class]="cn(t.icon, 'text-foreground')" lucideCircleCheck></svg>
+                                    <svg lucideCircleCheck [class]="cn(t.icon, 'text-foreground')"></svg>
                                 }
                                 @case ('error') {
-                                    <svg [class]="cn(t.icon, 'text-destructive')" lucideCircleX></svg>
+                                    <svg lucideCircleX [class]="cn(t.icon, 'text-destructive')"></svg>
                                 }
                                 @default {
-                                    <svg [class]="cn(t.icon, 'text-muted-foreground')" lucideInfo></svg>
+                                    <svg lucideInfo [class]="cn(t.icon, 'text-muted-foreground')"></svg>
                                 }
                             }
                             <div class="min-w-0 flex-1">
-                                <p [class]="t.title" rdxToastTitle>{{ toast.title }}</p>
-                                <p [class]="t.description" rdxToastDescription>{{ toast.description }}</p>
+                                <p rdxToastTitle [class]="t.title">{{ toast.title }}</p>
+                                <p rdxToastDescription [class]="t.description">{{ toast.description }}</p>
                             </div>
-                            <button [class]="t.close" aria-label="Dismiss" rdxToastClose>✕</button>
+                            <button aria-label="Dismiss" rdxToastClose [class]="t.close">✕</button>
                         </div>
                     </div>
                 }
diff --git a/packages/primitives/toast/stories/toast-undo-action.ts b/packages/primitives/toast/stories/toast-undo-action.ts
index 58bc38046..a69ff3330 100644
--- a/packages/primitives/toast/stories/toast-undo-action.ts
+++ b/packages/primitives/toast/stories/toast-undo-action.ts
@@ -1,6 +1,6 @@
+import { cn, demoButton, demoToast } from '../../storybook/styles';
 import { ChangeDetectionStrategy, Component, inject } from '@angular/core';
 import { provideRdxToastManager, RdxToastManager, RdxToastObject, toastImports } from '@radix-ng/primitives/toast';
-import { cn, demoButton, demoToast } from '../../storybook/styles';
 
 /**
  * `rdxToastAction` renders an in-toast action button. The label and handler are passed through the
@@ -18,19 +18,19 @@ import { cn, demoButton, demoToast } from '../../storybook/styles';
         </div>
 
         <div rdxToastPortal>
-            <div [class]="t.viewport" rdxToastViewport>
+            <div rdxToastViewport [class]="t.viewport">
                 @for (toast of manager.toasts(); track toast.id) {
-                    <div [class]="t.root" [toast]="toast" rdxToastRoot>
-                        <div [class]="t.content" rdxToastContent>
+                    <div rdxToastRoot [class]="t.root" [toast]="toast">
+                        <div rdxToastContent [class]="t.content">
                             <div class="min-w-0 flex-1">
-                                <p [class]="t.title" rdxToastTitle>{{ toast.title }}</p>
+                                <p rdxToastTitle [class]="t.title">{{ toast.title }}</p>
                                 @if (toast.actionProps; as action) {
-                                    <button [class]="t.action" (click)="runAction(toast, $event)" rdxToastAction>
+                                    <button rdxToastAction [class]="t.action" (click)="runAction(toast, $event)">
                                         {{ action.label }}
                                     </button>
                                 }
                             </div>
-                            <button [class]="t.close" aria-label="Dismiss" rdxToastClose>✕</button>
+                            <button aria-label="Dismiss" rdxToastClose [class]="t.close">✕</button>
                         </div>
                     </div>
                 }
diff --git a/packages/primitives/toast/stories/toast-varying-heights.ts b/packages/primitives/toast/stories/toast-varying-heights.ts
index 2b5b80227..646f06b40 100644
--- a/packages/primitives/toast/stories/toast-varying-heights.ts
+++ b/packages/primitives/toast/stories/toast-varying-heights.ts
@@ -1,6 +1,6 @@
+import { cn, demoButton, demoToast } from '../../storybook/styles';
 import { ChangeDetectionStrategy, Component, inject } from '@angular/core';
 import { provideRdxToastManager, RdxToastManager, toastImports } from '@radix-ng/primitives/toast';
-import { cn, demoButton, demoToast } from '../../storybook/styles';
 
 /**
  * Each toast's height is measured and shared as `--toast-offset-y`, so the expanded layout lines up
@@ -19,15 +19,15 @@ import { cn, demoButton, demoToast } from '../../storybook/styles';
         </div>
 
         <div rdxToastPortal>
-            <div [class]="t.viewport" rdxToastViewport>
+            <div rdxToastViewport [class]="t.viewport">
                 @for (toast of manager.toasts(); track toast.id) {
-                    <div [class]="t.root" [toast]="toast" rdxToastRoot>
-                        <div [class]="t.content" rdxToastContent>
+                    <div rdxToastRoot [class]="t.root" [toast]="toast">
+                        <div rdxToastContent [class]="t.content">
                             <div class="min-w-0 flex-1">
-                                <p [class]="t.title" rdxToastTitle>{{ toast.title }}</p>
-                                <p [class]="t.description" rdxToastDescription>{{ toast.description }}</p>
+                                <p rdxToastTitle [class]="t.title">{{ toast.title }}</p>
+                                <p rdxToastDescription [class]="t.description">{{ toast.description }}</p>
                             </div>
-                            <button [class]="t.close" aria-label="Dismiss" rdxToastClose>✕</button>
+                            <button aria-label="Dismiss" rdxToastClose [class]="t.close">✕</button>
                         </div>
                     </div>
                 }
diff --git a/packages/primitives/toast/stories/toast.stories.ts b/packages/primitives/toast/stories/toast.stories.ts
index 882b570a6..7e39672bf 100644
--- a/packages/primitives/toast/stories/toast.stories.ts
+++ b/packages/primitives/toast/stories/toast.stories.ts
@@ -1,4 +1,3 @@
-import { Meta, moduleMetadata, StoryObj } from '@storybook/angular';
 import { tailwindDemoDecorator } from '../../storybook/tailwind-demo';
 import { ToastAnchoredExample } from './toast-anchored';
 import anchoredSource from './toast-anchored?raw';
@@ -22,6 +21,7 @@ import { ToastUndoActionExample } from './toast-undo-action';
 import undoActionSource from './toast-undo-action?raw';
 import { ToastVaryingHeightsExample } from './toast-varying-heights';
 import varyingHeightsSource from './toast-varying-heights?raw';
+import { Meta, moduleMetadata, StoryObj } from '@storybook/angular';
 
 const html = String.raw;
 const source = (code: string) => ({ docs: { source: { code, language: 'typescript' } } });
diff --git a/packages/primitives/toggle-group/__tests__/toggle-group.spec.ts b/packages/primitives/toggle-group/__tests__/toggle-group.spec.ts
index 77619892f..8b36db214 100644
--- a/packages/primitives/toggle-group/__tests__/toggle-group.spec.ts
+++ b/packages/primitives/toggle-group/__tests__/toggle-group.spec.ts
@@ -1,3 +1,6 @@
+import { RdxToggleGroup } from '../src/toggle-group';
+import { RdxToggleGroupValueChangeEvent } from '../src/toggle-group-base';
+import { RdxToggleGroupWithoutFocus } from '../src/toggle-group-without-focus';
 import { ChangeDetectionStrategy, Component, inject, signal } from '@angular/core';
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { FormBuilder, FormGroup, ReactiveFormsModule } from '@angular/forms';
@@ -7,26 +10,23 @@ import { resetRdxDevWarnings } from '@radix-ng/primitives/core';
 import { RdxToggle, RdxTogglePressedChangeEvent } from '@radix-ng/primitives/toggle';
 import { RdxToolbarGroup, RdxToolbarRoot } from '@radix-ng/primitives/toolbar';
 import { vi } from 'vitest';
-import { RdxToggleGroup } from '../src/toggle-group';
-import { RdxToggleGroupValueChangeEvent } from '../src/toggle-group-base';
-import { RdxToggleGroupWithoutFocus } from '../src/toggle-group-without-focus';
 
 @Component({
     changeDetection: ChangeDetectionStrategy.Eager,
     imports: [RdxToggleGroup, RdxToggle],
     template: `
         <div
-            [(value)]="value"
+            rdxToggleGroup
+            aria-label="Text alignment"
             [multiple]="multiple()"
             [disabled]="disabled()"
             [orientation]="orientation()"
             [dir]="dir()"
             [loopFocus]="loopFocus()"
+            [(value)]="value"
             (onValueChange)="onGroupValueChange($event)"
-            rdxToggleGroup
-            aria-label="Text alignment"
         >
-            <button (onPressedChange)="onItemPressedChange($event)" rdxToggle value="left" aria-label="Left aligned">
+            <button rdxToggle value="left" aria-label="Left aligned" (onPressedChange)="onItemPressedChange($event)">
                 Left
             </button>
             <button rdxToggle value="center" aria-label="Center aligned">Center</button>
@@ -224,7 +224,7 @@ describe('RdxToggleGroup', () => {
     changeDetection: ChangeDetectionStrategy.Eager,
     imports: [RdxToggleGroup, RdxToggle],
     template: `
-        <div [value]="['known']" rdxToggleGroup aria-label="Missing value">
+        <div rdxToggleGroup aria-label="Missing value" [value]="['known']">
             <button rdxToggle>Missing value</button>
         </div>
     `
@@ -254,9 +254,9 @@ describe('RdxToggleGroup diagnostics', () => {
     changeDetection: ChangeDetectionStrategy.Eager,
     imports: [RdxToolbarRoot, RdxToolbarGroup, RdxToggleGroupWithoutFocus, RdxToggle],
     template: `
-        <div [disabled]="toolbarDisabled()" rdxToolbarRoot aria-label="Toolbar">
-            <div [disabled]="toolbarGroupDisabled()" rdxToolbarGroup>
-                <div [(value)]="value" rdxToggleGroupWithoutFocus aria-label="Alignment">
+        <div rdxToolbarRoot aria-label="Toolbar" [disabled]="toolbarDisabled()">
+            <div rdxToolbarGroup [disabled]="toolbarGroupDisabled()">
+                <div rdxToggleGroupWithoutFocus aria-label="Alignment" [(value)]="value">
                     <button rdxToggle value="left">Left</button>
                     <button rdxToggle value="right">Right</button>
                 </div>
@@ -381,7 +381,7 @@ describe('RdxToggleGroup with ReactiveFormsModule', () => {
     changeDetection: ChangeDetectionStrategy.Eager,
     imports: [RdxToggleGroup, RdxToggle],
     template: `
-        <div [invalid]="invalid()" [errors]="errors()" [dirty]="dirty()" rdxToggleGroup aria-label="Alignment">
+        <div rdxToggleGroup aria-label="Alignment" [invalid]="invalid()" [errors]="errors()" [dirty]="dirty()">
             <button rdxToggle value="left" aria-label="Left">Left</button>
             <button rdxToggle value="right" aria-label="Right">Right</button>
         </div>
@@ -447,7 +447,7 @@ describe('RdxToggleGroup validation state', () => {
     changeDetection: ChangeDetectionStrategy.Eager,
     imports: [FormField, RdxToggleGroup, RdxToggle],
     template: `
-        <div [formField]="alignment" rdxToggleGroup aria-label="Alignment">
+        <div rdxToggleGroup aria-label="Alignment" [formField]="alignment">
             <button rdxToggle value="left" aria-label="Left">Left</button>
             <button rdxToggle value="right" aria-label="Right">Right</button>
         </div>
diff --git a/packages/primitives/toggle-group/src/toggle-group-base.ts b/packages/primitives/toggle-group/src/toggle-group-base.ts
index 9c18e67af..001beba9e 100644
--- a/packages/primitives/toggle-group/src/toggle-group-base.ts
+++ b/packages/primitives/toggle-group/src/toggle-group-base.ts
@@ -1,3 +1,4 @@
+import { RdxToggleGroupContext } from './toggle-group-context';
 import { booleanAttribute, computed, Directive, effect, input, model, output, signal, untracked } from '@angular/core';
 import { ControlValueAccessor } from '@angular/forms';
 import {
@@ -9,7 +10,6 @@ import {
     RdxFormUiTouchTarget,
     RdxFormValueControl
 } from '@radix-ng/primitives/core';
-import { RdxToggleGroupContext } from './toggle-group-context';
 
 export type RdxToggleGroupValueChangeReason = 'none';
 export type RdxToggleGroupValueChangeEventDetails = RdxCancelableChangeEventDetails<RdxToggleGroupValueChangeReason>;
diff --git a/packages/primitives/toggle-group/src/toggle-group-without-focus.ts b/packages/primitives/toggle-group/src/toggle-group-without-focus.ts
index 17ec58d84..12261eafe 100644
--- a/packages/primitives/toggle-group/src/toggle-group-without-focus.ts
+++ b/packages/primitives/toggle-group/src/toggle-group-without-focus.ts
@@ -1,8 +1,8 @@
+import { RdxToggleGroupBase, toggleGroupContext } from './toggle-group-base';
+import { provideToggleGroupContext } from './toggle-group-context';
 import { Directive, inject } from '@angular/core';
 import { provideFormUiState, provideValueAccessor, RdxFormUiStateHost } from '@radix-ng/primitives/core';
 import { injectToolbarGroupContext, injectToolbarRootContext } from '@radix-ng/primitives/toolbar';
-import { RdxToggleGroupBase, toggleGroupContext } from './toggle-group-base';
-import { provideToggleGroupContext } from './toggle-group-context';
 
 /**
  * A toggle group that does NOT create its own composite root, for use inside a container that
diff --git a/packages/primitives/toggle-group/src/toggle-group.ts b/packages/primitives/toggle-group/src/toggle-group.ts
index 62fa0bbfa..9ae253f39 100644
--- a/packages/primitives/toggle-group/src/toggle-group.ts
+++ b/packages/primitives/toggle-group/src/toggle-group.ts
@@ -1,3 +1,5 @@
+import { RdxToggleGroupBase, toggleGroupContext } from './toggle-group-base';
+import { provideToggleGroupContext } from './toggle-group-context';
 import { booleanAttribute, computed, Directive, effect, ElementRef, inject, input } from '@angular/core';
 import { RdxCompositeMetadata, RdxCompositeRoot } from '@radix-ng/primitives/composite';
 import {
@@ -8,8 +10,6 @@ import {
     RdxFormUiStateHost
 } from '@radix-ng/primitives/core';
 import { injectDirection } from '@radix-ng/primitives/direction-provider';
-import { RdxToggleGroupBase, toggleGroupContext } from './toggle-group-base';
-import { provideToggleGroupContext } from './toggle-group-context';
 
 /**
  * A set of two-state buttons that can be toggled on or off. Owns composite keyboard focus over its
diff --git a/packages/primitives/toggle-group/stories/toggle-group.stories.ts b/packages/primitives/toggle-group/stories/toggle-group.stories.ts
index 0e45074c6..f28b54375 100644
--- a/packages/primitives/toggle-group/stories/toggle-group.stories.ts
+++ b/packages/primitives/toggle-group/stories/toggle-group.stories.ts
@@ -1,3 +1,6 @@
+import { tailwindDemoDecorator } from '../../storybook/tailwind-demo';
+import { RdxToggleGroup } from '../src/toggle-group';
+import { ToggleGroup } from './toggle-group';
 import {
     LucideAlignCenter,
     LucideAlignLeft,
@@ -8,9 +11,6 @@ import {
 } from '@lucide/angular';
 import { RdxToggle } from '@radix-ng/primitives/toggle';
 import { Meta, moduleMetadata, StoryObj } from '@storybook/angular';
-import { tailwindDemoDecorator } from '../../storybook/tailwind-demo';
-import { RdxToggleGroup } from '../src/toggle-group';
-import { ToggleGroup } from './toggle-group';
 
 const html = String.raw;
 
diff --git a/packages/primitives/toggle-group/stories/toggle-group.ts b/packages/primitives/toggle-group/stories/toggle-group.ts
index 9c4e040fb..044620848 100644
--- a/packages/primitives/toggle-group/stories/toggle-group.ts
+++ b/packages/primitives/toggle-group/stories/toggle-group.ts
@@ -10,9 +10,9 @@ import { RdxToggleGroup } from '@radix-ng/primitives/toggle-group';
     template: `
         <div
             class="border-border bg-muted inline-flex rounded-md border shadow-sm"
-            [(value)]="align"
             rdxToggleGroup
             aria-label="Text alignment"
+            [(value)]="align"
         >
             <button
                 class="bg-background text-foreground hover:bg-muted data-[pressed]:bg-primary data-[pressed]:text-primary-foreground focus-visible:border-ring focus-visible:ring-ring/50 relative inline-flex h-9 w-9 cursor-pointer items-center justify-center rounded-l-md border border-transparent transition-[color,box-shadow] outline-none focus-visible:z-10 focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50"
diff --git a/packages/primitives/toggle/__tests__/toggle.spec.ts b/packages/primitives/toggle/__tests__/toggle.spec.ts
index 634a312ac..c9512cd67 100644
--- a/packages/primitives/toggle/__tests__/toggle.spec.ts
+++ b/packages/primitives/toggle/__tests__/toggle.spec.ts
@@ -1,20 +1,20 @@
+import { RdxToggle, RdxTogglePressedChangeEvent } from '../src/toggle';
 import { ChangeDetectionStrategy, Component, signal } from '@angular/core';
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { By } from '@angular/platform-browser';
 import { RdxToggleGroup } from '@radix-ng/primitives/toggle-group';
 import { vi } from 'vitest';
-import { RdxToggle, RdxTogglePressedChangeEvent } from '../src/toggle';
 
 @Component({
     changeDetection: ChangeDetectionStrategy.Eager,
     imports: [RdxToggle],
     template: `
         <button
-            [(pressed)]="pressed"
+            rdxToggle
             [disabled]="disabled()"
             [defaultPressed]="defaultPressed()"
+            [(pressed)]="pressed"
             (onPressedChange)="onToggle($event)"
-            rdxToggle
         >
             Toggle
         </button>
@@ -104,7 +104,7 @@ describe('RdxToggle (standalone)', () => {
     changeDetection: ChangeDetectionStrategy.Eager,
     imports: [RdxToggle],
     template: `
-        <div [(pressed)]="pressed" [nativeButton]="false" rdxToggle>Toggle</div>
+        <div rdxToggle [nativeButton]="false" [(pressed)]="pressed">Toggle</div>
     `
 })
 class NonNativeToggleComponent {
@@ -150,7 +150,7 @@ describe('RdxToggle (non-native host)', () => {
     changeDetection: ChangeDetectionStrategy.Eager,
     imports: [RdxToggleGroup, RdxToggle],
     template: `
-        <div [(value)]="value" [multiple]="multiple()" rdxToggleGroup aria-label="Text formatting">
+        <div rdxToggleGroup aria-label="Text formatting" [multiple]="multiple()" [(value)]="value">
             <button rdxToggle value="bold">Bold</button>
             <button rdxToggle value="italic">Italic</button>
             <button rdxToggle value="underline">Underline</button>
diff --git a/packages/primitives/toggle/stories/toggle.stories.ts b/packages/primitives/toggle/stories/toggle.stories.ts
index 4495b9ab3..59914110f 100644
--- a/packages/primitives/toggle/stories/toggle.stories.ts
+++ b/packages/primitives/toggle/stories/toggle.stories.ts
@@ -1,7 +1,7 @@
-import { LucideItalic } from '@lucide/angular';
-import { Meta, moduleMetadata, StoryObj } from '@storybook/angular';
 import { tailwindDemoDecorator } from '../../storybook/tailwind-demo';
 import { RdxToggle } from '../src/toggle';
+import { LucideItalic } from '@lucide/angular';
+import { Meta, moduleMetadata, StoryObj } from '@storybook/angular';
 
 const html = String.raw;
 
diff --git a/packages/primitives/toolbar/__tests__/toolbar.spec.ts b/packages/primitives/toolbar/__tests__/toolbar.spec.ts
index 9ecfe41bf..bc7144d96 100644
--- a/packages/primitives/toolbar/__tests__/toolbar.spec.ts
+++ b/packages/primitives/toolbar/__tests__/toolbar.spec.ts
@@ -1,22 +1,22 @@
-import { ChangeDetectionStrategy, Component, signal } from '@angular/core';
-import { ComponentFixture, TestBed } from '@angular/core/testing';
-import { By } from '@angular/platform-browser';
-import { RdxMenuModule } from '@radix-ng/primitives/menu';
 import { RdxToolbarButton } from '../src/toolbar-button';
 import { RdxToolbarGroup } from '../src/toolbar-group';
 import { RdxToolbarInput } from '../src/toolbar-input';
 import { RdxToolbarLink } from '../src/toolbar-link';
 import { RdxToolbarRoot } from '../src/toolbar-root';
 import { RdxToolbarSeparator } from '../src/toolbar-separator';
+import { ChangeDetectionStrategy, Component, signal } from '@angular/core';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { By } from '@angular/platform-browser';
+import { RdxMenuModule } from '@radix-ng/primitives/menu';
 
 @Component({
     changeDetection: ChangeDetectionStrategy.Eager,
     imports: [RdxToolbarRoot, RdxToolbarButton, RdxToolbarLink, RdxToolbarSeparator, RdxToolbarGroup],
     template: `
-        <div [orientation]="orientation()" [disabled]="rootDisabled()" rdxToolbarRoot aria-label="Formatting">
-            <div [disabled]="groupDisabled()" rdxToolbarGroup>
+        <div rdxToolbarRoot aria-label="Formatting" [orientation]="orientation()" [disabled]="rootDisabled()">
+            <div rdxToolbarGroup [disabled]="groupDisabled()">
                 <button rdxToolbarButton>Bold</button>
-                <button [disabled]="boldDisabled()" rdxToolbarButton>Italic</button>
+                <button rdxToolbarButton [disabled]="boldDisabled()">Italic</button>
             </div>
             <div rdxToolbarSeparator></div>
             <a href="#" rdxToolbarLink>Link</a>
diff --git a/packages/primitives/toolbar/index.ts b/packages/primitives/toolbar/index.ts
index 31dc5ea45..7325ba529 100644
--- a/packages/primitives/toolbar/index.ts
+++ b/packages/primitives/toolbar/index.ts
@@ -1,10 +1,10 @@
-import { NgModule } from '@angular/core';
 import { RdxToolbarButton } from './src/toolbar-button';
 import { RdxToolbarGroup } from './src/toolbar-group';
 import { RdxToolbarInput } from './src/toolbar-input';
 import { RdxToolbarLink } from './src/toolbar-link';
 import { RdxToolbarRoot } from './src/toolbar-root';
 import { RdxToolbarSeparator } from './src/toolbar-separator';
+import { NgModule } from '@angular/core';
 
 export * from './src/toolbar-button';
 export * from './src/toolbar-context';
diff --git a/packages/primitives/toolbar/src/toolbar-button.ts b/packages/primitives/toolbar/src/toolbar-button.ts
index 579b7e7ad..8ecd1112b 100644
--- a/packages/primitives/toolbar/src/toolbar-button.ts
+++ b/packages/primitives/toolbar/src/toolbar-button.ts
@@ -1,7 +1,7 @@
+import { injectToolbarGroupContext, injectToolbarRootContext } from './toolbar-context';
 import { booleanAttribute, computed, Directive, effect, inject, input } from '@angular/core';
 import { RdxCompositeItem } from '@radix-ng/primitives/composite';
 import { BooleanInput } from '@radix-ng/primitives/core';
-import { injectToolbarGroupContext, injectToolbarRootContext } from './toolbar-context';
 
 /**
  * A button within a toolbar.
diff --git a/packages/primitives/toolbar/src/toolbar-group.ts b/packages/primitives/toolbar/src/toolbar-group.ts
index 43221888b..1505c966d 100644
--- a/packages/primitives/toolbar/src/toolbar-group.ts
+++ b/packages/primitives/toolbar/src/toolbar-group.ts
@@ -1,6 +1,6 @@
+import { injectToolbarRootContext, provideToolbarGroupContext, RdxToolbarGroupContext } from './toolbar-context';
 import { booleanAttribute, computed, Directive, inject, input } from '@angular/core';
 import { BooleanInput } from '@radix-ng/primitives/core';
-import { injectToolbarRootContext, provideToolbarGroupContext, RdxToolbarGroupContext } from './toolbar-context';
 
 const groupContext = (): RdxToolbarGroupContext => {
     const group = inject(RdxToolbarGroup);
diff --git a/packages/primitives/toolbar/src/toolbar-input.ts b/packages/primitives/toolbar/src/toolbar-input.ts
index 84f1a29f8..12677169a 100644
--- a/packages/primitives/toolbar/src/toolbar-input.ts
+++ b/packages/primitives/toolbar/src/toolbar-input.ts
@@ -1,3 +1,4 @@
+import { injectToolbarGroupContext, injectToolbarRootContext } from './toolbar-context';
 import { isPlatformBrowser } from '@angular/common';
 import {
     booleanAttribute,
@@ -12,7 +13,6 @@ import {
 } from '@angular/core';
 import { RdxCompositeItem } from '@radix-ng/primitives/composite';
 import { BooleanInput } from '@radix-ng/primitives/core';
-import { injectToolbarGroupContext, injectToolbarRootContext } from './toolbar-context';
 
 /**
  * A native input within a toolbar. Participates in the toolbar's composite focus while keeping native
diff --git a/packages/primitives/toolbar/src/toolbar-link.ts b/packages/primitives/toolbar/src/toolbar-link.ts
index 677c8383b..300c2576c 100644
--- a/packages/primitives/toolbar/src/toolbar-link.ts
+++ b/packages/primitives/toolbar/src/toolbar-link.ts
@@ -1,6 +1,6 @@
+import { injectToolbarRootContext } from './toolbar-context';
 import { Directive, inject } from '@angular/core';
 import { RdxCompositeItem } from '@radix-ng/primitives/composite';
-import { injectToolbarRootContext } from './toolbar-context';
 
 const TOOLBAR_LINK_METADATA = {
     disabled: false,
diff --git a/packages/primitives/toolbar/src/toolbar-root.ts b/packages/primitives/toolbar/src/toolbar-root.ts
index 7ae7bd509..50403864b 100644
--- a/packages/primitives/toolbar/src/toolbar-root.ts
+++ b/packages/primitives/toolbar/src/toolbar-root.ts
@@ -1,8 +1,8 @@
+import { provideToolbarRootContext, RdxToolbarRootContext } from './toolbar-context';
 import { booleanAttribute, computed, Directive, effect, inject, input } from '@angular/core';
 import { RdxCompositeMetadata, RdxCompositeRoot } from '@radix-ng/primitives/composite';
 import { BooleanInput, DataOrientation, Direction } from '@radix-ng/primitives/core';
 import { injectDirection } from '@radix-ng/primitives/direction-provider';
-import { provideToolbarRootContext, RdxToolbarRootContext } from './toolbar-context';
 
 const rootContext = (): RdxToolbarRootContext => {
     const root = inject(RdxToolbarRoot);
diff --git a/packages/primitives/toolbar/src/toolbar-separator.ts b/packages/primitives/toolbar/src/toolbar-separator.ts
index 8d2afcc83..5e8986c62 100644
--- a/packages/primitives/toolbar/src/toolbar-separator.ts
+++ b/packages/primitives/toolbar/src/toolbar-separator.ts
@@ -1,6 +1,6 @@
+import { injectToolbarRootContext } from './toolbar-context';
 import { Directive, effect, inject, input } from '@angular/core';
 import { Orientation, RdxSeparatorRootDirective } from '@radix-ng/primitives/separator';
-import { injectToolbarRootContext } from './toolbar-context';
 
 /**
  * A separator between toolbar items or groups.
diff --git a/packages/primitives/toolbar/stories/toolbar-with-menu.ts b/packages/primitives/toolbar/stories/toolbar-with-menu.ts
index 26c589ae6..2c82b0869 100644
--- a/packages/primitives/toolbar/stories/toolbar-with-menu.ts
+++ b/packages/primitives/toolbar/stories/toolbar-with-menu.ts
@@ -1,8 +1,8 @@
+import { demoMenu } from '../../storybook/styles';
 import { ChangeDetectionStrategy, Component } from '@angular/core';
 import { LucideChevronDown } from '@lucide/angular';
 import { RdxMenuModule } from '@radix-ng/primitives/menu';
 import { toolbarImports } from '@radix-ng/primitives/toolbar';
-import { demoMenu } from '../../storybook/styles';
 
 @Component({
     changeDetection: ChangeDetectionStrategy.Eager,
@@ -40,12 +40,12 @@ import { demoMenu } from '../../storybook/styles';
                 </button>
 
                 @if (menu.open()) {
-                    <div [class]="m.positioner" sideOffset="6" rdxMenuPositioner>
-                        <div [class]="m.popup" rdxMenuPopup>
-                            <button [class]="m.item" rdxMenuItem>Undo</button>
-                            <button [class]="m.item" rdxMenuItem>Redo</button>
-                            <div [class]="m.separator" rdxMenuSeparator></div>
-                            <button [class]="m.item" rdxMenuItem>Clear formatting</button>
+                    <div sideOffset="6" rdxMenuPositioner [class]="m.positioner">
+                        <div rdxMenuPopup [class]="m.popup">
+                            <button rdxMenuItem [class]="m.item">Undo</button>
+                            <button rdxMenuItem [class]="m.item">Redo</button>
+                            <div rdxMenuSeparator [class]="m.separator"></div>
+                            <button rdxMenuItem [class]="m.item">Clear formatting</button>
                         </div>
                     </div>
                 }
diff --git a/packages/primitives/toolbar/stories/toolbar-with-number-field.ts b/packages/primitives/toolbar/stories/toolbar-with-number-field.ts
index b26f6e391..ab3192d17 100644
--- a/packages/primitives/toolbar/stories/toolbar-with-number-field.ts
+++ b/packages/primitives/toolbar/stories/toolbar-with-number-field.ts
@@ -27,11 +27,11 @@ const stepClass =
 
             <div
                 class="flex items-center gap-0.5"
-                [value]="16"
                 rdxNumberFieldRoot
                 min="8"
                 max="72"
                 aria-label="Font size"
+                [value]="16"
             >
                 <button class="${stepClass}" aria-label="Decrease" rdxToolbarButton rdxNumberFieldDecrement>
                     <svg lucideMinus size="16"></svg>
diff --git a/packages/primitives/toolbar/stories/toolbar-with-tooltip.ts b/packages/primitives/toolbar/stories/toolbar-with-tooltip.ts
index d8495391e..c4ee7129e 100644
--- a/packages/primitives/toolbar/stories/toolbar-with-tooltip.ts
+++ b/packages/primitives/toolbar/stories/toolbar-with-tooltip.ts
@@ -1,8 +1,8 @@
+import { demoTooltip } from '../../storybook/styles';
 import { ChangeDetectionStrategy, Component } from '@angular/core';
 import { LucideBold, LucideItalic } from '@lucide/angular';
 import { toolbarImports } from '@radix-ng/primitives/toolbar';
 import { tooltipImports } from '@radix-ng/primitives/tooltip';
-import { demoTooltip } from '../../storybook/styles';
 
 const itemClass =
     'text-foreground hover:bg-muted focus-visible:ring-ring inline-flex h-8 w-8 items-center justify-center rounded-md outline-none transition-colors focus-visible:ring-2';
@@ -21,9 +21,9 @@ const itemClass =
                 <button class="${itemClass}" aria-label="Bold" rdxToolbarButton rdxTooltipTrigger>
                     <svg lucideBold size="16"></svg>
                 </button>
-                <div *rdxTooltipPortal [class]="t.positioner" sideOffset="8" rdxTooltipPositioner>
-                    <div [class]="t.popup" rdxTooltipPopup>Bold</div>
-                    <span [class]="t.arrow" rdxTooltipArrow></span>
+                <div *rdxTooltipPortal sideOffset="8" rdxTooltipPositioner [class]="t.positioner">
+                    <div rdxTooltipPopup [class]="t.popup">Bold</div>
+                    <span rdxTooltipArrow [class]="t.arrow"></span>
                 </div>
             </ng-container>
 
@@ -31,9 +31,9 @@ const itemClass =
                 <button class="${itemClass}" aria-label="Italic" rdxToolbarButton rdxTooltipTrigger>
                     <svg lucideItalic size="16"></svg>
                 </button>
-                <div *rdxTooltipPortal [class]="t.positioner" sideOffset="8" rdxTooltipPositioner>
-                    <div [class]="t.popup" rdxTooltipPopup>Italic</div>
-                    <span [class]="t.arrow" rdxTooltipArrow></span>
+                <div *rdxTooltipPortal sideOffset="8" rdxTooltipPositioner [class]="t.positioner">
+                    <div rdxTooltipPopup [class]="t.popup">Italic</div>
+                    <span rdxTooltipArrow [class]="t.arrow"></span>
                 </div>
             </ng-container>
         </div>
diff --git a/packages/primitives/toolbar/stories/toolbar.stories.ts b/packages/primitives/toolbar/stories/toolbar.stories.ts
index 61318d42d..fdb3be76f 100644
--- a/packages/primitives/toolbar/stories/toolbar.stories.ts
+++ b/packages/primitives/toolbar/stories/toolbar.stories.ts
@@ -1,3 +1,10 @@
+import { tailwindDemoDecorator } from '../../storybook/tailwind-demo';
+import { ToolbarWithMenuExample } from './toolbar-with-menu';
+import menuSource from './toolbar-with-menu?raw';
+import { ToolbarWithNumberFieldExample } from './toolbar-with-number-field';
+import numberFieldSource from './toolbar-with-number-field?raw';
+import { ToolbarWithTooltipExample } from './toolbar-with-tooltip';
+import tooltipSource from './toolbar-with-tooltip?raw';
 import {
     LucideAlignCenter,
     LucideAlignLeft,
@@ -10,13 +17,6 @@ import { RdxToggle } from '@radix-ng/primitives/toggle';
 import { RdxToggleGroupWithoutFocus } from '@radix-ng/primitives/toggle-group';
 import { RdxToolbarButton, RdxToolbarLink, RdxToolbarRoot, RdxToolbarSeparator } from '@radix-ng/primitives/toolbar';
 import { Meta, moduleMetadata, StoryObj } from '@storybook/angular';
-import { tailwindDemoDecorator } from '../../storybook/tailwind-demo';
-import { ToolbarWithMenuExample } from './toolbar-with-menu';
-import menuSource from './toolbar-with-menu?raw';
-import { ToolbarWithNumberFieldExample } from './toolbar-with-number-field';
-import numberFieldSource from './toolbar-with-number-field?raw';
-import { ToolbarWithTooltipExample } from './toolbar-with-tooltip';
-import tooltipSource from './toolbar-with-tooltip?raw';
 
 const html = String.raw;
 
diff --git a/packages/primitives/tooltip/__tests__/tooltip.spec.ts b/packages/primitives/tooltip/__tests__/tooltip.spec.ts
index afcdba5e1..339829248 100644
--- a/packages/primitives/tooltip/__tests__/tooltip.spec.ts
+++ b/packages/primitives/tooltip/__tests__/tooltip.spec.ts
@@ -1,3 +1,4 @@
+import { defaultTooltipConfig, injectRdxTooltipConfig, provideRdxTooltipConfig } from '../src/tooltip.config';
 import { ChangeDetectionStrategy, Component, signal } from '@angular/core';
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { By } from '@angular/platform-browser';
@@ -14,7 +15,6 @@ import {
     RdxTooltipTrigger
 } from '@radix-ng/primitives/tooltip';
 import { vi } from 'vitest';
-import { defaultTooltipConfig, injectRdxTooltipConfig, provideRdxTooltipConfig } from '../src/tooltip.config';
 
 @Component({
     changeDetection: ChangeDetectionStrategy.Eager,
@@ -22,15 +22,15 @@ import { defaultTooltipConfig, injectRdxTooltipConfig, provideRdxTooltipConfig }
     template: `
         <ng-container
             #root="rdxTooltip"
-            [(open)]="open"
+            rdxTooltip
             [disabled]="disabled"
             [delay]="delay"
             [closeDelay]="closeDelay"
             [disableHoverablePopup]="disableHoverablePopup"
+            [(open)]="open"
             (onOpenChange)="handleOpenChange($event)"
-            rdxTooltip
         >
-            <button [closeOnClick]="closeOnClick" rdxTooltipTrigger>Trigger</button>
+            <button rdxTooltipTrigger [closeOnClick]="closeOnClick">Trigger</button>
         </ng-container>
     `
 })
@@ -74,7 +74,7 @@ class ConfiguredHostComponent {}
     changeDetection: ChangeDetectionStrategy.Eager,
     imports: [RdxTooltip, RdxTooltipProvider, RdxTooltipTrigger],
     template: `
-        <div [delay]="500" rdxTooltipProvider>
+        <div rdxTooltipProvider [delay]="500">
             <ng-container rdxTooltip>
                 <button rdxTooltipTrigger>Trigger</button>
             </ng-container>
@@ -87,7 +87,7 @@ class ProviderHostComponent {}
     changeDetection: ChangeDetectionStrategy.Eager,
     imports: [RdxTooltip, RdxTooltipTrigger],
     template: `
-        <div [delay]="0" rdxTooltip>
+        <div rdxTooltip [delay]="0">
             <button id="trigger-a" rdxTooltipTrigger>A</button>
             <button id="trigger-b" rdxTooltipTrigger>B</button>
         </div>
@@ -99,8 +99,8 @@ class MultipleTriggersHostComponent {}
     changeDetection: ChangeDetectionStrategy.Eager,
     imports: [RdxTooltip, RdxTooltipTrigger],
     template: `
-        <div [delay]="600" rdxTooltip>
-            <button [delay]="50" rdxTooltipTrigger>Trigger</button>
+        <div rdxTooltip [delay]="600">
+            <button rdxTooltipTrigger [delay]="50">Trigger</button>
         </div>
     `
 })
@@ -110,7 +110,7 @@ class TriggerDelayHostComponent {}
     changeDetection: ChangeDetectionStrategy.Eager,
     imports: [RdxTooltip, RdxTooltipTrigger],
     template: `
-        <div [delay]="0" rdxTooltip>
+        <div rdxTooltip [delay]="0">
             <button disabled rdxTooltipTrigger>Trigger</button>
         </div>
     `
@@ -121,7 +121,7 @@ class DisabledTriggerHostComponent {}
     changeDetection: ChangeDetectionStrategy.Eager,
     imports: [RdxTooltip, RdxTooltipTrigger, RdxTooltipPositioner, RdxTooltipPopup],
     template: `
-        <div [open]="true" rdxTooltip>
+        <div rdxTooltip [open]="true">
             <button rdxTooltipTrigger>Trigger</button>
             <div rdxTooltipPositioner>
                 <div rdxTooltipPopup>Popup</div>
@@ -135,9 +135,9 @@ class PositionerDefaultsHostComponent {}
     changeDetection: ChangeDetectionStrategy.Eager,
     imports: [RdxTooltip, RdxTooltipTrigger, RdxTooltipPositioner, RdxTooltipPopup],
     template: `
-        <div [open]="true" rdxTooltip>
+        <div rdxTooltip [open]="true">
             <button rdxTooltipTrigger>Trigger</button>
-            <div [side]="'left'" [arrowPadding]="9" rdxTooltipPositioner>
+            <div rdxTooltipPositioner [side]="'left'" [arrowPadding]="9">
                 <div rdxTooltipPopup>Popup</div>
             </div>
         </div>
@@ -149,8 +149,8 @@ class PositionerOverrideHostComponent {}
     changeDetection: ChangeDetectionStrategy.Eager,
     imports: [RdxTooltip, RdxTooltipTrigger],
     template: `
-        <button id="detached" [handle]="handle" payload="one" rdxTooltipTrigger>One</button>
-        <div [handle]="handle" rdxTooltip></div>
+        <button id="detached" payload="one" rdxTooltipTrigger [handle]="handle">One</button>
+        <div rdxTooltip [handle]="handle"></div>
     `
 })
 class DetachedHostComponent {
@@ -176,10 +176,10 @@ class RemovableTriggerHostComponent {
     changeDetection: ChangeDetectionStrategy.Eager,
     imports: [RdxTooltip, RdxTooltipPopup, RdxTooltipPositioner, RdxTooltipTrigger],
     template: `
-        <span id="outer-root" #outerRoot="rdxTooltip" [delay]="outerDelay" rdxTooltip>
+        <span #outerRoot="rdxTooltip" id="outer-root" rdxTooltip [delay]="outerDelay">
             <span id="outer-trigger" rdxTooltipTrigger>
                 <span id="outer-area">Outer</span>
-                <span id="inner-root" #innerRoot="rdxTooltip" [delay]="innerDelay" rdxTooltip>
+                <span #innerRoot="rdxTooltip" id="inner-root" rdxTooltip [delay]="innerDelay">
                     <span id="inner-trigger" rdxTooltipTrigger>Inner</span>
                     @if (innerRoot.open()) {
                         <span rdxTooltipPositioner>
@@ -205,7 +205,7 @@ class NestedTooltipHostComponent {
     changeDetection: ChangeDetectionStrategy.Eager,
     imports: [RdxTooltip, RdxTooltipPopup, RdxTooltipPortal, RdxTooltipPositioner, RdxTooltipTrigger],
     template: `
-        <div [(open)]="open" (onOpenChange)="handleOpenChange($event)" rdxTooltip>
+        <div rdxTooltip [(open)]="open" (onOpenChange)="handleOpenChange($event)">
             <button rdxTooltipTrigger>Trigger</button>
             <div *rdxTooltipPortal rdxTooltipPositioner>
                 <div rdxTooltipPopup>Popup</div>
diff --git a/packages/primitives/tooltip/index.ts b/packages/primitives/tooltip/index.ts
index f69547e9a..9242bb69b 100644
--- a/packages/primitives/tooltip/index.ts
+++ b/packages/primitives/tooltip/index.ts
@@ -7,6 +7,7 @@ import { RdxTooltipProvider } from './src/tooltip-provider';
 import { RdxTooltipTrigger } from './src/tooltip-trigger';
 
 export * from './src/tooltip';
+export * from './src/tooltip.config';
 export * from './src/tooltip-arrow';
 export * from './src/tooltip-handle';
 export * from './src/tooltip-popup';
@@ -14,7 +15,6 @@ export * from './src/tooltip-portal';
 export * from './src/tooltip-positioner';
 export * from './src/tooltip-provider';
 export * from './src/tooltip-trigger';
-export * from './src/tooltip.config';
 
 export const tooltipImports = [
     RdxTooltip,
diff --git a/packages/primitives/tooltip/src/tooltip-arrow.ts b/packages/primitives/tooltip/src/tooltip-arrow.ts
index 7ad328733..98bc1b280 100644
--- a/packages/primitives/tooltip/src/tooltip-arrow.ts
+++ b/packages/primitives/tooltip/src/tooltip-arrow.ts
@@ -1,7 +1,7 @@
+import { injectRdxTooltipContext } from './tooltip';
 import { computed, Directive, inject } from '@angular/core';
 import { RdxPopperArrow, RdxPopperContentWrapper } from '@radix-ng/primitives/popper';
 import { RdxVisuallyHiddenDirective } from '@radix-ng/primitives/visually-hidden';
-import { injectRdxTooltipContext } from './tooltip';
 
 @Directive({
     selector: '[rdxTooltipArrow]',
diff --git a/packages/primitives/tooltip/src/tooltip-handle.ts b/packages/primitives/tooltip/src/tooltip-handle.ts
index a037acde3..b1692622b 100644
--- a/packages/primitives/tooltip/src/tooltip-handle.ts
+++ b/packages/primitives/tooltip/src/tooltip-handle.ts
@@ -1,5 +1,5 @@
-import { computed, signal } from '@angular/core';
 import type { RdxTooltipContext } from './tooltip';
+import { computed, signal } from '@angular/core';
 
 /**
  * Connects a tooltip root with trigger elements rendered elsewhere in the DOM.
diff --git a/packages/primitives/tooltip/src/tooltip-popup.ts b/packages/primitives/tooltip/src/tooltip-popup.ts
index 6e1021637..8baadf9e3 100644
--- a/packages/primitives/tooltip/src/tooltip-popup.ts
+++ b/packages/primitives/tooltip/src/tooltip-popup.ts
@@ -1,6 +1,6 @@
+import { injectRdxTooltipContext } from './tooltip';
 import { computed, Directive, inject } from '@angular/core';
 import { RdxPopperContent, RdxPopperContentWrapper } from '@radix-ng/primitives/popper';
-import { injectRdxTooltipContext } from './tooltip';
 
 /**
  * The tooltip popup. Renders the content with `role="tooltip"`.
diff --git a/packages/primitives/tooltip/src/tooltip-portal.ts b/packages/primitives/tooltip/src/tooltip-portal.ts
index 9d4577685..8313a93c6 100644
--- a/packages/primitives/tooltip/src/tooltip-portal.ts
+++ b/packages/primitives/tooltip/src/tooltip-portal.ts
@@ -1,8 +1,8 @@
+import { injectRdxTooltipContext } from './tooltip';
 import { Directive, isDevMode } from '@angular/core';
 import { rdxDevError } from '@radix-ng/primitives/core';
 import { RdxPortalPresence } from '@radix-ng/primitives/portal';
 import { provideRdxPresenceContext } from '@radix-ng/primitives/presence';
-import { injectRdxTooltipContext } from './tooltip';
 
 /**
  * Structural directive that teleports the tooltip content into a container (default `document.body`)
diff --git a/packages/primitives/tooltip/src/tooltip-positioner.ts b/packages/primitives/tooltip/src/tooltip-positioner.ts
index 4163d6955..3c16842ac 100644
--- a/packages/primitives/tooltip/src/tooltip-positioner.ts
+++ b/packages/primitives/tooltip/src/tooltip-positioner.ts
@@ -1,3 +1,4 @@
+import { injectRdxTooltipContext } from './tooltip';
 import { afterNextRender, DestroyRef, Directive, effect, ElementRef, inject, output, signal } from '@angular/core';
 import {
     RDX_FLOATING_REGISTRATION,
@@ -11,7 +12,6 @@ import {
     provideRdxPopperContentWrapper,
     RdxPopperContentWrapper
 } from '@radix-ng/primitives/popper';
-import { injectRdxTooltipContext } from './tooltip';
 
 /**
  * Positions the tooltip popup against its trigger (or a custom anchor).
diff --git a/packages/primitives/tooltip/src/tooltip-provider.ts b/packages/primitives/tooltip/src/tooltip-provider.ts
index 6332f091d..9fceba42f 100644
--- a/packages/primitives/tooltip/src/tooltip-provider.ts
+++ b/packages/primitives/tooltip/src/tooltip-provider.ts
@@ -1,7 +1,7 @@
-import { DestroyRef, Directive, inject, input, numberAttribute, Signal } from '@angular/core';
-import { createContext, NumberInput } from '@radix-ng/primitives/core';
 import { injectRdxTooltipConfig } from './tooltip.config';
 import { createTooltipInstantController } from './utils';
+import { DestroyRef, Directive, inject, input, numberAttribute, Signal } from '@angular/core';
+import { createContext, NumberInput } from '@radix-ng/primitives/core';
 
 export interface RdxTooltipProviderContext {
     /** Default open delay for tooltips in this group, in milliseconds. */
diff --git a/packages/primitives/tooltip/src/tooltip-trigger.ts b/packages/primitives/tooltip/src/tooltip-trigger.ts
index 36d6339c9..eed67a07b 100644
--- a/packages/primitives/tooltip/src/tooltip-trigger.ts
+++ b/packages/primitives/tooltip/src/tooltip-trigger.ts
@@ -1,3 +1,5 @@
+import { injectRdxTooltipContext } from './tooltip';
+import { RdxTooltipHandle } from './tooltip-handle';
 import {
     booleanAttribute,
     computed,
@@ -13,8 +15,6 @@ import {
 import { BooleanInput, injectId, NumberInput } from '@radix-ng/primitives/core';
 import { createRdxTriggerInteraction } from '@radix-ng/primitives/floating-focus-manager';
 import { RdxPopperAnchor } from '@radix-ng/primitives/popper';
-import { injectRdxTooltipContext } from './tooltip';
-import { RdxTooltipHandle } from './tooltip-handle';
 
 const TOOLTIP_TRIGGER_ATTR = 'data-rdx-tooltip-trigger';
 
diff --git a/packages/primitives/tooltip/src/tooltip.ts b/packages/primitives/tooltip/src/tooltip.ts
index 890668f23..89ff3d379 100644
--- a/packages/primitives/tooltip/src/tooltip.ts
+++ b/packages/primitives/tooltip/src/tooltip.ts
@@ -1,3 +1,7 @@
+import { injectRdxTooltipConfig, RdxTrackCursorAxis } from './tooltip.config';
+import { RdxTooltipHandle } from './tooltip-handle';
+import { injectRdxTooltipProviderContext } from './tooltip-provider';
+import { createTooltipInstantController, TooltipInstantController, useTimeoutFn } from './utils';
 import {
     booleanAttribute,
     computed,
@@ -29,10 +33,6 @@ import {
     watch
 } from '@radix-ng/primitives/core';
 import { RdxPopper } from '@radix-ng/primitives/popper';
-import { RdxTooltipHandle } from './tooltip-handle';
-import { injectRdxTooltipProviderContext } from './tooltip-provider';
-import { injectRdxTooltipConfig, RdxTrackCursorAxis } from './tooltip.config';
-import { createTooltipInstantController, TooltipInstantController, useTimeoutFn } from './utils';
 
 export interface RdxTooltipContext {
     contentId: string;
diff --git a/packages/primitives/tooltip/src/utils.ts b/packages/primitives/tooltip/src/utils.ts
index 62aed7a0c..3a809f94a 100644
--- a/packages/primitives/tooltip/src/utils.ts
+++ b/packages/primitives/tooltip/src/utils.ts
@@ -1,4 +1,4 @@
-import { DestroyRef, signal, Signal } from '@angular/core';
+import { DestroyRef, Signal, signal } from '@angular/core';
 
 export type TimeoutController = {
     start: () => void;
diff --git a/packages/primitives/tooltip/stories/tooltip-default.ts b/packages/primitives/tooltip/stories/tooltip-default.ts
index 6641d2ee1..885c678c0 100644
--- a/packages/primitives/tooltip/stories/tooltip-default.ts
+++ b/packages/primitives/tooltip/stories/tooltip-default.ts
@@ -1,7 +1,7 @@
+import { cn, demoButton, demoTooltip } from '../../storybook/styles';
 import { ChangeDetectionStrategy, Component } from '@angular/core';
 import { LucidePlus } from '@lucide/angular';
 import { tooltipImports } from '@radix-ng/primitives/tooltip';
-import { cn, demoButton, demoTooltip } from '../../storybook/styles';
 
 @Component({
     changeDetection: ChangeDetectionStrategy.Eager,
@@ -9,13 +9,13 @@ import { cn, demoButton, demoTooltip } from '../../storybook/styles';
     imports: [...tooltipImports, LucidePlus],
     template: `
         <ng-container rdxTooltip>
-            <button [class]="cn(b.base, b.outline, b.size.icon)" aria-label="Add to library" rdxTooltipTrigger>
+            <button aria-label="Add to library" rdxTooltipTrigger [class]="cn(b.base, b.outline, b.size.icon)">
                 <svg aria-hidden="true" lucidePlus size="16" />
             </button>
 
-            <div *rdxTooltipPortal [class]="t.positioner" sideOffset="8" rdxTooltipPositioner>
-                <div [class]="t.popup" rdxTooltipPopup>Add to library</div>
-                <span [class]="t.arrow" rdxTooltipArrow></span>
+            <div *rdxTooltipPortal sideOffset="8" rdxTooltipPositioner [class]="t.positioner">
+                <div rdxTooltipPopup [class]="t.popup">Add to library</div>
+                <span rdxTooltipArrow [class]="t.arrow"></span>
             </div>
         </ng-container>
     `
diff --git a/packages/primitives/tooltip/stories/tooltip-delay.ts b/packages/primitives/tooltip/stories/tooltip-delay.ts
index c6f454cbe..08f6c0f86 100644
--- a/packages/primitives/tooltip/stories/tooltip-delay.ts
+++ b/packages/primitives/tooltip/stories/tooltip-delay.ts
@@ -1,6 +1,6 @@
+import { cn, demoButton, demoTooltip } from '../../storybook/styles';
 import { ChangeDetectionStrategy, Component } from '@angular/core';
 import { tooltipImports } from '@radix-ng/primitives/tooltip';
-import { cn, demoButton, demoTooltip } from '../../storybook/styles';
 
 @Component({
     changeDetection: ChangeDetectionStrategy.Eager,
@@ -10,12 +10,12 @@ import { cn, demoButton, demoTooltip } from '../../storybook/styles';
         <div class="flex items-center gap-3">
             @for (item of triggers; track item.delay) {
                 <ng-container rdxTooltip>
-                    <button [class]="cn(b.base, b.outline, b.size.md)" [delay]="item.delay" rdxTooltipTrigger>
+                    <button rdxTooltipTrigger [class]="cn(b.base, b.outline, b.size.md)" [delay]="item.delay">
                         {{ item.label }}
                     </button>
 
-                    <div *rdxTooltipPortal [class]="t.positioner" sideOffset="8" rdxTooltipPositioner>
-                        <div [class]="t.popup" rdxTooltipPopup>Opened after {{ item.delay }} ms</div>
+                    <div *rdxTooltipPortal sideOffset="8" rdxTooltipPositioner [class]="t.positioner">
+                        <div rdxTooltipPopup [class]="t.popup">Opened after {{ item.delay }} ms</div>
                     </div>
                 </ng-container>
             }
diff --git a/packages/primitives/tooltip/stories/tooltip-disabled.ts b/packages/primitives/tooltip/stories/tooltip-disabled.ts
index 63820731f..b16713e63 100644
--- a/packages/primitives/tooltip/stories/tooltip-disabled.ts
+++ b/packages/primitives/tooltip/stories/tooltip-disabled.ts
@@ -1,6 +1,6 @@
+import { cn, demoButton, demoTooltip } from '../../storybook/styles';
 import { ChangeDetectionStrategy, Component } from '@angular/core';
 import { tooltipImports } from '@radix-ng/primitives/tooltip';
-import { cn, demoButton, demoTooltip } from '../../storybook/styles';
 
 @Component({
     changeDetection: ChangeDetectionStrategy.Eager,
@@ -10,12 +10,12 @@ import { cn, demoButton, demoTooltip } from '../../storybook/styles';
         <div class="flex items-center gap-3">
             @for (item of triggers; track item.label) {
                 <ng-container rdxTooltip>
-                    <button [class]="cn(b.base, b.outline, b.size.md)" [disabled]="item.disabled" rdxTooltipTrigger>
+                    <button rdxTooltipTrigger [class]="cn(b.base, b.outline, b.size.md)" [disabled]="item.disabled">
                         {{ item.label }}
                     </button>
 
-                    <div *rdxTooltipPortal [class]="t.positioner" rdxTooltipPositioner>
-                        <div [class]="t.popup" rdxTooltipPopup>{{ item.label }} tooltip</div>
+                    <div *rdxTooltipPortal rdxTooltipPositioner [class]="t.positioner">
+                        <div rdxTooltipPopup [class]="t.popup">{{ item.label }} tooltip</div>
                     </div>
                 </ng-container>
             }
diff --git a/packages/primitives/tooltip/stories/tooltip-provider.ts b/packages/primitives/tooltip/stories/tooltip-provider.ts
index e49c5dbc1..52bc457a8 100644
--- a/packages/primitives/tooltip/stories/tooltip-provider.ts
+++ b/packages/primitives/tooltip/stories/tooltip-provider.ts
@@ -1,26 +1,26 @@
+import { cn, demoButton, demoTooltip } from '../../storybook/styles';
 import { ChangeDetectionStrategy, Component } from '@angular/core';
 import { LucideDynamicIcon } from '@lucide/angular';
 import { tooltipImports } from '@radix-ng/primitives/tooltip';
-import { cn, demoButton, demoTooltip } from '../../storybook/styles';
 
 @Component({
     changeDetection: ChangeDetectionStrategy.Eager,
     selector: 'rdx-tooltip-provider',
     imports: [...tooltipImports, LucideDynamicIcon],
     template: `
-        <div class="flex items-center gap-2" [delay]="600" [timeout]="400" rdxTooltipProvider>
+        <div class="flex items-center gap-2" rdxTooltipProvider [delay]="600" [timeout]="400">
             @for (action of actions; track action.name) {
                 <ng-container rdxTooltip>
                     <button
+                        rdxTooltipTrigger
                         [class]="cn(b.base, b.outline, b.size.icon)"
                         [attr.aria-label]="action.name"
-                        rdxTooltipTrigger
                     >
-                        <svg [lucideIcon]="action.icon" aria-hidden="true" size="16" />
+                        <svg aria-hidden="true" size="16" [lucideIcon]="action.icon" />
                     </button>
 
-                    <div *rdxTooltipPortal [class]="t.positioner" sideOffset="8" rdxTooltipPositioner>
-                        <div [class]="t.popup" rdxTooltipPopup>{{ action.name }}</div>
+                    <div *rdxTooltipPortal sideOffset="8" rdxTooltipPositioner [class]="t.positioner">
+                        <div rdxTooltipPopup [class]="t.popup">{{ action.name }}</div>
                     </div>
                 </ng-container>
             }
diff --git a/packages/primitives/tooltip/stories/tooltip-slider.ts b/packages/primitives/tooltip/stories/tooltip-slider.ts
index 0caa9f6a8..de0d6328a 100644
--- a/packages/primitives/tooltip/stories/tooltip-slider.ts
+++ b/packages/primitives/tooltip/stories/tooltip-slider.ts
@@ -1,3 +1,4 @@
+import { demoTooltip } from '../../storybook/styles';
 import { ChangeDetectionStrategy, Component, signal } from '@angular/core';
 import {
     RdxSliderControl,
@@ -8,7 +9,6 @@ import {
     RdxSliderTrack
 } from '@radix-ng/primitives/slider';
 import { tooltipImports } from '@radix-ng/primitives/tooltip';
-import { demoTooltip } from '../../storybook/styles';
 
 @Component({
     changeDetection: ChangeDetectionStrategy.Eager,
@@ -23,30 +23,30 @@ import { demoTooltip } from '../../storybook/styles';
         RdxSliderThumbInput
     ],
     template: `
-        <div class="relative w-52 select-none" [value]="45" [step]="5" rdxSliderRoot>
+        <div class="relative w-52 select-none" rdxSliderRoot [value]="45" [step]="5">
             <div class="flex h-5 w-full touch-none items-center" rdxSliderControl>
                 <div class="bg-muted relative h-1 w-full rounded-full" rdxSliderTrack>
                     <div class="bg-primary h-full rounded-full" rdxSliderIndicator></div>
 
-                    <ng-container [open]="showTooltipState()" rdxTooltip disabled>
+                    <ng-container rdxTooltip disabled [open]="showTooltipState()">
                         <div
                             class="border-border bg-background focus-within:ring-ring focus-within:ring-offset-background block size-5 rounded-full border shadow-sm focus-within:ring-2 focus-within:ring-offset-2"
-                            [rdxOnPointerDown]="handlePointerDown"
                             rdxSliderThumb
                             rdxTooltipTrigger
+                            [rdxOnPointerDown]="handlePointerDown"
                         >
                             <input rdxSliderThumbInput aria-label="Volume" />
                         </div>
 
                         <div
                             *rdxTooltipPortal
-                            [class]="t.positioner"
                             sideOffset="8"
                             side="top"
                             updatePositionStrategy="always"
                             rdxTooltipPositioner
+                            [class]="t.positioner"
                         >
-                            <div [class]="t.popup" rdxTooltipPopup>Volume</div>
+                            <div rdxTooltipPopup [class]="t.popup">Volume</div>
                         </div>
                     </ng-container>
                 </div>
diff --git a/packages/primitives/tooltip/stories/tooltip-track-cursor.ts b/packages/primitives/tooltip/stories/tooltip-track-cursor.ts
index 9595d5b4d..ea268bb1b 100644
--- a/packages/primitives/tooltip/stories/tooltip-track-cursor.ts
+++ b/packages/primitives/tooltip/stories/tooltip-track-cursor.ts
@@ -1,6 +1,6 @@
+import { demoTooltip } from '../../storybook/styles';
 import { ChangeDetectionStrategy, Component } from '@angular/core';
 import { tooltipImports } from '@radix-ng/primitives/tooltip';
-import { demoTooltip } from '../../storybook/styles';
 
 @Component({
     changeDetection: ChangeDetectionStrategy.Eager,
@@ -16,8 +16,8 @@ import { demoTooltip } from '../../storybook/styles';
                 Move the cursor over me
             </button>
 
-            <div *rdxTooltipPortal [class]="t.positioner" sideOffset="12" rdxTooltipPositioner>
-                <div [class]="t.popup" rdxTooltipPopup>Following the cursor</div>
+            <div *rdxTooltipPortal sideOffset="12" rdxTooltipPositioner [class]="t.positioner">
+                <div rdxTooltipPopup [class]="t.popup">Following the cursor</div>
             </div>
         </ng-container>
     `
diff --git a/packages/primitives/tooltip/stories/tooltip.stories.ts b/packages/primitives/tooltip/stories/tooltip.stories.ts
index 19d933427..70613dd9e 100644
--- a/packages/primitives/tooltip/stories/tooltip.stories.ts
+++ b/packages/primitives/tooltip/stories/tooltip.stories.ts
@@ -1,5 +1,3 @@
-import { Meta, moduleMetadata, StoryObj } from '@storybook/angular';
-
 import { tailwindDemoDecorator } from '../../storybook/tailwind-demo';
 import { RdxTooltipDefaultComponent } from './tooltip-default';
 import defaultSource from './tooltip-default?raw';
@@ -13,6 +11,7 @@ import { RdxTooltipSliderComponent } from './tooltip-slider';
 import sliderSource from './tooltip-slider?raw';
 import { RdxTooltipTrackCursorComponent } from './tooltip-track-cursor';
 import trackCursorSource from './tooltip-track-cursor?raw';
+import { Meta, moduleMetadata, StoryObj } from '@storybook/angular';
 
 const html = String.raw;
 
diff --git a/packages/primitives/visually-hidden/__tests__/visually-hidden-input-bubble.directive.spec.ts b/packages/primitives/visually-hidden/__tests__/visually-hidden-input-bubble.directive.spec.ts
index 03c19d363..73513101e 100644
--- a/packages/primitives/visually-hidden/__tests__/visually-hidden-input-bubble.directive.spec.ts
+++ b/packages/primitives/visually-hidden/__tests__/visually-hidden-input-bubble.directive.spec.ts
@@ -1,19 +1,19 @@
+import { RdxVisuallyHiddenInputBubbleDirective } from '../src/visually-hidden-input-bubble.directive';
 import { ChangeDetectionStrategy, Component, DebugElement } from '@angular/core';
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { By } from '@angular/platform-browser';
-import { RdxVisuallyHiddenInputBubbleDirective } from '../src/visually-hidden-input-bubble.directive';
 
 @Component({
     changeDetection: ChangeDetectionStrategy.Eager,
     imports: [RdxVisuallyHiddenInputBubbleDirective],
     template: `
         <input
+            type="checkbox"
+            rdxVisuallyHiddenInputBubble
             [name]="name"
             [value]="value"
             [required]="required"
             (change)="onChange($event)"
-            type="checkbox"
-            rdxVisuallyHiddenInputBubble
         />
     `
 })
diff --git a/packages/primitives/visually-hidden/__tests__/visually-hidden-input.directive.spec.ts b/packages/primitives/visually-hidden/__tests__/visually-hidden-input.directive.spec.ts
index 38e118000..7b5ccfd2e 100644
--- a/packages/primitives/visually-hidden/__tests__/visually-hidden-input.directive.spec.ts
+++ b/packages/primitives/visually-hidden/__tests__/visually-hidden-input.directive.spec.ts
@@ -1,13 +1,13 @@
+import { RdxVisuallyHiddenInputDirective } from '../src/visually-hidden-input.directive';
 import { ChangeDetectionStrategy, Component, DebugElement } from '@angular/core';
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { By } from '@angular/platform-browser';
-import { RdxVisuallyHiddenInputDirective } from '../src/visually-hidden-input.directive';
 
 @Component({
     changeDetection: ChangeDetectionStrategy.Eager,
     imports: [RdxVisuallyHiddenInputDirective],
     template: `
-        <input [name]="name" [value]="value" [required]="required" rdxVisuallyHiddenInput />
+        <input rdxVisuallyHiddenInput [name]="name" [value]="value" [required]="required" />
     `
 })
 class TestComponent {
diff --git a/packages/primitives/visually-hidden/__tests__/visually-hidden.directive.spec.ts b/packages/primitives/visually-hidden/__tests__/visually-hidden.directive.spec.ts
index a4e2804e2..ccf4ea66b 100644
--- a/packages/primitives/visually-hidden/__tests__/visually-hidden.directive.spec.ts
+++ b/packages/primitives/visually-hidden/__tests__/visually-hidden.directive.spec.ts
@@ -1,13 +1,13 @@
+import { RdxVisuallyHiddenDirective, VisuallyHidden } from '../src/visually-hidden.directive';
 import { ChangeDetectionStrategy, Component, DebugElement } from '@angular/core';
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { By } from '@angular/platform-browser';
-import { RdxVisuallyHiddenDirective, VisuallyHidden } from '../src/visually-hidden.directive';
 
 @Component({
     changeDetection: ChangeDetectionStrategy.Eager,
     imports: [RdxVisuallyHiddenDirective],
     template: `
-        <span [feature]="feature" rdxVisuallyHidden>Screen reader text</span>
+        <span rdxVisuallyHidden [feature]="feature">Screen reader text</span>
     `
 })
 class TestComponent {
diff --git a/packages/primitives/visually-hidden/index.ts b/packages/primitives/visually-hidden/index.ts
index 42addac99..10c4399ff 100644
--- a/packages/primitives/visually-hidden/index.ts
+++ b/packages/primitives/visually-hidden/index.ts
@@ -1,3 +1,3 @@
-export * from './src/visually-hidden-input-bubble.directive';
-export * from './src/visually-hidden-input.directive';
 export * from './src/visually-hidden.directive';
+export * from './src/visually-hidden-input.directive';
+export * from './src/visually-hidden-input-bubble.directive';
diff --git a/packages/primitives/visually-hidden/src/visually-hidden-input-bubble.directive.ts b/packages/primitives/visually-hidden/src/visually-hidden-input-bubble.directive.ts
index 6b752003f..8854d9d3d 100644
--- a/packages/primitives/visually-hidden/src/visually-hidden-input-bubble.directive.ts
+++ b/packages/primitives/visually-hidden/src/visually-hidden-input-bubble.directive.ts
@@ -1,6 +1,6 @@
+import { RdxVisuallyHiddenDirective, VisuallyHidden } from './visually-hidden.directive';
 import { computed, Directive, effect, ElementRef, inject, input, linkedSignal } from '@angular/core';
 import { watch } from '@radix-ng/primitives/core';
-import { RdxVisuallyHiddenDirective, VisuallyHidden } from './visually-hidden.directive';
 
 /**
  *
diff --git a/packages/primitives/visually-hidden/src/visually-hidden-input.directive.ts b/packages/primitives/visually-hidden/src/visually-hidden-input.directive.ts
index 267756ca7..7a1a7b9a2 100644
--- a/packages/primitives/visually-hidden/src/visually-hidden-input.directive.ts
+++ b/packages/primitives/visually-hidden/src/visually-hidden-input.directive.ts
@@ -1,5 +1,5 @@
-import { Directive } from '@angular/core';
 import { RdxVisuallyHiddenInputBubbleDirective } from './visually-hidden-input-bubble.directive';
+import { Directive } from '@angular/core';
 
 /**
  * Mirrors a control's value into a visually hidden `<input>` so it participates in form
diff --git a/packages/primitives/visually-hidden/stories/visually-hidden.stories.ts b/packages/primitives/visually-hidden/stories/visually-hidden.stories.ts
index 54cbea771..d218a0de9 100644
--- a/packages/primitives/visually-hidden/stories/visually-hidden.stories.ts
+++ b/packages/primitives/visually-hidden/stories/visually-hidden.stories.ts
@@ -1,9 +1,9 @@
-import { ChangeDetectionStrategy, Component, signal } from '@angular/core';
-import { Meta, moduleMetadata, StoryObj } from '@storybook/angular';
 import { tailwindDemoDecorator } from '../../storybook/tailwind-demo';
-import { RdxVisuallyHiddenInputBubbleDirective } from '../src/visually-hidden-input-bubble.directive';
-import { RdxVisuallyHiddenInputDirective } from '../src/visually-hidden-input.directive';
 import { RdxVisuallyHiddenDirective, VisuallyHidden } from '../src/visually-hidden.directive';
+import { RdxVisuallyHiddenInputDirective } from '../src/visually-hidden-input.directive';
+import { RdxVisuallyHiddenInputBubbleDirective } from '../src/visually-hidden-input-bubble.directive';
+import { ChangeDetectionStrategy, Component, signal } from '@angular/core';
+import { Meta, moduleMetadata, StoryObj } from '@storybook/angular';
 
 const html = String.raw;
 
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 344c02f21..dfda64b47 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -255,12 +255,21 @@ importers:
       eslint-config-prettier:
         specifier: ^10.1.8
         version: 10.1.8(eslint@10.4.1(jiti@2.4.2))
+      eslint-plugin-import:
+        specifier: ^2.32.0
+        version: 2.32.0(@typescript-eslint/parser@8.61.1(eslint@10.4.1(jiti@2.4.2))(typescript@6.0.3))(eslint@10.4.1(jiti@2.4.2))
       eslint-plugin-prettier:
         specifier: ^5.5.6
         version: 5.5.6(@types/eslint@9.6.1)(eslint-config-prettier@10.1.8(eslint@10.4.1(jiti@2.4.2)))(eslint@10.4.1(jiti@2.4.2))(prettier@3.8.3)
+      eslint-plugin-simple-import-sort:
+        specifier: ^13.0.0
+        version: 13.0.0(eslint@10.4.1(jiti@2.4.2))
       eslint-plugin-storybook:
         specifier: 10.4.6
         version: 10.4.6(eslint@10.4.1(jiti@2.4.2))(storybook@10.4.6(@testing-library/dom@10.4.0)(@types/react@19.2.16)(prettier@3.8.3)(react-dom@19.2.7(react@19.2.7))(react@19.2.7))(typescript@6.0.3)
+      eslint-plugin-unused-imports:
+        specifier: ^4.4.1
+        version: 4.4.1(@typescript-eslint/eslint-plugin@8.61.1(@typescript-eslint/parser@8.61.1(eslint@10.4.1(jiti@2.4.2))(typescript@6.0.3))(eslint@10.4.1(jiti@2.4.2))(typescript@6.0.3))(eslint@10.4.1(jiti@2.4.2))
       globals:
         specifier: ^17.4.0
         version: 17.6.0
@@ -315,12 +324,6 @@ importers:
       prettier-plugin-astro:
         specifier: ^0.14.1
         version: 0.14.1
-      prettier-plugin-organize-attributes:
-        specifier: ^1.0.0
-        version: 1.0.0(prettier@3.8.3)
-      prettier-plugin-organize-imports:
-        specifier: ^4.1.0
-        version: 4.3.0(prettier@3.8.3)(typescript@6.0.3)
       prettier-plugin-tailwindcss:
         specifier: ^0.8.0
         version: 0.8.0(prettier-plugin-astro@0.14.1)(prettier-plugin-organize-attributes@1.0.0(prettier@3.8.3))(prettier-plugin-organize-imports@4.3.0(prettier@3.8.3)(typescript@6.0.3))(prettier@3.8.3)
@@ -4442,6 +4445,9 @@ packages:
       webpack-hot-middleware:
         optional: true
 
+  '@rtsao/scc@1.1.0':
+    resolution: {integrity: sha512-zt6OdqaDoOnJ1ZYsCYGt9YmWzDXl4vQdKTyJev62gFhRGKdx7mcT54V9KIjg+d2wi9EXsPvAPKe7i7WjfVWB8g==}
+
   '@schematics/angular@22.0.2':
     resolution: {integrity: sha512-5yVlR7i5oyYcv0OuaBL5CPTrUETSZGZiqMPHhh+0Z6VbIolwr2ps0Nqa0jlmQhNmC2OL7NDIQJilX9wJgyWwUg==}
     engines: {node: ^22.22.3 || ^24.15.0 || >=26.0.0, npm: ^6.11.0 || ^7.5.6 || >=8.0.0, yarn: '>= 1.13.0'}
@@ -5026,6 +5032,9 @@ packages:
   '@types/json-schema@7.0.15':
     resolution: {integrity: sha512-5+fP8P8MFNC+AyZCDxrB2pkZFPGzqQWUzpSeuuVLvm8VMcorNYavBqoFcxK8bQz4Qsbn4oUEEem4wDLfcysGHA==}
 
+  '@types/json5@0.0.29':
+    resolution: {integrity: sha512-dRLjCWHYg4oaA77cxO64oO+7JwCwnIzkZPdrrC71jQmQtlhM556pwKo5bUzqvZndkVbeFLIIi+9TC40JNF5hNQ==}
+
   '@types/mdast@4.0.4':
     resolution: {integrity: sha512-kGaNbPh1k7AFzgpud/gMdvIm5xuECykRR+JnWKQno9TAXVa6WIVCGTPvYGekIDL4uwCZQSYbUxNBSb1aUo79oA==}
 
@@ -5771,10 +5780,30 @@ packages:
   array-ify@1.0.0:
     resolution: {integrity: sha512-c5AMf34bKdvPhQ7tBGhqkgKNUzMr4WUs+WDtC2ZUGOUncbxKMTvqxYctiseW3+L4bA8ec+GcZ6/A/FW4m8ukng==}
 
+  array-includes@3.1.9:
+    resolution: {integrity: sha512-FmeCCAenzH0KH381SPT5FZmiA/TmpndpcaShhfgEN9eCVjnFBqq3l1xrI42y8+PPLI6hypzou4GXw00WHmPBLQ==}
+    engines: {node: '>= 0.4'}
+
   array-union@2.1.0:
     resolution: {integrity: sha512-HGyxoOTYUyCM6stUe6EJgnd4EoewAI7zMdfqO+kGjnlZmBDz/cR5pf8r/cR4Wq60sL/p0IkcjUEEPwS3GFrIyw==}
     engines: {node: '>=8'}
 
+  array.prototype.findlastindex@1.2.6:
+    resolution: {integrity: sha512-F/TKATkzseUExPlfvmwQKGITM3DGTK+vkAsCZoDc5daVygbJBnjEUCbgkAvVFsgfXfX4YIqZ/27G3k3tdXrTxQ==}
+    engines: {node: '>= 0.4'}
+
+  array.prototype.flat@1.3.3:
+    resolution: {integrity: sha512-rwG/ja1neyLqCuGZ5YYrznA62D4mZXg0i1cIskIUKSiqF3Cje9/wXAls9B9s1Wa2fomMsIv8czB8jZcPmxCXFg==}
+    engines: {node: '>= 0.4'}
+
+  array.prototype.flatmap@1.3.3:
+    resolution: {integrity: sha512-Y7Wt51eKJSyi80hFrJCePGGNo5ktJCslFuboqJsbf57CCPcm5zztluPlc4/aD8sWsKvlwatezpV4U1efk8kpjg==}
+    engines: {node: '>= 0.4'}
+
+  arraybuffer.prototype.slice@1.0.4:
+    resolution: {integrity: sha512-BNoCY6SXXPQ7gF2opIP4GBE+Xw7U+pHMYKuzjgCN3GwiaIR09UUeKfheyIry77QtrCBlC0KK0q5/TER/tYh3PQ==}
+    engines: {node: '>= 0.4'}
+
   arrify@3.0.0:
     resolution: {integrity: sha512-tLkvA81vQG/XqE2mjDkGQHoOINtMHtysSnemrmoGe6PydDPMRbVugqyk4A6V/WDWEfm3l+0d8anA9r8cv/5Jaw==}
     engines: {node: '>=12'}
@@ -5805,6 +5834,10 @@ packages:
     resolution: {integrity: sha512-Z7tMw1ytTXt5jqMcOP+OQteU1VuNK9Y02uuJtKQ1Sv69jXQKKg5cibLwGJow8yzZP+eAc18EmLGPal0bp36rvQ==}
     engines: {node: '>=8'}
 
+  async-function@1.0.0:
+    resolution: {integrity: sha512-hsU18Ae8CDTR6Kgu9DYf0EbCr/a5iGL0rytQDobUcdpYOKokk8LEjVphnXkDkgpi0wYVsqrXuP0bZxJaTqdgoA==}
+    engines: {node: '>= 0.4'}
+
   async@3.2.6:
     resolution: {integrity: sha512-htCUDlxyyCLMgaM3xXg0C0LW2xqfuQ6p05pCEIsXuyQ+a1koYKTuBMzRNwmybfLgvJDMd0r1LTn4+E0Ti6C2AA==}
 
@@ -6705,6 +6738,18 @@ packages:
     resolution: {integrity: sha512-ZYP5VBHshaDAiVZxjbRVcFJpc+4xGgT0bK3vzy1HLN8jTO975HEbuYzZJcHoQEY5K1a0z8YayJkyVETa08eNTg==}
     engines: {node: '>=18'}
 
+  data-view-buffer@1.0.2:
+    resolution: {integrity: sha512-EmKO5V3OLXh1rtK2wgXRansaK1/mtVdTUEiEI0W8RkvgT05kfxaH29PliLnpLP73yYO6142Q72QNa8Wx/A5CqQ==}
+    engines: {node: '>= 0.4'}
+
+  data-view-byte-length@1.0.2:
+    resolution: {integrity: sha512-tuhGbE6CfTM9+5ANGf+oQb72Ky/0+s3xKUpHvShfiz2RxMFgFPjsXuRLBVMtvMs15awe45SRb83D6wH4ew6wlQ==}
+    engines: {node: '>= 0.4'}
+
+  data-view-byte-offset@1.0.1:
+    resolution: {integrity: sha512-BS8PfmtDGnrgYdOonGZQdLZslWIeCGFP9tpan0hi1Co2Zr2NKADsvGYA8XxuG/4UWgJ6Cjtv+YJnB6MM69QGlQ==}
+    engines: {node: '>= 0.4'}
+
   dayjs@1.11.18:
     resolution: {integrity: sha512-zFBQ7WFRvVRhKcWoUh+ZA1g2HVgUbsZm9sbddh8EC5iv93sui8DVVz1Npvz+r6meo9VKfa8NyLWBsQK1VvIKPA==}
 
@@ -6716,6 +6761,14 @@ packages:
       supports-color:
         optional: true
 
+  debug@3.2.7:
+    resolution: {integrity: sha512-CFjzYYAi4ThfiQvizrFQevTTXHtnCqWfe7x1AhgEscTz6ZbLbfoLRLPugTQyBth6f8ZERVUSyWHFD/7Wu4t1XQ==}
+    peerDependencies:
+      supports-color: '*'
+    peerDependenciesMeta:
+      supports-color:
+        optional: true
+
   debug@4.3.1:
     resolution: {integrity: sha512-doEwdvm4PCeK4K3RQN2ZC2BYUBaxwLARCqZmMjtF8a51J2Rb0xpVloFRnCODwqjpwnAoao4pelN8l3RJdv3gRQ==}
     engines: {node: '>=6.0'}
@@ -6864,6 +6917,10 @@ packages:
     resolution: {integrity: sha512-l4gcSouhcgIKRvyy99RNVOgxXiicE+2jZoNmaNmZ6JXiGajBOJAesk1OBlJuM5k2c+eudGdLxDqXuPCKIj6kpw==}
     engines: {node: '>=6'}
 
+  doctrine@2.1.0:
+    resolution: {integrity: sha512-35mSku4ZXK0vfCuHEDAwt55dg2jNajHZ1odvF+8SSr82EsZY4QmXfuWso8oEd8zRhVObSN18aM0CjSdoBX7zIw==}
+    engines: {node: '>=0.10.0'}
+
   dom-accessibility-api@0.5.16:
     resolution: {integrity: sha512-X7BJ2yElsnOJ30pZF4uIIDfBEVgF4XEBxL9Bxhy6dnrm5hkzqmsWHGTiHqRiITNhMyFLyAiWndIJP7Z1NTteDg==}
 
@@ -7028,6 +7085,10 @@ packages:
   error-stack-parser@2.1.4:
     resolution: {integrity: sha512-Sk5V6wVazPhq5MhpO+AUxJn5x7XSXGl1R93Vn7i+zS15KDVxQijejNCrz8340/2bgLBjR9GtEG8ZVKONDjcqGQ==}
 
+  es-abstract@1.24.2:
+    resolution: {integrity: sha512-2FpH9Q5i2RRwyEP1AylXe6nYLR5OhaJTZwmlcP0dL/+JCbgg7yyEo/sEK6HeGZRf3dFpWwThaRHVApXSkW3xeg==}
+    engines: {node: '>= 0.4'}
+
   es-define-property@1.0.1:
     resolution: {integrity: sha512-e3nRfgfUZ4rNGL232gUgX06QNyyez04KdjFrF+LTRoOXmrOgFKDg4BCdsjW8EnT69eqdYGmRpJwiPVYNrCaW3g==}
     engines: {node: '>= 0.4'}
@@ -7057,6 +7118,14 @@ packages:
     resolution: {integrity: sha512-j6vWzfrGVfyXxge+O0x5sh6cvxAog0a/4Rdd2K36zCMV5eJ+/+tOAngRO8cODMNWbVRdVlmGZQL2YS3yR8bIUA==}
     engines: {node: '>= 0.4'}
 
+  es-shim-unscopables@1.1.0:
+    resolution: {integrity: sha512-d9T8ucsEhh8Bi1woXCf+TIKDIROLG5WCkxg8geBCbvk22kzwC5G2OnXVMO6FUsvQlgUUXQ2itephWDLqDzbeCw==}
+    engines: {node: '>= 0.4'}
+
+  es-to-primitive@1.3.0:
+    resolution: {integrity: sha512-w+5mJ3GuFL+NjVtJlvydShqE1eN3h3PbI7/5LAsYJP/2qtuMXjfL2LpHSRqo4b4eSF5K/DH1JXKUAHSB2UW50g==}
+    engines: {node: '>= 0.4'}
+
   es6-shim@0.35.8:
     resolution: {integrity: sha512-Twf7I2v4/1tLoIXMT8HlqaBSS5H2wQTs2wx3MNYCI8K1R1/clXyCazrcVCPm/FuO9cyV8+leEaZOWD5C253NDg==}
 
@@ -7109,6 +7178,40 @@ packages:
     peerDependencies:
       eslint: '>=7.0.0'
 
+  eslint-import-resolver-node@0.3.10:
+    resolution: {integrity: sha512-tRrKqFyCaKict5hOd244sL6EQFNycnMQnBe+j8uqGNXYzsImGbGUU4ibtoaBmv5FLwJwcFJNeg1GeVjQfbMrDQ==}
+
+  eslint-module-utils@2.13.0:
+    resolution: {integrity: sha512-bLohSkT6469rRs8czj0tLTD8vaeIS/whvPRJVjDr7IuoTT1k5DYDERlNycjDj/HkOlvQdYurmfZ/g3fG5bgeLQ==}
+    engines: {node: '>=4'}
+    peerDependencies:
+      '@typescript-eslint/parser': '*'
+      eslint: '*'
+      eslint-import-resolver-node: '*'
+      eslint-import-resolver-typescript: '*'
+      eslint-import-resolver-webpack: '*'
+    peerDependenciesMeta:
+      '@typescript-eslint/parser':
+        optional: true
+      eslint:
+        optional: true
+      eslint-import-resolver-node:
+        optional: true
+      eslint-import-resolver-typescript:
+        optional: true
+      eslint-import-resolver-webpack:
+        optional: true
+
+  eslint-plugin-import@2.32.0:
+    resolution: {integrity: sha512-whOE1HFo/qJDyX4SnXzP4N6zOWn79WhnCUY/iDR0mPfQZO8wcYE4JClzI2oZrhBnnMUCBCHZhO6VQyoBU95mZA==}
+    engines: {node: '>=4'}
+    peerDependencies:
+      '@typescript-eslint/parser': '*'
+      eslint: ^2 || ^3 || ^4 || ^5 || ^6 || ^7.2.0 || ^8 || ^9
+    peerDependenciesMeta:
+      '@typescript-eslint/parser':
+        optional: true
+
   eslint-plugin-prettier@5.5.6:
     resolution: {integrity: sha512-ifetmTcxWfz+4qRW3pH/ujdTq2jQIj59AxJMIN26K5avYgU8dxycUETQonWiW+wPrYXA0j3Try0l1CnwVQtDqQ==}
     engines: {node: ^14.18.0 || >=16.0.0}
@@ -7123,12 +7226,26 @@ packages:
       eslint-config-prettier:
         optional: true
 
+  eslint-plugin-simple-import-sort@13.0.0:
+    resolution: {integrity: sha512-McAc+/Nlvcg4byY/CABGH8kqnefWBj8s3JA2okEtz8ixbECQgU46p0HkTUKa4YS7wvgGceimlc34p1nXqbWqtA==}
+    peerDependencies:
+      eslint: '>=5.0.0'
+
   eslint-plugin-storybook@10.4.6:
     resolution: {integrity: sha512-CfGSXn6zFspeYTU8R7v797MOmJFj8xc6MWf/oGuRwbKeMoSwnliR+OlXSjMZYM1D6gfmwiuH1VX58LSHdn+ZPg==}
     peerDependencies:
       eslint: '>=8'
       storybook: ^10.4.6
 
+  eslint-plugin-unused-imports@4.4.1:
+    resolution: {integrity: sha512-oZGYUz1X3sRMGUB+0cZyK2VcvRX5lm/vB56PgNNcU+7ficUCKm66oZWKUubXWnOuPjQ8PvmXtCViXBMONPe7tQ==}
+    peerDependencies:
+      '@typescript-eslint/eslint-plugin': ^8.0.0-0 || ^7.0.0 || ^6.0.0 || ^5.0.0
+      eslint: ^10.0.0 || ^9.0.0 || ^8.0.0
+    peerDependenciesMeta:
+      '@typescript-eslint/eslint-plugin':
+        optional: true
+
   eslint-scope@5.1.1:
     resolution: {integrity: sha512-2NxwbF/hZ0KpepYN0cNbo+FN6XoK7GaHlQhgx/hIZl6Va0bF45RQOOwhLIy8lQDbuCiadSLCBnH2CFYquit5bw==}
     engines: {node: '>=8.0.0'}
@@ -7557,6 +7674,10 @@ packages:
     resolution: {integrity: sha512-939eZS4gJ3htTHAldmyyuzlrD58P03fHG49v2JfFXbV6OhvZKRC9j2yAtdHw/zrp2zXHuv05zMIy40F0ge7spA==}
     engines: {node: '>=18'}
 
+  function.prototype.name@1.2.0:
+    resolution: {integrity: sha512-jObKIik1P2QjPHP5nz5BaOtUlfgS0fWo8IUByNXkM+o+02sJOi94em77GwJKQSJ3gfPHdgzLNrHc1uokV4P/ew==}
+    engines: {node: '>= 0.4'}
+
   functions-have-names@1.2.3:
     resolution: {integrity: sha512-xckBUXyTIqT97tq2x2AMb+g163b5JFysYk0x4qxNFwbfQkmNZoiRHb6sPzI9/QV33WeuvVYBUIiD4NzNIyqaRQ==}
 
@@ -7564,6 +7685,10 @@ packages:
     resolution: {integrity: sha512-plz8RVjfcDedTGfVngWH1jmJvBvAwi1v2jecfDerbEnMcmOYUEEwKFTHbNoCiYyzaK2Ws8lABkTCcRSqCY1q4w==}
     engines: {node: '>=10'}
 
+  generator-function@2.0.1:
+    resolution: {integrity: sha512-SFdFmIJi+ybC0vjlHN0ZGVGHc3lgE0DxPAT0djjVg+kjOnSqclqmj0KQ7ykTOLP6YxoqOvuAODGdcHJn+43q3g==}
+    engines: {node: '>= 0.4'}
+
   gensync@1.0.0-beta.2:
     resolution: {integrity: sha512-3hN7NaskYvMDLQY55gnW3NQ+mesEAepTqlg+VEbj7zzqEMBVNhzcGYYeqFo/TlYz6eQiFcp1HcsCZO+nGgS8zg==}
     engines: {node: '>=6.9.0'}
@@ -7604,6 +7729,10 @@ packages:
     resolution: {integrity: sha512-kVCxPF3vQM/N0B1PmoqVUqgHP+EeVjmZSQn+1oCRPxd2P21P2F19lIgbR3HBosbB1PUhOAoctJnfEn2GbN2eZA==}
     engines: {node: '>=18'}
 
+  get-symbol-description@1.1.0:
+    resolution: {integrity: sha512-w9UMqWwJxHNOvoNzSJ2oPF5wvYcvP7jUvYzhp67yEhTi17ZDBBC1z9pTdGuzjD+EFIqLSYRweZjqfiPzQ06Ebg==}
+    engines: {node: '>= 0.4'}
+
   get-them-args@1.3.2:
     resolution: {integrity: sha512-LRn8Jlk+DwZE4GTlDbT3Hikd1wSHgLMme/+7ddlqKd7ldwR6LjJgTVWzBnR01wnYGe4KgrXjg287RaI22UHmAw==}
 
@@ -7670,6 +7799,10 @@ packages:
     resolution: {integrity: sha512-sepffkT8stwnIYbsMBpoCHJuJM5l98FUF2AnE07hfvE0m/qp3R586hw4jF4uadbhvg1ooIdzuu7CsfD2jzCaNA==}
     engines: {node: '>=18'}
 
+  globalthis@1.0.4:
+    resolution: {integrity: sha512-DpLKbNU4WylpxJykQujfCcwYWiV/Jhm50Goo0wrVILAv5jOr9d+H+UR3PhSCD2rCCEIg0uc+G+muBTwD54JhDQ==}
+    engines: {node: '>= 0.4'}
+
   globby@11.1.0:
     resolution: {integrity: sha512-jhIXaOzy1sb8IyocaruWSn1TjmnBVs8Ayhcy83rmxNJ8q2uWKCAj3CnJY+KpGSXCueAPc0i05kVvVKtP1t9S3g==}
     engines: {node: '>=10'}
@@ -7725,6 +7858,10 @@ packages:
   has-property-descriptors@1.0.2:
     resolution: {integrity: sha512-55JNKuIW+vq4Ke1BjOTjM2YctQIvCT7GFzHwmfZPGo5wnrgkid0YQtnAleFSqumZm4az3n2BS+erby5ipJdgrg==}
 
+  has-proto@1.2.0:
+    resolution: {integrity: sha512-KIL7eQPfHQRC8+XluaIw7BHUwwqL19bQn4hzNgdr+1wXoU0KKj6rufu47lhY7KbJR2C6T6+PfyN0Ea7wkSS+qQ==}
+    engines: {node: '>= 0.4'}
+
   has-symbols@1.1.0:
     resolution: {integrity: sha512-1cDNdwJ2Jaohmb3sg4OmKaMBwuC48sYni5HUw2DvsC8LjGTLK9h+eb1X6RyuOHe4hT0ULCW68iomhjUoKUqlPQ==}
     engines: {node: '>= 0.4'}
@@ -8042,6 +8179,10 @@ packages:
   is-arrayish@0.2.1:
     resolution: {integrity: sha512-zz06S8t0ozoDXMG+ube26zeCTNXcKIPJZJi8hBrF4idCLms4CG9QtK7qBl1boi5ODzFpjswb5JPmHCbMpjaYzg==}
 
+  is-async-function@2.1.1:
+    resolution: {integrity: sha512-9dgM/cZBnNvjzaMYHVoxxfPj2QXt22Ev7SuuPrs+xav0ukGB0S6d4ydZdEiM48kLx5kDV+QBPrpVnFyefL8kkQ==}
+    engines: {node: '>= 0.4'}
+
   is-bigint@1.1.0:
     resolution: {integrity: sha512-n4ZT37wG78iz03xPRKJrHTdZbe3IicyucEtdRsV5yglwc3GyUfbAfpSeD0FJ41NbUNSt5wbhqfp1fS+BgnvDFQ==}
     engines: {node: '>= 0.4'}
@@ -8062,6 +8203,10 @@ packages:
     resolution: {integrity: sha512-evOr8xfXKxE6qSR0hSXL2r3sd7ALj8+7jQEUvPYcm5sgZFdJ+AYzT6yNmJenvIYQBgIGwfwz08sL8zoL7yq2BA==}
     engines: {node: '>= 0.4'}
 
+  is-data-view@1.0.2:
+    resolution: {integrity: sha512-RKtWF8pGmS87i2D6gqQu/l7EYRlVdfzemCJN/P3UOs//x1QE7mfhvzHIApBTRf7axvT6DMGwSwBXYCT0nfB9xw==}
+    engines: {node: '>= 0.4'}
+
   is-date-object@1.1.0:
     resolution: {integrity: sha512-PwwhEakHVKTdRNVOw+/Gyh0+MzlCl4R6qKvkhuvLtPMggI1WAHt9sOwZxQLSGpUaDnrdyDsomoRgNnCfKNSXXg==}
     engines: {node: '>= 0.4'}
@@ -8079,10 +8224,18 @@ packages:
     engines: {node: ^12.20.0 || ^14.13.1 || >=16.0.0}
     hasBin: true
 
+  is-document.all@1.0.0:
+    resolution: {integrity: sha512-+XSoyS05OdBbhFuELhgTCpFNHkpBOJqtsZfUFFpe5QTw+9Sjbh8zitxhQkYAo6wV7e1Vb8cAPvpCk9jGam/82g==}
+    engines: {node: '>= 0.4'}
+
   is-extglob@2.1.1:
     resolution: {integrity: sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ==}
     engines: {node: '>=0.10.0'}
 
+  is-finalizationregistry@1.1.1:
+    resolution: {integrity: sha512-1pC6N8qWJbWoPtEjgcL2xyhQOP491EQjeUo3qTKcmV8YSDDJrOepfG8pcC7h/QgnQHYSv0mJ3Z/ZWxmatVrysg==}
+    engines: {node: '>= 0.4'}
+
   is-fullwidth-code-point@3.0.0:
     resolution: {integrity: sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg==}
     engines: {node: '>=8'}
@@ -8095,6 +8248,10 @@ packages:
     resolution: {integrity: sha512-cTIB4yPYL/Grw0EaSzASzg6bBy9gqCofvWN8okThAYIxKJZC+udlRAmGbM0XLeniEJSs8uEgHPGuHSe1XsOLSQ==}
     engines: {node: '>=6'}
 
+  is-generator-function@1.1.2:
+    resolution: {integrity: sha512-upqt1SkGkODW9tsGNG5mtXTXtECizwtS2kA161M+gJPc1xdb/Ax629af6YrTwcOeQHbewrPNlE5Dx7kzvXTizA==}
+    engines: {node: '>= 0.4'}
+
   is-glob@4.0.3:
     resolution: {integrity: sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==}
     engines: {node: '>=0.10.0'}
@@ -8124,6 +8281,10 @@ packages:
     resolution: {integrity: sha512-1Qed0/Hr2m+YqxnM09CjA2d/i6YZNfF6R2oRAOj36eUdS6qIV/huPJNSEpKbupewFs+ZsJlxsjjPbc0/afW6Lw==}
     engines: {node: '>= 0.4'}
 
+  is-negative-zero@2.0.3:
+    resolution: {integrity: sha512-5KoIu2Ngpyek75jXodFvnafB6DJgr3u8uuK0LEZJjrU19DrMD3EVERaR8sjz8CCGgpZvxPl9SuE1GMVPFHx1mw==}
+    engines: {node: '>= 0.4'}
+
   is-network-error@1.3.2:
     resolution: {integrity: sha512-PhBY86zaxNZUuWP6h13Vu5oFe0XY6/UlKzQnYFELzGVHygP3MxmvTfYSG7GN3aIab/iWudSMgjSnG9Dq+nHrgA==}
     engines: {node: '>=16'}
@@ -8205,6 +8366,10 @@ packages:
     resolution: {integrity: sha512-+oDTluR6WEjdXEJMnC2z6A4FRwFoYuvShVVEGsS7ewc0UTi2QtAKMDJuL4BDEVt+5T7MjFo12RP8ghOM75oKJw==}
     engines: {node: '>=8'}
 
+  is-typed-array@1.1.15:
+    resolution: {integrity: sha512-p3EcsicXjit7SaskXHs1hA91QxgTw46Fv6EFKKGS5DRFLD8yKnohjF3hxoju94b/OcMZoQukzpPpBE9uLVKzgQ==}
+    engines: {node: '>= 0.4'}
+
   is-typedarray@1.0.0:
     resolution: {integrity: sha512-cyA56iCMHAh5CdzjJIa4aohJyeO1YbwLi3Jc35MmRU6poroFjIGZzUzupGiRPOjgHg9TLu43xbpwXk523fMxKA==}
 
@@ -8223,6 +8388,10 @@ packages:
     resolution: {integrity: sha512-K5pXYOm9wqY1RgjpL3YTkF39tni1XajUIkawTLUo9EZEVUFga5gSQJF8nNS7ZwJQ02y+1YCNYcMh+HIf1ZqE+w==}
     engines: {node: '>= 0.4'}
 
+  is-weakref@1.1.1:
+    resolution: {integrity: sha512-6i9mGWSlqzNMEqpCp93KwRS1uUOodk2OJ6b+sq7ZPDSy2WuI5NFIxp/254TytR8ftefexkWn5xNiHUNpPOfSew==}
+    engines: {node: '>= 0.4'}
+
   is-weakset@2.0.4:
     resolution: {integrity: sha512-mfcwb6IzQyOKTs84CQMrOwW4gQcaTOAWJ0zzJCl2WSPDrWk/OzDaImWFH3djXhb24g4eudZfLRozAvPGw4d9hQ==}
     engines: {node: '>= 0.4'}
@@ -8524,6 +8693,10 @@ packages:
   json-stringify-safe@5.0.1:
     resolution: {integrity: sha512-ZClg6AaYvamvYEE82d3Iyd3vSSIjQ+odgjaTzRuO3s7toCdFKczob2i0zCh7JE8kWn17yvAWhUVxvqGwUalsRA==}
 
+  json5@1.0.2:
+    resolution: {integrity: sha512-g1MWMLBiz8FKi1e4w0UyVL3w+iJceWAFBAaBnnGKOpNa5f8TLktkbre1+s6oICydWAm+HRUGTmI+//xv2hvXYA==}
+    hasBin: true
+
   json5@2.2.3:
     resolution: {integrity: sha512-XmOWe7eyHYH14cLdVPoyg+GOH3rYX++KpzrylJwSW98t3Nk+U8XOl8FWKOgwtzdb8lXGf6zYwDUzeHMWfxasyg==}
     engines: {node: '>=6'}
@@ -9365,6 +9538,10 @@ packages:
   node-addon-api@7.1.1:
     resolution: {integrity: sha512-5m3bsyrjFWE1xf7nz7YXdN4udnVtXK6/Yfgn5qnahL6bCkf2yKt4k3nuTKAtT4r3IG8JNR2ncsIMdZuAzJjHQQ==}
 
+  node-exports-info@1.6.0:
+    resolution: {integrity: sha512-pyFS63ptit/P5WqUkt+UUfe+4oevH+bFeIiPPdfb0pFeYEu/1ELnJu5l+5EcTKYL5M7zaAa7S8ddywgXypqKCw==}
+    engines: {node: '>= 0.4'}
+
   node-fetch@2.6.7:
     resolution: {integrity: sha512-ZjMPFEfVx5j+y2yF35Kzx5sF7kDzxuDj6ziH4FFbOp87zKDZNx8yExJIb05OGF4Nlt9IHFIMBkRl41VdvcNdbQ==}
     engines: {node: 4.x || >=6.0.0}
@@ -9502,6 +9679,22 @@ packages:
     resolution: {integrity: sha512-nK28WOo+QIjBkDduTINE4JkF/UJJKyf2EJxvJKfblDpyg0Q+pkOHNTL0Qwy6NP6FhE/EnzV73BxxqcJaXY9anw==}
     engines: {node: '>= 0.4'}
 
+  object.entries@1.1.9:
+    resolution: {integrity: sha512-8u/hfXFRBD1O0hPUjioLhoWFHRmt6tKA4/vZPyckBr18l1KE9uHrFaFaUi8MDRTpi4uak2goyPTSNJLXX2k2Hw==}
+    engines: {node: '>= 0.4'}
+
+  object.fromentries@2.0.8:
+    resolution: {integrity: sha512-k6E21FzySsSK5a21KRADBd/NGneRegFO5pLHfdQLpRDETUNJueLXs3WCzyQ3tFRDYgbq3KHGXfTbi2bs8WQ6rQ==}
+    engines: {node: '>= 0.4'}
+
+  object.groupby@1.0.3:
+    resolution: {integrity: sha512-+Lhy3TQTuzXI5hevh8sBGqbmurHbbIjAi0Z4S63nthVLmLxfbj4T54a4CfZrXIrt9iP4mVAPYMo/v99taj3wjQ==}
+    engines: {node: '>= 0.4'}
+
+  object.values@1.2.1:
+    resolution: {integrity: sha512-gXah6aZrcUxjWg2zR2MwouP2eHlCBzdV4pygudehaKXSGW4v2AsRQUK+lwwXhii6KFZcunEnmSUoYp5CXibxtA==}
+    engines: {node: '>= 0.4'}
+
   obuf@1.1.2:
     resolution: {integrity: sha512-PX1wu0AmAdPqOL1mWhqmlOd8kOIZQwGZw6rh7uby9fTc5lhaOWFLX3I6R1hrF9k3zUY40e6igsLGkDXK92LJNg==}
 
@@ -9590,6 +9783,10 @@ packages:
     resolution: {integrity: sha512-xl9MAoU97MH1Xt5K9ERft2YfCAoaO6msy1OBA0ozxEC0x0TmIoE6K3QvgJMMZA9yKGLmHXNY/YZoDbiGDj4zYw==}
     engines: {node: '>=10'}
 
+  own-keys@1.0.1:
+    resolution: {integrity: sha512-qFOyK5PjiWZd+QQIh+1jhdb9LpxTF0qs7Pm8o5QHYZ0M3vKqSqzsZaEB6oWlxZ+q2sJBMI/Ktgd2N5ZwQoRHfg==}
+    engines: {node: '>= 0.4'}
+
   oxc-parser@0.121.0:
     resolution: {integrity: sha512-ek9o58+SCv6AV7nchiAcUJy1DNE2CC5WRdBcO0mF+W4oRjNQfPO7b3pLjTHSFECpHkKGOZSQxx3hk8viIL5YCg==}
     engines: {node: ^20.19.0 || >=22.12.0}
@@ -10593,6 +10790,10 @@ packages:
   reflect-metadata@0.2.2:
     resolution: {integrity: sha512-urBwgfrvVP/eAyXx4hluJivBKzuEbSQs9rKWCrCkbSxNv8mxPcUZKeuoF3Uy4mJl3Lwprp6yy5/39VWigZ4K6Q==}
 
+  reflect.getprototypeof@1.0.10:
+    resolution: {integrity: sha512-00o4I+DVrefhv+nX0ulyi3biSHCPDe+yLv5o/p6d/UVlirijB8E16FtfwSAi4g3tcqrQ4lRAqQSoFEZJehYEcw==}
+    engines: {node: '>= 0.4'}
+
   regenerate-unicode-properties@10.2.2:
     resolution: {integrity: sha512-m03P+zhBeQd1RGnYxrGyDAPpWX/epKirLrp8e3qevZdVkKtnCrjjWczIbYc8+xd6vcTStVlqfycTx1KR4LOr0g==}
     engines: {node: '>=4'}
@@ -10684,6 +10885,11 @@ packages:
     resolution: {integrity: sha512-oKWePCxqpd6FlLvGV1VU0x7bkPmmCNolxzjMf4NczoDnQcIWrAF+cPtZn5i6n+RfD2d9i0tzpKnG6Yk168yIyw==}
     hasBin: true
 
+  resolve@2.0.0-next.7:
+    resolution: {integrity: sha512-tqt+NBWwyaMgw3zDsnygx4CByWjQEJHOPMdslYhppaQSJUtL/D4JO9CcBBlhPoI8lz9oJIDXkwXfhF4aWqP8xQ==}
+    engines: {node: '>= 0.4'}
+    hasBin: true
+
   responselike@2.0.1:
     resolution: {integrity: sha512-4gl03wn3hj1HP3yzgdI7d3lCkF95F21Pz4BPGvKHinyQzALR5CapwC8yIi0Rh58DEMQ/SguC03wFj2k0M/mHhw==}
 
@@ -10775,12 +10981,20 @@ packages:
   s.color@0.0.15:
     resolution: {integrity: sha512-AUNrbEUHeKY8XsYr/DYpl+qk5+aM+DChopnWOPEzn8YKzOhv4l2zH6LzZms3tOZP3wwdOyc0RmTciyi46HLIuA==}
 
+  safe-array-concat@1.1.4:
+    resolution: {integrity: sha512-wtZlHyOje6OZTGqAoaDKxFkgRtkF9CnHAVnCHKfuj200wAgL+bSJhdsCD2l0Qx/2ekEXjPWcyKkfGb5CPboslg==}
+    engines: {node: '>=0.4'}
+
   safe-buffer@5.1.2:
     resolution: {integrity: sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g==}
 
   safe-buffer@5.2.1:
     resolution: {integrity: sha512-rp3So07KcdmmKbGvgaNxQSJr7bGVSVk5S9Eq1F+ppbRo70+YeaDxkw5Dd8NPN+GD6bjnYm2VuPuCXmpuYvmCXQ==}
 
+  safe-push-apply@1.0.0:
+    resolution: {integrity: sha512-iKE9w/Z7xCzUMIZqdBsp6pEQvwuEebH4vdpjcDWnyzaI6yl6O9FHvVpmGelvEHNsoY6wGblkxR6Zty/h00WiSA==}
+    engines: {node: '>= 0.4'}
+
   safe-regex-test@1.1.0:
     resolution: {integrity: sha512-x/+Cz4YrimQxQccJf5mKEbIa1NzeCRNI5Ecl/ekmlYaampdNLPalVyIcCZNNH3MvmqBugV5TMYZXv0ljslUlaw==}
     engines: {node: '>= 0.4'}
@@ -11089,6 +11303,10 @@ packages:
     resolution: {integrity: sha512-7PGFlmtwsEADb0WYyvCMa1t+yke6daIG4Wirafur5kcf+MhUnPms1UeR0CKQdTZD81yESwMHbtn+TR+dMviakQ==}
     engines: {node: '>= 0.4'}
 
+  set-proto@1.0.0:
+    resolution: {integrity: sha512-RJRdvCo6IAnPdsvP/7m6bsQqNnn1FCBX5ZNtFL98MmFF/4xAIJTIg1YbHW5DC2W5SKZanrC6i4HsJqlajw/dZw==}
+    engines: {node: '>= 0.4'}
+
   setprototypeof@1.2.0:
     resolution: {integrity: sha512-E5LDX7Wrp85Kil5bhZv46j8jOeboKq5JMmYM3gVGdGH8xFpPWXUMsNrlODCrkoxMEeNi/XZIwuRvY4XNwYMJpw==}
 
@@ -11351,6 +11569,18 @@ packages:
     resolution: {integrity: sha512-IIaP0g3iy9Cyy18w3M9YcaDudujEAVHKt3a3QJg1+sr/oX96TbaGUubG0hJyCjCBThFH+tFpcIyoUHUn1ogaLA==}
     engines: {node: '>=20'}
 
+  string.prototype.trim@1.2.10:
+    resolution: {integrity: sha512-Rs66F0P/1kedk5lyYyH9uBzuiI/kNRmwJAR9quK6VOtIpZ2G+hMZd+HQbbv25MgCA6gEffoMZYxlTod4WcdrKA==}
+    engines: {node: '>= 0.4'}
+
+  string.prototype.trimend@1.0.9:
+    resolution: {integrity: sha512-G7Ok5C6E/j4SGfyLCloXTrngQIQU3PWtXGst3yM7Bea9FRURf1S42ZHlZZtsNque2FN2PoUhfZXYLNWwEr4dLQ==}
+    engines: {node: '>= 0.4'}
+
+  string.prototype.trimstart@1.0.8:
+    resolution: {integrity: sha512-UXSH262CSZY1tfu3G3Secr6uGLCFVPMhIqHjlgCUtCCcgihYc/xKs9djMTMUOb2j1mVSeU8EU6NWc/iQKU6Gfg==}
+    engines: {node: '>= 0.4'}
+
   string_decoder@1.1.1:
     resolution: {integrity: sha512-n/ShnvDi6FHbbVfviro+WojiFzv+s8MPMHBczVePfUpDJLwoLT0ht1l4YwBCbi8pJAveEEdnkHyPyTP/mzRfwg==}
 
@@ -11791,6 +12021,9 @@ packages:
     resolution: {integrity: sha512-zbem3rfRS8BgeNK50Zz5SIQgXzLafiHjOwUAvk/38/o1jHn/V5QAgVUcz884or7WYcPaH3N2CIfUc2u0ul7UcA==}
     engines: {node: '>=10.13.0'}
 
+  tsconfig-paths@3.15.0:
+    resolution: {integrity: sha512-2Ac2RgzDe/cn48GvOe3M+o82pEFewD3UPbyoUHHdKasHwJKjds4fLXWf/Ux5kATBKN20oaFGu+jbElp1pos0mg==}
+
   tsconfig-paths@4.2.0:
     resolution: {integrity: sha512-NoZ4roiN7LnbKn9QqE1amc9DJfzvZXxF4xDavcOWt1BPkdx+m+0gJuPM+S0vCe7zTJMYUP0R8pO2XMr+Y8oLIg==}
     engines: {node: '>=6'}
@@ -11842,6 +12075,22 @@ packages:
     resolution: {integrity: sha512-faYHw0anBbc/kWF3zFTEnxSFOAGUX9GFbOBthvDdLsIlEoWOFOtS0zgCiQYwIskL9iGXZL3kAXD8OoZ4GmMATA==}
     engines: {node: '>= 18'}
 
+  typed-array-buffer@1.0.3:
+    resolution: {integrity: sha512-nAYYwfY3qnzX30IkA6AQZjVbtK6duGontcQm1WSG1MD94YLqK0515GNApXkoxKOWMusVssAHWLh9SeaoefYFGw==}
+    engines: {node: '>= 0.4'}
+
+  typed-array-byte-length@1.0.3:
+    resolution: {integrity: sha512-BaXgOuIxz8n8pIq3e7Atg/7s+DpiYrxn4vdot3w9KbnBhcRQq6o3xemQdIfynqSeXeDrF32x+WvfzmOjPiY9lg==}
+    engines: {node: '>= 0.4'}
+
+  typed-array-byte-offset@1.0.4:
+    resolution: {integrity: sha512-bTlAFB/FBYMcuX81gbL4OcpH5PmlFHqlCCpAl8AlEzMz5k53oNDvN8p1PNOWLEmI2x4orp3raOFB51tv9X+MFQ==}
+    engines: {node: '>= 0.4'}
+
+  typed-array-length@1.0.8:
+    resolution: {integrity: sha512-phPGCwqr2+Qo0fwniCE8e4pKnGu/yFb5nD5Y8bf0EEeiI5GklnACYA9GFy/DrAeRrKHXvHn+1SUsOWgJp6RO+g==}
+    engines: {node: '>= 0.4'}
+
   typed-assert@1.0.9:
     resolution: {integrity: sha512-KNNZtayBCtmnNmbo5mG47p1XsCyrx6iVqomjcZnec/1Y5GGARaxPs6r49RnSPeUP3YjNYiU9sQHAtY4BBvnZwg==}
 
@@ -11881,6 +12130,10 @@ packages:
     resolution: {integrity: sha512-rvKSBiC5zqCCiDZ9kAOszZcDvdAHwwIKJG33Ykj43OKcWsnmcBRL09YTU4nOeHZ8Y2a7l1MgTd08SBe9A8Qj6A==}
     engines: {node: '>=18'}
 
+  unbox-primitive@1.1.0:
+    resolution: {integrity: sha512-nWJ91DjeOkej/TA8pXQ3myruKpKEYgqvpw9lz4OPHj/NWFNluYrjbz9j01CJ8yKQd2g4jFoOkINCTW2I5LEEyw==}
+    engines: {node: '>= 0.4'}
+
   unbzip2-stream@1.4.3:
     resolution: {integrity: sha512-mlExGW4w71ebDJviH16lQLtZS32VKqsSfk80GCfUlwT/4/hNRFsoscrF/c++9xinkMzECL1uL9DDwXqFWkruPg==}
 
@@ -12371,6 +12624,10 @@ packages:
     resolution: {integrity: sha512-TbX3mj8n0odCBFVlY8AxkqcHASw3L60jIuF8jFP78az3C2YhmGvqbHBpAjTRH2/xqYunrJ9g1jSyjCjpoWzIAA==}
     engines: {node: '>= 0.4'}
 
+  which-builtin-type@1.2.1:
+    resolution: {integrity: sha512-6iBczoX+kDQ7a3+YJBnh3T+KZRxM/iYNPXicqk66/Qfm1b93iu+yOImkg0zHbj5LNOcNv1TEADiZ0xa34B4q6Q==}
+    engines: {node: '>= 0.4'}
+
   which-collection@1.0.2:
     resolution: {integrity: sha512-K4jVyjnBdgvc86Y6BkaLZEN933SwYOuBFkdmBu9ZfkcAbdVbpITnDmjvZ/aQjRXQrv5EPkTnD1s39GiiqbngCw==}
     engines: {node: '>= 0.4'}
@@ -18205,6 +18462,8 @@ snapshots:
       webpack-hot-middleware: 2.26.1
     optional: true
 
+  '@rtsao/scc@1.1.0': {}
+
   '@schematics/angular@22.0.2(chokidar@5.0.0)':
     dependencies:
       '@angular-devkit/core': 22.0.2(chokidar@5.0.0)
@@ -18854,6 +19113,8 @@ snapshots:
 
   '@types/json-schema@7.0.15': {}
 
+  '@types/json5@0.0.29': {}
+
   '@types/mdast@4.0.4':
     dependencies:
       '@types/unist': 3.0.3
@@ -19846,8 +20107,53 @@ snapshots:
 
   array-ify@1.0.0: {}
 
+  array-includes@3.1.9:
+    dependencies:
+      call-bind: 1.0.9
+      call-bound: 1.0.4
+      define-properties: 1.2.1
+      es-abstract: 1.24.2
+      es-object-atoms: 1.1.2
+      get-intrinsic: 1.3.0
+      is-string: 1.1.1
+      math-intrinsics: 1.1.0
+
   array-union@2.1.0: {}
 
+  array.prototype.findlastindex@1.2.6:
+    dependencies:
+      call-bind: 1.0.9
+      call-bound: 1.0.4
+      define-properties: 1.2.1
+      es-abstract: 1.24.2
+      es-errors: 1.3.0
+      es-object-atoms: 1.1.2
+      es-shim-unscopables: 1.1.0
+
+  array.prototype.flat@1.3.3:
+    dependencies:
+      call-bind: 1.0.9
+      define-properties: 1.2.1
+      es-abstract: 1.24.2
+      es-shim-unscopables: 1.1.0
+
+  array.prototype.flatmap@1.3.3:
+    dependencies:
+      call-bind: 1.0.9
+      define-properties: 1.2.1
+      es-abstract: 1.24.2
+      es-shim-unscopables: 1.1.0
+
+  arraybuffer.prototype.slice@1.0.4:
+    dependencies:
+      array-buffer-byte-length: 1.0.2
+      call-bind: 1.0.9
+      define-properties: 1.2.1
+      es-abstract: 1.24.2
+      es-errors: 1.3.0
+      get-intrinsic: 1.3.0
+      is-array-buffer: 3.0.5
+
   arrify@3.0.0: {}
 
   asn1@0.2.6:
@@ -19876,6 +20182,8 @@ snapshots:
 
   astral-regex@2.0.0: {}
 
+  async-function@1.0.0: {}
+
   async@3.2.6: {}
 
   asynckit@0.4.0: {}
@@ -20949,12 +21257,34 @@ snapshots:
       whatwg-mimetype: 4.0.0
       whatwg-url: 14.2.0
 
+  data-view-buffer@1.0.2:
+    dependencies:
+      call-bound: 1.0.4
+      es-errors: 1.3.0
+      is-data-view: 1.0.2
+
+  data-view-byte-length@1.0.2:
+    dependencies:
+      call-bound: 1.0.4
+      es-errors: 1.3.0
+      is-data-view: 1.0.2
+
+  data-view-byte-offset@1.0.1:
+    dependencies:
+      call-bound: 1.0.4
+      es-errors: 1.3.0
+      is-data-view: 1.0.2
+
   dayjs@1.11.18: {}
 
   debug@2.6.9:
     dependencies:
       ms: 2.0.0
 
+  debug@3.2.7:
+    dependencies:
+      ms: 2.1.3
+
   debug@4.3.1:
     dependencies:
       ms: 2.1.2
@@ -21079,6 +21409,10 @@ snapshots:
     dependencies:
       '@leichtgewicht/ip-codec': 2.0.5
 
+  doctrine@2.1.0:
+    dependencies:
+      esutils: 2.0.3
+
   dom-accessibility-api@0.5.16: {}
 
   dom-accessibility-api@0.6.3: {}
@@ -21237,6 +21571,63 @@ snapshots:
       stackframe: 1.3.4
     optional: true
 
+  es-abstract@1.24.2:
+    dependencies:
+      array-buffer-byte-length: 1.0.2
+      arraybuffer.prototype.slice: 1.0.4
+      available-typed-arrays: 1.0.7
+      call-bind: 1.0.9
+      call-bound: 1.0.4
+      data-view-buffer: 1.0.2
+      data-view-byte-length: 1.0.2
+      data-view-byte-offset: 1.0.1
+      es-define-property: 1.0.1
+      es-errors: 1.3.0
+      es-object-atoms: 1.1.2
+      es-set-tostringtag: 2.1.0
+      es-to-primitive: 1.3.0
+      function.prototype.name: 1.2.0
+      get-intrinsic: 1.3.0
+      get-proto: 1.0.1
+      get-symbol-description: 1.1.0
+      globalthis: 1.0.4
+      gopd: 1.2.0
+      has-property-descriptors: 1.0.2
+      has-proto: 1.2.0
+      has-symbols: 1.1.0
+      hasown: 2.0.4
+      internal-slot: 1.1.0
+      is-array-buffer: 3.0.5
+      is-callable: 1.2.7
+      is-data-view: 1.0.2
+      is-negative-zero: 2.0.3
+      is-regex: 1.2.1
+      is-set: 2.0.3
+      is-shared-array-buffer: 1.0.4
+      is-string: 1.1.1
+      is-typed-array: 1.1.15
+      is-weakref: 1.1.1
+      math-intrinsics: 1.1.0
+      object-inspect: 1.13.4
+      object-keys: 1.1.1
+      object.assign: 4.1.7
+      own-keys: 1.0.1
+      regexp.prototype.flags: 1.5.4
+      safe-array-concat: 1.1.4
+      safe-push-apply: 1.0.0
+      safe-regex-test: 1.1.0
+      set-proto: 1.0.0
+      stop-iteration-iterator: 1.1.0
+      string.prototype.trim: 1.2.10
+      string.prototype.trimend: 1.0.9
+      string.prototype.trimstart: 1.0.8
+      typed-array-buffer: 1.0.3
+      typed-array-byte-length: 1.0.3
+      typed-array-byte-offset: 1.0.4
+      typed-array-length: 1.0.8
+      unbox-primitive: 1.1.0
+      which-typed-array: 1.1.21
+
   es-define-property@1.0.1: {}
 
   es-errors@1.3.0: {}
@@ -21272,6 +21663,16 @@ snapshots:
       has-tostringtag: 1.0.2
       hasown: 2.0.4
 
+  es-shim-unscopables@1.1.0:
+    dependencies:
+      hasown: 2.0.4
+
+  es-to-primitive@1.3.0:
+    dependencies:
+      is-callable: 1.2.7
+      is-date-object: 1.1.0
+      is-symbol: 1.1.1
+
   es6-shim@0.35.8: {}
 
   esbuild-wasm@0.28.1: {}
@@ -21376,6 +21777,53 @@ snapshots:
     dependencies:
       eslint: 10.4.1(jiti@2.4.2)
 
+  eslint-import-resolver-node@0.3.10:
+    dependencies:
+      debug: 3.2.7
+      is-core-module: 2.16.2
+      resolve: 2.0.0-next.7
+    transitivePeerDependencies:
+      - supports-color
+
+  eslint-module-utils@2.13.0(@typescript-eslint/parser@8.61.1(eslint@10.4.1(jiti@2.4.2))(typescript@6.0.3))(eslint-import-resolver-node@0.3.10)(eslint@10.4.1(jiti@2.4.2)):
+    dependencies:
+      debug: 3.2.7
+    optionalDependencies:
+      '@typescript-eslint/parser': 8.61.1(eslint@10.4.1(jiti@2.4.2))(typescript@6.0.3)
+      eslint: 10.4.1(jiti@2.4.2)
+      eslint-import-resolver-node: 0.3.10
+    transitivePeerDependencies:
+      - supports-color
+
+  eslint-plugin-import@2.32.0(@typescript-eslint/parser@8.61.1(eslint@10.4.1(jiti@2.4.2))(typescript@6.0.3))(eslint@10.4.1(jiti@2.4.2)):
+    dependencies:
+      '@rtsao/scc': 1.1.0
+      array-includes: 3.1.9
+      array.prototype.findlastindex: 1.2.6
+      array.prototype.flat: 1.3.3
+      array.prototype.flatmap: 1.3.3
+      debug: 3.2.7
+      doctrine: 2.1.0
+      eslint: 10.4.1(jiti@2.4.2)
+      eslint-import-resolver-node: 0.3.10
+      eslint-module-utils: 2.13.0(@typescript-eslint/parser@8.61.1(eslint@10.4.1(jiti@2.4.2))(typescript@6.0.3))(eslint-import-resolver-node@0.3.10)(eslint@10.4.1(jiti@2.4.2))
+      hasown: 2.0.4
+      is-core-module: 2.16.2
+      is-glob: 4.0.3
+      minimatch: 3.1.5
+      object.fromentries: 2.0.8
+      object.groupby: 1.0.3
+      object.values: 1.2.1
+      semver: 6.3.1
+      string.prototype.trimend: 1.0.9
+      tsconfig-paths: 3.15.0
+    optionalDependencies:
+      '@typescript-eslint/parser': 8.61.1(eslint@10.4.1(jiti@2.4.2))(typescript@6.0.3)
+    transitivePeerDependencies:
+      - eslint-import-resolver-typescript
+      - eslint-import-resolver-webpack
+      - supports-color
+
   eslint-plugin-prettier@5.5.6(@types/eslint@9.6.1)(eslint-config-prettier@10.1.8(eslint@10.4.1(jiti@2.4.2)))(eslint@10.4.1(jiti@2.4.2))(prettier@3.8.3):
     dependencies:
       eslint: 10.4.1(jiti@2.4.2)
@@ -21386,6 +21834,10 @@ snapshots:
       '@types/eslint': 9.6.1
       eslint-config-prettier: 10.1.8(eslint@10.4.1(jiti@2.4.2))
 
+  eslint-plugin-simple-import-sort@13.0.0(eslint@10.4.1(jiti@2.4.2)):
+    dependencies:
+      eslint: 10.4.1(jiti@2.4.2)
+
   eslint-plugin-storybook@10.4.6(eslint@10.4.1(jiti@2.4.2))(storybook@10.4.6(@testing-library/dom@10.4.0)(@types/react@19.2.16)(prettier@3.8.3)(react-dom@19.2.7(react@19.2.7))(react@19.2.7))(typescript@6.0.3):
     dependencies:
       '@typescript-eslint/utils': 8.60.1(eslint@10.4.1(jiti@2.4.2))(typescript@6.0.3)
@@ -21395,6 +21847,12 @@ snapshots:
       - supports-color
       - typescript
 
+  eslint-plugin-unused-imports@4.4.1(@typescript-eslint/eslint-plugin@8.61.1(@typescript-eslint/parser@8.61.1(eslint@10.4.1(jiti@2.4.2))(typescript@6.0.3))(eslint@10.4.1(jiti@2.4.2))(typescript@6.0.3))(eslint@10.4.1(jiti@2.4.2)):
+    dependencies:
+      eslint: 10.4.1(jiti@2.4.2)
+    optionalDependencies:
+      '@typescript-eslint/eslint-plugin': 8.61.1(@typescript-eslint/parser@8.61.1(eslint@10.4.1(jiti@2.4.2))(typescript@6.0.3))(eslint@10.4.1(jiti@2.4.2))(typescript@6.0.3)
+
   eslint-scope@5.1.1:
     dependencies:
       esrecurse: 4.3.0
@@ -22034,10 +22492,24 @@ snapshots:
 
   function-timeout@1.0.2: {}
 
+  function.prototype.name@1.2.0:
+    dependencies:
+      call-bind: 1.0.9
+      call-bound: 1.0.4
+      es-define-property: 1.0.1
+      es-errors: 1.3.0
+      functions-have-names: 1.2.3
+      has-property-descriptors: 1.0.2
+      hasown: 2.0.4
+      is-callable: 1.2.7
+      is-document.all: 1.0.0
+
   functions-have-names@1.2.3: {}
 
   fuse.js@7.3.0: {}
 
+  generator-function@2.0.1: {}
+
   gensync@1.0.0-beta.2: {}
 
   get-caller-file@2.0.5: {}
@@ -22077,6 +22549,12 @@ snapshots:
       '@sec-ant/readable-stream': 0.4.1
       is-stream: 4.0.1
 
+  get-symbol-description@1.1.0:
+    dependencies:
+      call-bound: 1.0.4
+      es-errors: 1.3.0
+      get-intrinsic: 1.3.0
+
   get-them-args@1.3.2: {}
 
   getpass@0.1.7:
@@ -22159,6 +22637,11 @@ snapshots:
 
   globals@17.6.0: {}
 
+  globalthis@1.0.4:
+    dependencies:
+      define-properties: 1.2.1
+      gopd: 1.2.0
+
   globby@11.1.0:
     dependencies:
       array-union: 2.1.0
@@ -22244,6 +22727,10 @@ snapshots:
     dependencies:
       es-define-property: 1.0.1
 
+  has-proto@1.2.0:
+    dependencies:
+      dunder-proto: 1.0.1
+
   has-symbols@1.1.0: {}
 
   has-tostringtag@1.0.2:
@@ -22582,6 +23069,14 @@ snapshots:
 
   is-arrayish@0.2.1: {}
 
+  is-async-function@2.1.1:
+    dependencies:
+      async-function: 1.0.0
+      call-bound: 1.0.4
+      get-proto: 1.0.1
+      has-tostringtag: 1.0.2
+      safe-regex-test: 1.1.0
+
   is-bigint@1.1.0:
     dependencies:
       has-bigints: 1.1.0
@@ -22601,6 +23096,12 @@ snapshots:
     dependencies:
       hasown: 2.0.4
 
+  is-data-view@1.0.2:
+    dependencies:
+      call-bound: 1.0.4
+      get-intrinsic: 1.3.0
+      is-typed-array: 1.1.15
+
   is-date-object@1.1.0:
     dependencies:
       call-bound: 1.0.4
@@ -22612,8 +23113,16 @@ snapshots:
 
   is-docker@3.0.0: {}
 
+  is-document.all@1.0.0:
+    dependencies:
+      call-bound: 1.0.4
+
   is-extglob@2.1.1: {}
 
+  is-finalizationregistry@1.1.1:
+    dependencies:
+      call-bound: 1.0.4
+
   is-fullwidth-code-point@3.0.0: {}
 
   is-fullwidth-code-point@5.1.0:
@@ -22622,6 +23131,14 @@ snapshots:
 
   is-generator-fn@2.1.0: {}
 
+  is-generator-function@1.1.2:
+    dependencies:
+      call-bound: 1.0.4
+      generator-function: 2.0.1
+      get-proto: 1.0.1
+      has-tostringtag: 1.0.2
+      safe-regex-test: 1.1.0
+
   is-glob@4.0.3:
     dependencies:
       is-extglob: 2.1.1
@@ -22640,6 +23157,8 @@ snapshots:
 
   is-map@2.0.3: {}
 
+  is-negative-zero@2.0.3: {}
+
   is-network-error@1.3.2: {}
 
   is-number-object@1.1.1:
@@ -22703,6 +23222,10 @@ snapshots:
     dependencies:
       text-extensions: 2.4.0
 
+  is-typed-array@1.1.15:
+    dependencies:
+      which-typed-array: 1.1.21
+
   is-typedarray@1.0.0: {}
 
   is-unicode-supported@0.1.0: {}
@@ -22713,6 +23236,10 @@ snapshots:
 
   is-weakmap@2.0.2: {}
 
+  is-weakref@1.1.1:
+    dependencies:
+      call-bound: 1.0.4
+
   is-weakset@2.0.4:
     dependencies:
       call-bound: 1.0.4
@@ -23212,6 +23739,10 @@ snapshots:
 
   json-stringify-safe@5.0.1: {}
 
+  json5@1.0.2:
+    dependencies:
+      minimist: 1.2.8
+
   json5@2.2.3: {}
 
   jsonc-parser@3.3.1: {}
@@ -24219,6 +24750,13 @@ snapshots:
   node-addon-api@7.1.1:
     optional: true
 
+  node-exports-info@1.6.0:
+    dependencies:
+      array.prototype.flatmap: 1.3.3
+      es-errors: 1.3.0
+      object.entries: 1.1.9
+      semver: 6.3.1
+
   node-fetch@2.6.7(encoding@0.1.13):
     dependencies:
       whatwg-url: 5.0.0
@@ -24484,6 +25022,33 @@ snapshots:
       has-symbols: 1.1.0
       object-keys: 1.1.1
 
+  object.entries@1.1.9:
+    dependencies:
+      call-bind: 1.0.9
+      call-bound: 1.0.4
+      define-properties: 1.2.1
+      es-object-atoms: 1.1.2
+
+  object.fromentries@2.0.8:
+    dependencies:
+      call-bind: 1.0.9
+      define-properties: 1.2.1
+      es-abstract: 1.24.2
+      es-object-atoms: 1.1.2
+
+  object.groupby@1.0.3:
+    dependencies:
+      call-bind: 1.0.9
+      define-properties: 1.2.1
+      es-abstract: 1.24.2
+
+  object.values@1.2.1:
+    dependencies:
+      call-bind: 1.0.9
+      call-bound: 1.0.4
+      define-properties: 1.2.1
+      es-object-atoms: 1.1.2
+
   obuf@1.1.2: {}
 
   obug@2.1.1: {}
@@ -24611,6 +25176,12 @@ snapshots:
       macos-release: 2.5.1
       windows-release: 4.0.0
 
+  own-keys@1.0.1:
+    dependencies:
+      get-intrinsic: 1.3.0
+      object-keys: 1.1.1
+      safe-push-apply: 1.0.0
+
   oxc-parser@0.121.0(@emnapi/core@1.10.0)(@emnapi/runtime@1.10.0):
     dependencies:
       '@oxc-project/types': 0.121.0
@@ -25439,11 +26010,13 @@ snapshots:
   prettier-plugin-organize-attributes@1.0.0(prettier@3.8.3):
     dependencies:
       prettier: 3.8.3
+    optional: true
 
   prettier-plugin-organize-imports@4.3.0(prettier@3.8.3)(typescript@6.0.3):
     dependencies:
       prettier: 3.8.3
       typescript: 6.0.3
+    optional: true
 
   prettier-plugin-tailwindcss@0.8.0(prettier-plugin-astro@0.14.1)(prettier-plugin-organize-attributes@1.0.0(prettier@3.8.3))(prettier-plugin-organize-imports@4.3.0(prettier@3.8.3)(typescript@6.0.3))(prettier@3.8.3):
     dependencies:
@@ -25649,6 +26222,17 @@ snapshots:
 
   reflect-metadata@0.2.2: {}
 
+  reflect.getprototypeof@1.0.10:
+    dependencies:
+      call-bind: 1.0.9
+      define-properties: 1.2.1
+      es-abstract: 1.24.2
+      es-errors: 1.3.0
+      es-object-atoms: 1.1.2
+      get-intrinsic: 1.3.0
+      get-proto: 1.0.1
+      which-builtin-type: 1.2.1
+
   regenerate-unicode-properties@10.2.2:
     dependencies:
       regenerate: 1.4.2
@@ -25766,6 +26350,15 @@ snapshots:
       supports-preserve-symlinks-flag: 1.0.0
     optional: true
 
+  resolve@2.0.0-next.7:
+    dependencies:
+      es-errors: 1.3.0
+      is-core-module: 2.16.2
+      node-exports-info: 1.6.0
+      object-keys: 1.1.1
+      path-parse: 1.0.7
+      supports-preserve-symlinks-flag: 1.0.0
+
   responselike@2.0.1:
     dependencies:
       lowercase-keys: 2.0.0
@@ -25927,10 +26520,23 @@ snapshots:
 
   s.color@0.0.15: {}
 
+  safe-array-concat@1.1.4:
+    dependencies:
+      call-bind: 1.0.9
+      call-bound: 1.0.4
+      get-intrinsic: 1.3.0
+      has-symbols: 1.1.0
+      isarray: 2.0.5
+
   safe-buffer@5.1.2: {}
 
   safe-buffer@5.2.1: {}
 
+  safe-push-apply@1.0.0:
+    dependencies:
+      es-errors: 1.3.0
+      isarray: 2.0.5
+
   safe-regex-test@1.1.0:
     dependencies:
       call-bound: 1.0.4
@@ -26258,6 +26864,12 @@ snapshots:
       functions-have-names: 1.2.3
       has-property-descriptors: 1.0.2
 
+  set-proto@1.0.0:
+    dependencies:
+      dunder-proto: 1.0.1
+      es-errors: 1.3.0
+      es-object-atoms: 1.1.2
+
   setprototypeof@1.2.0: {}
 
   shallow-clone@3.0.1:
@@ -26583,6 +27195,29 @@ snapshots:
       get-east-asian-width: 1.6.0
       strip-ansi: 7.2.0
 
+  string.prototype.trim@1.2.10:
+    dependencies:
+      call-bind: 1.0.9
+      call-bound: 1.0.4
+      define-data-property: 1.1.4
+      define-properties: 1.2.1
+      es-abstract: 1.24.2
+      es-object-atoms: 1.1.2
+      has-property-descriptors: 1.0.2
+
+  string.prototype.trimend@1.0.9:
+    dependencies:
+      call-bind: 1.0.9
+      call-bound: 1.0.4
+      define-properties: 1.2.1
+      es-object-atoms: 1.1.2
+
+  string.prototype.trimstart@1.0.8:
+    dependencies:
+      call-bind: 1.0.9
+      define-properties: 1.2.1
+      es-object-atoms: 1.1.2
+
   string_decoder@1.1.1:
     dependencies:
       safe-buffer: 5.1.2
@@ -27059,6 +27694,13 @@ snapshots:
       tapable: 2.3.3
       tsconfig-paths: 4.2.0
 
+  tsconfig-paths@3.15.0:
+    dependencies:
+      '@types/json5': 0.0.29
+      json5: 1.0.2
+      minimist: 1.2.8
+      strip-bom: 3.0.0
+
   tsconfig-paths@4.2.0:
     dependencies:
       json5: 2.2.3
@@ -27110,6 +27752,39 @@ snapshots:
       media-typer: 1.1.0
       mime-types: 3.0.2
 
+  typed-array-buffer@1.0.3:
+    dependencies:
+      call-bound: 1.0.4
+      es-errors: 1.3.0
+      is-typed-array: 1.1.15
+
+  typed-array-byte-length@1.0.3:
+    dependencies:
+      call-bind: 1.0.9
+      for-each: 0.3.5
+      gopd: 1.2.0
+      has-proto: 1.2.0
+      is-typed-array: 1.1.15
+
+  typed-array-byte-offset@1.0.4:
+    dependencies:
+      available-typed-arrays: 1.0.7
+      call-bind: 1.0.9
+      for-each: 0.3.5
+      gopd: 1.2.0
+      has-proto: 1.2.0
+      is-typed-array: 1.1.15
+      reflect.getprototypeof: 1.0.10
+
+  typed-array-length@1.0.8:
+    dependencies:
+      call-bind: 1.0.9
+      for-each: 0.3.5
+      gopd: 1.2.0
+      is-typed-array: 1.1.15
+      possible-typed-array-names: 1.1.0
+      reflect.getprototypeof: 1.0.10
+
   typed-assert@1.0.9: {}
 
   typedoc@0.28.19(typescript@6.0.3):
@@ -27143,6 +27818,13 @@ snapshots:
 
   uint8array-extras@1.5.0: {}
 
+  unbox-primitive@1.1.0:
+    dependencies:
+      call-bound: 1.0.4
+      has-bigints: 1.1.0
+      has-symbols: 1.1.0
+      which-boxed-primitive: 1.1.1
+
   unbzip2-stream@1.4.3:
     dependencies:
       buffer: 5.7.1
@@ -27788,6 +28470,22 @@ snapshots:
       is-string: 1.1.1
       is-symbol: 1.1.1
 
+  which-builtin-type@1.2.1:
+    dependencies:
+      call-bound: 1.0.4
+      function.prototype.name: 1.2.0
+      has-tostringtag: 1.0.2
+      is-async-function: 2.1.1
+      is-date-object: 1.1.0
+      is-finalizationregistry: 1.1.1
+      is-generator-function: 1.1.2
+      is-regex: 1.2.1
+      is-weakref: 1.1.1
+      isarray: 2.0.5
+      which-boxed-primitive: 1.1.1
+      which-collection: 1.0.2
+      which-typed-array: 1.1.21
+
   which-collection@1.0.2:
     dependencies:
       is-map: 2.0.3
diff --git a/skills/radix-ng-examples/references/components/accordion.md b/skills/radix-ng-examples/references/components/accordion.md
index 78f5cd65c..8d91e79f7 100644
--- a/skills/radix-ng-examples/references/components/accordion.md
+++ b/skills/radix-ng-examples/references/components/accordion.md
@@ -78,6 +78,7 @@ import {
 Disable the whole accordion via `disabled` on the root, or a single item via `disabled` on the item.
 
 ```typescript
+import { cn, demoAccordion } from '../../storybook/styles';
 import { ChangeDetectionStrategy, Component } from '@angular/core';
 import {
     RdxAccordionHeaderDirective,
@@ -86,7 +87,6 @@ import {
     RdxAccordionRootDirective,
     RdxAccordionTriggerDirective
 } from '@radix-ng/primitives/accordion';
-import { cn, demoAccordion } from '../../storybook/styles';
 
 @Component({
     changeDetection: ChangeDetectionStrategy.Eager,
@@ -99,32 +99,32 @@ import { cn, demoAccordion } from '../../storybook/styles';
         RdxAccordionPanelDirective
     ],
     template: `
-        <div [class]="cn(a.root, 'w-[300px]')" [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-[300px]')" [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'" disabled rdxAccordionItem>
-                <h3 [class]="a.header" rdxAccordionHeader>
-                    <button [class]="a.trigger" type="button" rdxAccordionTrigger>Is it unstyled?</button>
+            <div disabled 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>
@@ -142,6 +142,7 @@ export class AccordionDisabledExample {
 Set `multiple` to let several items stay open at once.
 
 ```typescript
+import { cn, demoAccordion } from '../../storybook/styles';
 import { ChangeDetectionStrategy, Component } from '@angular/core';
 import {
     RdxAccordionHeaderDirective,
@@ -150,7 +151,6 @@ import {
     RdxAccordionRootDirective,
     RdxAccordionTriggerDirective
 } from '@radix-ng/primitives/accordion';
-import { cn, demoAccordion } from '../../storybook/styles';
 
 @Component({
     changeDetection: ChangeDetectionStrategy.Eager,
@@ -163,32 +163,32 @@ import { cn, demoAccordion } from '../../storybook/styles';
         RdxAccordionPanelDirective
     ],
     template: `
-        <div [class]="cn(a.root, 'w-[300px]')" [value]="['item-2', 'item-3']" multiple 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 multiple rdxAccordionRoot [class]="cn(a.root, 'w-[300px]')" [value]="['item-2', 'item-3']">
+            <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. It's unstyled by default, giving you freedom over the look and feel.
                     </div>
@@ -209,6 +209,7 @@ In single mode the open item can always be closed by clicking its trigger again
 there is no separate `collapsible` input).
 
 ```typescript
+import { cn, demoAccordion } from '../../storybook/styles';
 import { ChangeDetectionStrategy, Component } from '@angular/core';
 import {
     RdxAccordionHeaderDirective,
@@ -217,7 +218,6 @@ import {
     RdxAccordionRootDirective,
     RdxAccordionTriggerDirective
 } from '@radix-ng/primitives/accordion';
-import { cn, demoAccordion } from '../../storybook/styles';
 
 @Component({
     changeDetection: ChangeDetectionStrategy.Eager,
@@ -230,32 +230,32 @@ import { cn, demoAccordion } from '../../storybook/styles';
         RdxAccordionPanelDirective
     ],
     template: `
-        <div [class]="cn(a.root, 'w-[300px]')" [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-[300px]')" [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>
@@ -273,6 +273,7 @@ export class AccordionCollapsibleExample {
 Set `orientation="horizontal"` to expose horizontal state for styling. Following the APG guidance update adopted by Base UI, orientation no longer changes keyboard focus behavior.
 
 ```typescript
+import { cn, demoAccordion } from '../../storybook/styles';
 import { ChangeDetectionStrategy, Component } from '@angular/core';
 import {
     RdxAccordionHeaderDirective,
@@ -281,7 +282,6 @@ import {
     RdxAccordionRootDirective,
     RdxAccordionTriggerDirective
 } from '@radix-ng/primitives/accordion';
-import { cn, demoAccordion } from '../../storybook/styles';
 
 @Component({
     changeDetection: ChangeDetectionStrategy.Eager,
@@ -295,42 +295,42 @@ import { cn, demoAccordion } from '../../storybook/styles';
     ],
     template: `
         <div
+            rdxAccordionRoot
             [class]="cn(a.root, 'flex h-[300px] flex-row')"
             [defaultValue]="'item-1'"
             [orientation]="'horizontal'"
-            rdxAccordionRoot
         >
-            <div [class]="cn(a.item, a.itemH)" [value]="'item-1'" rdxAccordionItem>
-                <div [class]="a.header" rdxAccordionHeader>
-                    <button [class]="cn(a.trigger, a.triggerH)" type="button" rdxAccordionTrigger>
+            <div rdxAccordionItem [class]="cn(a.item, a.itemH)" [value]="'item-1'">
+                <div rdxAccordionHeader [class]="a.header">
+                    <button type="button" rdxAccordionTrigger [class]="cn(a.trigger, a.triggerH)">
                         Is it accessible?
                     </button>
                 </div>
-                <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]="cn(a.item, a.itemH)" [value]="'item-2'" [disabled]="true" rdxAccordionItem>
-                <div [class]="a.header" rdxAccordionHeader>
-                    <button [class]="cn(a.trigger, a.triggerH)" type="button" rdxAccordionTrigger>
+            <div rdxAccordionItem [class]="cn(a.item, a.itemH)" [value]="'item-2'" [disabled]="true">
+                <div rdxAccordionHeader [class]="a.header">
+                    <button type="button" rdxAccordionTrigger [class]="cn(a.trigger, a.triggerH)">
                         Is it unstyled?
                     </button>
                 </div>
-                <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]="cn(a.item, a.itemH)" [value]="'item-3'" rdxAccordionItem>
-                <div [class]="a.header" rdxAccordionHeader>
-                    <button [class]="cn(a.trigger, a.triggerH)" type="button" rdxAccordionTrigger>
+            <div rdxAccordionItem [class]="cn(a.item, a.itemH)" [value]="'item-3'">
+                <div rdxAccordionHeader [class]="a.header">
+                    <button type="button" rdxAccordionTrigger [class]="cn(a.trigger, a.triggerH)">
                         Can it be animated?
                     </button>
                 </div>
-                <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>
@@ -350,6 +350,7 @@ root emits `onValueChange` with `{ value, eventDetails }`. Call `eventDetails.ca
 change before it commits.
 
 ```typescript
+import { cn, demoAccordion } from '../../storybook/styles';
 import { ChangeDetectionStrategy, Component, signal } from '@angular/core';
 import {
     RdxAccordionHeaderDirective,
@@ -358,7 +359,6 @@ import {
     RdxAccordionRootDirective,
     RdxAccordionTriggerDirective
 } from '@radix-ng/primitives/accordion';
-import { cn, demoAccordion } from '../../storybook/styles';
 
 @Component({
     changeDetection: ChangeDetectionStrategy.Eager,
@@ -372,21 +372,21 @@ import { cn, demoAccordion } from '../../storybook/styles';
     ],
     template: `
         <div class="flex w-[300px] flex-col gap-3">
-            <div [class]="a.root" [defaultValue]="'item-1'" rdxAccordionRoot>
-                <div [class]="a.item" [value]="'item-1'" (onOpenChange)="log('Accessibility', $event)" rdxAccordionItem>
-                    <h3 [class]="a.header" rdxAccordionHeader>
-                        <button [class]="a.trigger" type="button" rdxAccordionTrigger>Is it accessible?</button>
+            <div rdxAccordionRoot [class]="a.root" [defaultValue]="'item-1'">
+                <div rdxAccordionItem [class]="a.item" [value]="'item-1'" (onOpenChange)="log('Accessibility', $event)">
+                    <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'" (onOpenChange)="log('Styling', $event)" 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'" (onOpenChange)="log('Styling', $event)">
+                    <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.</div>
                     </div>
                 </div>
@@ -415,6 +415,7 @@ form state. Use `hiddenUntilFound` instead to keep collapsed content discoverabl
 find-in-page (it renders `hidden="until-found"`).
 
 ```typescript
+import { cn, demoAccordion, demoInput } from '../../storybook/styles';
 import { ChangeDetectionStrategy, Component } from '@angular/core';
 import { FormsModule } from '@angular/forms';
 import {
@@ -424,7 +425,6 @@ import {
     RdxAccordionRootDirective,
     RdxAccordionTriggerDirective
 } from '@radix-ng/primitives/accordion';
-import { cn, demoAccordion, demoInput } from '../../storybook/styles';
 
 /**
  * With `keepMounted`, collapsed panels keep their element in the DOM while hidden.
@@ -442,23 +442,23 @@ import { cn, demoAccordion, demoInput } from '../../storybook/styles';
         RdxAccordionPanelDirective
     ],
     template: `
-        <div [class]="cn(a.root, 'w-[300px]')" [defaultValue]="'item-1'" keepMounted rdxAccordionRoot>
-            <div [class]="a.item" [value]="'item-1'" rdxAccordionItem>
-                <h3 [class]="a.header" rdxAccordionHeader>
-                    <button [class]="a.trigger" type="button" rdxAccordionTrigger>Shipping address</button>
+        <div keepMounted rdxAccordionRoot [class]="cn(a.root, 'w-[300px]')" [defaultValue]="'item-1'">
+            <div rdxAccordionItem [class]="a.item" [value]="'item-1'">
+                <h3 rdxAccordionHeader [class]="a.header">
+                    <button type="button" rdxAccordionTrigger [class]="a.trigger">Shipping address</button>
                 </h3>
-                <div [class]="a.content" rdxAccordionPanel>
+                <div rdxAccordionPanel [class]="a.content">
                     <div [class]="a.contentText">
-                        <input [(ngModel)]="address" [class]="input" placeholder="Type, then collapse & reopen" />
+                        <input placeholder="Type, then collapse & reopen" [class]="input" [(ngModel)]="address" />
                     </div>
                 </div>
             </div>
 
-            <div [class]="a.item" [value]="'item-2'" rdxAccordionItem>
-                <h3 [class]="a.header" rdxAccordionHeader>
-                    <button [class]="a.trigger" type="button" rdxAccordionTrigger>Billing address</button>
+            <div rdxAccordionItem [class]="a.item" [value]="'item-2'">
+                <h3 rdxAccordionHeader [class]="a.header">
+                    <button type="button" rdxAccordionTrigger [class]="a.trigger">Billing address</button>
                 </h3>
-                <div [class]="a.content" rdxAccordionPanel>
+                <div rdxAccordionPanel [class]="a.content">
                     <div [class]="a.contentText">Same as shipping.</div>
                 </div>
             </div>
diff --git a/skills/radix-ng-examples/references/components/alert-dialog.md b/skills/radix-ng-examples/references/components/alert-dialog.md
index 5b1d41b57..efbed8b83 100644
--- a/skills/radix-ng-examples/references/components/alert-dialog.md
+++ b/skills/radix-ng-examples/references/components/alert-dialog.md
@@ -8,9 +8,9 @@ its popup uses `role="alertdialog"`. Each `rdxAlertDialog*` part is a thin wrapp
 dialog part.
 
 ```typescript
+import { cn, demoButton, demoDialog } from '../../storybook/styles';
 import { ChangeDetectionStrategy, Component } from '@angular/core';
 import { alertDialogImports } from '@radix-ng/primitives/alert-dialog';
-import { cn, demoButton, demoDialog } from '../../storybook/styles';
 
 @Component({
     changeDetection: ChangeDetectionStrategy.Eager,
@@ -18,21 +18,21 @@ import { cn, demoButton, demoDialog } from '../../storybook/styles';
     imports: [...alertDialogImports],
     template: `
         <div rdxAlertDialogRoot>
-            <button [class]="cn(b.base, b.destructive, b.size.md)" rdxAlertDialogTrigger>Delete account</button>
+            <button rdxAlertDialogTrigger [class]="cn(b.base, b.destructive, b.size.md)">Delete account</button>
 
             <ng-template rdxAlertDialogPortal>
-                <div [class]="cn(d.backdrop, d.backdropAnimated)" rdxAlertDialogBackdrop></div>
+                <div rdxAlertDialogBackdrop [class]="cn(d.backdrop, d.backdropAnimated)"></div>
 
-                <div [class]="cn(d.popup, d.popupAnimated)" rdxAlertDialogPopup>
-                    <h2 [class]="d.title" rdxAlertDialogTitle>Are you absolutely sure?</h2>
-                    <p [class]="d.description" rdxAlertDialogDescription>
+                <div rdxAlertDialogPopup [class]="cn(d.popup, d.popupAnimated)">
+                    <h2 rdxAlertDialogTitle [class]="d.title">Are you absolutely sure?</h2>
+                    <p rdxAlertDialogDescription [class]="d.description">
                         This action cannot be undone. This will permanently delete your account and remove your data
                         from our servers.
                     </p>
 
                     <div [class]="d.footer">
-                        <button [class]="cn(b.base, b.outline, b.size.sm)" rdxAlertDialogClose>Cancel</button>
-                        <button [class]="cn(b.base, b.destructive, b.size.sm)" rdxAlertDialogClose>
+                        <button rdxAlertDialogClose [class]="cn(b.base, b.outline, b.size.sm)">Cancel</button>
+                        <button rdxAlertDialogClose [class]="cn(b.base, b.destructive, b.size.sm)">
                             Yes, delete account
                         </button>
                     </div>
@@ -105,9 +105,9 @@ import { RdxAlertDialogModule } from '@radix-ng/primitives/alert-dialog';
 A destructive confirmation with Cancel and an action button. Clicking the backdrop keeps it open.
 
 ```typescript
+import { cn, demoButton, demoDialog } from '../../storybook/styles';
 import { ChangeDetectionStrategy, Component } from '@angular/core';
 import { alertDialogImports } from '@radix-ng/primitives/alert-dialog';
-import { cn, demoButton, demoDialog } from '../../storybook/styles';
 
 @Component({
     changeDetection: ChangeDetectionStrategy.Eager,
@@ -115,21 +115,21 @@ import { cn, demoButton, demoDialog } from '../../storybook/styles';
     imports: [...alertDialogImports],
     template: `
         <div rdxAlertDialogRoot>
-            <button [class]="cn(b.base, b.destructive, b.size.md)" rdxAlertDialogTrigger>Delete account</button>
+            <button rdxAlertDialogTrigger [class]="cn(b.base, b.destructive, b.size.md)">Delete account</button>
 
             <ng-template rdxAlertDialogPortal>
-                <div [class]="cn(d.backdrop, d.backdropAnimated)" rdxAlertDialogBackdrop></div>
+                <div rdxAlertDialogBackdrop [class]="cn(d.backdrop, d.backdropAnimated)"></div>
 
-                <div [class]="cn(d.popup, d.popupAnimated)" rdxAlertDialogPopup>
-                    <h2 [class]="d.title" rdxAlertDialogTitle>Are you absolutely sure?</h2>
-                    <p [class]="d.description" rdxAlertDialogDescription>
+                <div rdxAlertDialogPopup [class]="cn(d.popup, d.popupAnimated)">
+                    <h2 rdxAlertDialogTitle [class]="d.title">Are you absolutely sure?</h2>
+                    <p rdxAlertDialogDescription [class]="d.description">
                         This action cannot be undone. This will permanently delete your account and remove your data
                         from our servers.
                     </p>
 
                     <div [class]="d.footer">
-                        <button [class]="cn(b.base, b.outline, b.size.sm)" rdxAlertDialogClose>Cancel</button>
-                        <button [class]="cn(b.base, b.destructive, b.size.sm)" rdxAlertDialogClose>
+                        <button rdxAlertDialogClose [class]="cn(b.base, b.outline, b.size.sm)">Cancel</button>
+                        <button rdxAlertDialogClose [class]="cn(b.base, b.destructive, b.size.sm)">
                             Yes, delete account
                         </button>
                     </div>
@@ -150,9 +150,9 @@ export class RdxAlertDialogDefaultComponent {
 Bind `[(open)]` to open or close the alert dialog from component state.
 
 ```typescript
+import { cn, demoButton, demoDialog } from '../../storybook/styles';
 import { ChangeDetectionStrategy, Component, signal } from '@angular/core';
 import { alertDialogImports } from '@radix-ng/primitives/alert-dialog';
-import { cn, demoButton, demoDialog } from '../../storybook/styles';
 
 @Component({
     changeDetection: ChangeDetectionStrategy.Eager,
@@ -164,15 +164,15 @@ import { cn, demoButton, demoDialog } from '../../storybook/styles';
 
             <button [class]="cn(b.base, b.outline, b.size.sm)" (click)="open.set(true)">Open from outside</button>
 
-            <div [(open)]="open" rdxAlertDialogRoot>
-                <button [class]="cn(b.base, b.destructive, b.size.md)" rdxAlertDialogTrigger>Discard changes</button>
+            <div rdxAlertDialogRoot [(open)]="open">
+                <button rdxAlertDialogTrigger [class]="cn(b.base, b.destructive, b.size.md)">Discard changes</button>
 
                 <ng-template rdxAlertDialogPortal>
-                    <div [class]="cn(d.backdrop, d.backdropAnimated)" rdxAlertDialogBackdrop></div>
+                    <div rdxAlertDialogBackdrop [class]="cn(d.backdrop, d.backdropAnimated)"></div>
 
-                    <div [class]="cn(d.popup, d.popupAnimated)" rdxAlertDialogPopup>
-                        <h2 [class]="d.title" rdxAlertDialogTitle>Discard unsaved changes?</h2>
-                        <p [class]="d.description" rdxAlertDialogDescription>
+                    <div rdxAlertDialogPopup [class]="cn(d.popup, d.popupAnimated)">
+                        <h2 rdxAlertDialogTitle [class]="d.title">Discard unsaved changes?</h2>
+                        <p rdxAlertDialogDescription [class]="d.description">
                             The open state is owned by the component and bound with
                             <code>[(open)]</code>
                             .
@@ -206,9 +206,9 @@ Several triggers can open the same alert dialog. The active trigger's `payload`
 so the content can adapt to what is being confirmed.
 
 ```typescript
+import { cn, demoButton, demoDialog } from '../../storybook/styles';
 import { ChangeDetectionStrategy, Component } from '@angular/core';
 import { alertDialogImports } from '@radix-ng/primitives/alert-dialog';
-import { cn, demoButton, demoDialog } from '../../storybook/styles';
 
 @Component({
     changeDetection: ChangeDetectionStrategy.Eager,
@@ -217,29 +217,29 @@ import { cn, demoButton, demoDialog } from '../../storybook/styles';
     template: `
         <div #root="rdxAlertDialogRoot" rdxAlertDialogRoot>
             <div class="flex gap-2">
-                <button [class]="cn(b.base, b.outline, b.size.md)" payload="photo" rdxAlertDialogTrigger>
+                <button payload="photo" rdxAlertDialogTrigger [class]="cn(b.base, b.outline, b.size.md)">
                     Delete photo
                 </button>
-                <button [class]="cn(b.base, b.outline, b.size.md)" payload="video" rdxAlertDialogTrigger>
+                <button payload="video" rdxAlertDialogTrigger [class]="cn(b.base, b.outline, b.size.md)">
                     Delete video
                 </button>
-                <button [class]="cn(b.base, b.outline, b.size.md)" payload="album" rdxAlertDialogTrigger>
+                <button payload="album" rdxAlertDialogTrigger [class]="cn(b.base, b.outline, b.size.md)">
                     Delete album
                 </button>
             </div>
 
             <ng-template rdxAlertDialogPortal>
-                <div [class]="cn(d.backdrop, d.backdropAnimated)" rdxAlertDialogBackdrop></div>
-                <div [class]="cn(d.popup, d.popupAnimated)" rdxAlertDialogPopup>
-                    <h2 [class]="d.title" rdxAlertDialogTitle>Delete this {{ root.payload() || 'item' }}?</h2>
-                    <p [class]="d.description" rdxAlertDialogDescription>
+                <div rdxAlertDialogBackdrop [class]="cn(d.backdrop, d.backdropAnimated)"></div>
+                <div rdxAlertDialogPopup [class]="cn(d.popup, d.popupAnimated)">
+                    <h2 rdxAlertDialogTitle [class]="d.title">Delete this {{ root.payload() || 'item' }}?</h2>
+                    <p rdxAlertDialogDescription [class]="d.description">
                         Every trigger opens the same alert dialog; the active trigger's
                         <code>payload</code>
                         decides what is being deleted.
                     </p>
                     <div [class]="d.footer">
-                        <button [class]="cn(b.base, b.outline, b.size.sm)" rdxAlertDialogClose>Cancel</button>
-                        <button [class]="cn(b.base, b.destructive, b.size.sm)" rdxAlertDialogClose>Delete</button>
+                        <button rdxAlertDialogClose [class]="cn(b.base, b.outline, b.size.sm)">Cancel</button>
+                        <button rdxAlertDialogClose [class]="cn(b.base, b.destructive, b.size.sm)">Delete</button>
                     </div>
                 </div>
             </ng-template>
@@ -258,9 +258,9 @@ export class RdxAlertDialogMultipleTriggersComponent {
 Bind both `[(open)]` and `[(triggerId)]` to choose which trigger is active from component state.
 
 ```typescript
+import { cn, demoButton, demoDialog } from '../../storybook/styles';
 import { ChangeDetectionStrategy, Component, signal } from '@angular/core';
 import { alertDialogImports } from '@radix-ng/primitives/alert-dialog';
-import { cn, demoButton, demoDialog } from '../../storybook/styles';
 
 @Component({
     changeDetection: ChangeDetectionStrategy.Eager,
@@ -270,23 +270,23 @@ import { cn, demoButton, demoDialog } from '../../storybook/styles';
         <div class="flex flex-col items-center gap-3">
             <p class="text-muted-foreground text-xs">open: {{ open() }} · triggerId: {{ triggerId() ?? '—' }}</p>
 
-            <div [(open)]="open" [(triggerId)]="triggerId" rdxAlertDialogRoot>
+            <div rdxAlertDialogRoot [(open)]="open" [(triggerId)]="triggerId">
                 <div class="flex gap-2">
-                    <button id="logout" [class]="cn(b.base, b.outline, b.size.md)" rdxAlertDialogTrigger>
+                    <button id="logout" rdxAlertDialogTrigger [class]="cn(b.base, b.outline, b.size.md)">
                         Log out
                     </button>
-                    <button id="delete" [class]="cn(b.base, b.outline, b.size.md)" rdxAlertDialogTrigger>
+                    <button id="delete" rdxAlertDialogTrigger [class]="cn(b.base, b.outline, b.size.md)">
                         Delete account
                     </button>
                 </div>
 
                 <ng-template rdxAlertDialogPortal>
-                    <div [class]="cn(d.backdrop, d.backdropAnimated)" rdxAlertDialogBackdrop></div>
-                    <div [class]="cn(d.popup, d.popupAnimated)" rdxAlertDialogPopup>
-                        <h2 [class]="d.title" rdxAlertDialogTitle>
+                    <div rdxAlertDialogBackdrop [class]="cn(d.backdrop, d.backdropAnimated)"></div>
+                    <div rdxAlertDialogPopup [class]="cn(d.popup, d.popupAnimated)">
+                        <h2 rdxAlertDialogTitle [class]="d.title">
                             {{ triggerId() === 'delete' ? 'Delete account?' : 'Log out?' }}
                         </h2>
-                        <p [class]="d.description" rdxAlertDialogDescription>
+                        <p rdxAlertDialogDescription [class]="d.description">
                             Both
                             <code>open</code>
                             and
@@ -294,10 +294,10 @@ import { cn, demoButton, demoDialog } from '../../storybook/styles';
                             are bound, so the active action is driven from component state.
                         </p>
                         <div [class]="d.footer">
-                            <button [class]="cn(b.base, b.outline, b.size.sm)" rdxAlertDialogClose>Cancel</button>
+                            <button rdxAlertDialogClose [class]="cn(b.base, b.outline, b.size.sm)">Cancel</button>
                             <button
-                                [class]="cn(b.base, triggerId() === 'delete' ? b.destructive : b.primary, b.size.sm)"
                                 rdxAlertDialogClose
+                                [class]="cn(b.base, triggerId() === 'delete' ? b.destructive : b.primary, b.size.sm)"
                             >
                                 {{ triggerId() === 'delete' ? 'Delete' : 'Log out' }}
                             </button>
@@ -330,9 +330,9 @@ Connect a trigger rendered outside the root with `createRdxAlertDialogHandle()`;
 imperative `open(id)` / `close()`.
 
 ```typescript
+import { cn, demoButton, demoDialog } from '../../storybook/styles';
 import { ChangeDetectionStrategy, Component } from '@angular/core';
 import { alertDialogImports, createRdxAlertDialogHandle } from '@radix-ng/primitives/alert-dialog';
-import { cn, demoButton, demoDialog } from '../../storybook/styles';
 
 @Component({
     changeDetection: ChangeDetectionStrategy.Eager,
@@ -341,7 +341,7 @@ import { cn, demoButton, demoDialog } from '../../storybook/styles';
     template: `
         <div class="flex flex-col items-center gap-3">
             <!-- Triggers live outside the root and are linked through a shared handle. -->
-            <button id="delete" [class]="cn(b.base, b.destructive, b.size.md)" [handle]="handle" rdxAlertDialogTrigger>
+            <button id="delete" rdxAlertDialogTrigger [class]="cn(b.base, b.destructive, b.size.md)" [handle]="handle">
                 Delete file
             </button>
 
@@ -349,19 +349,19 @@ import { cn, demoButton, demoDialog } from '../../storybook/styles';
                 Open imperatively
             </button>
 
-            <div [handle]="handle" rdxAlertDialogRoot>
+            <div rdxAlertDialogRoot [handle]="handle">
                 <ng-template rdxAlertDialogPortal>
-                    <div [class]="cn(d.backdrop, d.backdropAnimated)" rdxAlertDialogBackdrop></div>
-                    <div [class]="cn(d.popup, d.popupAnimated)" rdxAlertDialogPopup>
-                        <h2 [class]="d.title" rdxAlertDialogTitle>Delete this file?</h2>
-                        <p [class]="d.description" rdxAlertDialogDescription>
+                    <div rdxAlertDialogBackdrop [class]="cn(d.backdrop, d.backdropAnimated)"></div>
+                    <div rdxAlertDialogPopup [class]="cn(d.popup, d.popupAnimated)">
+                        <h2 rdxAlertDialogTitle [class]="d.title">Delete this file?</h2>
+                        <p rdxAlertDialogDescription [class]="d.description">
                             The trigger and this alert dialog are connected with
                             <code>createRdxAlertDialogHandle()</code>
                             .
                         </p>
                         <div [class]="d.footer">
-                            <button [class]="cn(b.base, b.outline, b.size.sm)" rdxAlertDialogClose>Cancel</button>
-                            <button [class]="cn(b.base, b.destructive, b.size.sm)" rdxAlertDialogClose>Delete</button>
+                            <button rdxAlertDialogClose [class]="cn(b.base, b.outline, b.size.sm)">Cancel</button>
+                            <button rdxAlertDialogClose [class]="cn(b.base, b.destructive, b.size.sm)">Delete</button>
                         </div>
                     </div>
                 </ng-template>
@@ -383,11 +383,11 @@ A regular Dialog editor asks an Alert Dialog to confirm before discarding unsave
 reason to reach for an alert dialog.
 
 ```typescript
+import { cn, demoButton, demoDialog, demoInput } from '../../storybook/styles';
 import { ChangeDetectionStrategy, Component, signal } from '@angular/core';
 import { FormsModule } from '@angular/forms';
 import { alertDialogImports } from '@radix-ng/primitives/alert-dialog';
 import { dialogImports, RdxDialogOpenChange } from '@radix-ng/primitives/dialog';
-import { cn, demoButton, demoDialog, demoInput } from '../../storybook/styles';
 
 @Component({
     changeDetection: ChangeDetectionStrategy.Eager,
@@ -395,20 +395,20 @@ import { cn, demoButton, demoDialog, demoInput } from '../../storybook/styles';
     imports: [...dialogImports, ...alertDialogImports, FormsModule],
     template: `
         <!-- The editor is a regular Dialog, controlled so a close request can be intercepted. -->
-        <div [(open)]="editorOpen" (onOpenChange)="onEditorOpenChange($event)" rdxDialogRoot>
-            <button [class]="cn(b.base, b.primary, b.size.md)" rdxDialogTrigger>Edit note</button>
+        <div rdxDialogRoot [(open)]="editorOpen" (onOpenChange)="onEditorOpenChange($event)">
+            <button rdxDialogTrigger [class]="cn(b.base, b.primary, b.size.md)">Edit note</button>
 
             <ng-template rdxDialogPortal>
-                <div [class]="cn(d.backdrop, d.backdropAnimated)" rdxDialogBackdrop></div>
-                <div [class]="cn(d.popup, d.popupAnimated)" rdxDialogPopup>
-                    <h2 [class]="d.title" rdxDialogTitle>Edit note</h2>
-                    <p [class]="d.description" rdxDialogDescription>
+                <div rdxDialogBackdrop [class]="cn(d.backdrop, d.backdropAnimated)"></div>
+                <div rdxDialogPopup [class]="cn(d.popup, d.popupAnimated)">
+                    <h2 rdxDialogTitle [class]="d.title">Edit note</h2>
+                    <p rdxDialogDescription [class]="d.description">
                         Closing with unsaved changes asks an alert dialog to confirm.
                     </p>
 
                     <label [class]="d.field">
                         Note
-                        <input [(ngModel)]="text" [class]="input" placeholder="Type to create changes" />
+                        <input placeholder="Type to create changes" [class]="input" [(ngModel)]="text" />
                     </label>
 
                     <div [class]="d.footer">
@@ -420,12 +420,12 @@ import { cn, demoButton, demoDialog, demoInput } from '../../storybook/styles';
         </div>
 
         <!-- The confirmation is an Alert Dialog (assertive, not outside-dismissable). -->
-        <div [(open)]="confirmOpen" rdxAlertDialogRoot>
+        <div rdxAlertDialogRoot [(open)]="confirmOpen">
             <ng-template rdxAlertDialogPortal>
-                <div [class]="cn(d.backdrop, d.backdropAnimated)" rdxAlertDialogBackdrop></div>
-                <div [class]="cn(d.popup, d.popupAnimated)" rdxAlertDialogPopup>
-                    <h2 [class]="d.title" rdxAlertDialogTitle>Discard changes?</h2>
-                    <p [class]="d.description" rdxAlertDialogDescription>Your unsaved note will be lost.</p>
+                <div rdxAlertDialogBackdrop [class]="cn(d.backdrop, d.backdropAnimated)"></div>
+                <div rdxAlertDialogPopup [class]="cn(d.popup, d.popupAnimated)">
+                    <h2 rdxAlertDialogTitle [class]="d.title">Discard changes?</h2>
+                    <p rdxAlertDialogDescription [class]="d.description">Your unsaved note will be lost.</p>
                     <div [class]="d.footer">
                         <button [class]="cn(b.base, b.outline, b.size.sm)" (click)="confirmOpen.set(false)">
                             Keep editing
@@ -485,10 +485,10 @@ export class RdxAlertDialogCloseConfirmationComponent {
 Control the alert dialog's `open` state from a menu item to launch a destructive confirmation from a `Menu`.
 
 ```typescript
+import { cn, demoButton, demoDialog, demoMenu } from '../../storybook/styles';
 import { ChangeDetectionStrategy, Component, signal } from '@angular/core';
 import { alertDialogImports } from '@radix-ng/primitives/alert-dialog';
 import { RdxMenuModule } from '@radix-ng/primitives/menu';
-import { cn, demoButton, demoDialog, demoMenu } from '../../storybook/styles';
 
 @Component({
     changeDetection: ChangeDetectionStrategy.Eager,
@@ -496,32 +496,32 @@ import { cn, demoButton, demoDialog, demoMenu } from '../../storybook/styles';
     imports: [...alertDialogImports, RdxMenuModule],
     template: `
         <ng-container #menu="rdxMenuRoot" rdxMenuRoot>
-            <button [class]="cn(b.base, b.outline, b.size.md)" rdxMenuTrigger>Project</button>
+            <button rdxMenuTrigger [class]="cn(b.base, b.outline, b.size.md)">Project</button>
 
             @if (menu.open()) {
-                <div [class]="m.positioner" sideOffset="4" rdxMenuPositioner>
-                    <div [class]="m.popup" rdxMenuPopup>
-                        <button [class]="m.item" rdxMenuItem>Rename</button>
-                        <button [class]="m.item" rdxMenuItem>Duplicate</button>
-                        <div [class]="m.separator" rdxMenuSeparator></div>
-                        <button [class]="m.item" (click)="deleteOpen.set(true)" rdxMenuItem>Delete…</button>
+                <div sideOffset="4" rdxMenuPositioner [class]="m.positioner">
+                    <div rdxMenuPopup [class]="m.popup">
+                        <button rdxMenuItem [class]="m.item">Rename</button>
+                        <button rdxMenuItem [class]="m.item">Duplicate</button>
+                        <div rdxMenuSeparator [class]="m.separator"></div>
+                        <button rdxMenuItem [class]="m.item" (click)="deleteOpen.set(true)">Delete…</button>
                     </div>
                 </div>
             }
         </ng-container>
 
         <!-- Controlled alert dialog opened from the menu item. -->
-        <div [(open)]="deleteOpen" rdxAlertDialogRoot>
+        <div rdxAlertDialogRoot [(open)]="deleteOpen">
             <ng-template rdxAlertDialogPortal>
-                <div [class]="cn(d.backdrop, d.backdropAnimated)" rdxAlertDialogBackdrop></div>
-                <div [class]="cn(d.popup, d.popupAnimated)" rdxAlertDialogPopup>
-                    <h2 [class]="d.title" rdxAlertDialogTitle>Delete project?</h2>
-                    <p [class]="d.description" rdxAlertDialogDescription>
+                <div rdxAlertDialogBackdrop [class]="cn(d.backdrop, d.backdropAnimated)"></div>
+                <div rdxAlertDialogPopup [class]="cn(d.popup, d.popupAnimated)">
+                    <h2 rdxAlertDialogTitle [class]="d.title">Delete project?</h2>
+                    <p rdxAlertDialogDescription [class]="d.description">
                         This permanently deletes the project. Opened by controlling the alert dialog from a menu item.
                     </p>
                     <div [class]="d.footer">
-                        <button [class]="cn(b.base, b.outline, b.size.sm)" rdxAlertDialogClose>Cancel</button>
-                        <button [class]="cn(b.base, b.destructive, b.size.sm)" rdxAlertDialogClose>Delete</button>
+                        <button rdxAlertDialogClose [class]="cn(b.base, b.outline, b.size.sm)">Cancel</button>
+                        <button rdxAlertDialogClose [class]="cn(b.base, b.destructive, b.size.sm)">Delete</button>
                     </div>
                 </div>
             </ng-template>
diff --git a/skills/radix-ng-examples/references/components/autocomplete.md b/skills/radix-ng-examples/references/components/autocomplete.md
index baf497c42..f63e1aea3 100644
--- a/skills/radix-ng-examples/references/components/autocomplete.md
+++ b/skills/radix-ng-examples/references/components/autocomplete.md
@@ -11,9 +11,9 @@ Use Autocomplete for free-form entry with suggestions (search boxes, command inp
 the value is a chosen item (or items) rather than the typed text.
 
 ```typescript
-import { ChangeDetectionStrategy, Component, signal } from '@angular/core';
 import { cn, demoCombobox } from '../../storybook/styles';
 import { _importsAutocomplete } from '../index';
+import { ChangeDetectionStrategy, Component, signal } from '@angular/core';
 
 const TAGS = [
     'feature',
@@ -64,24 +64,24 @@ const TAGS = [
     selector: 'autocomplete-default',
     imports: [_importsAutocomplete],
     template: `
-        <div [(value)]="value" rdxAutocompleteRoot>
-            <div [class]="c.control" rdxAutocompleteInputGroup>
+        <div rdxAutocompleteRoot [(value)]="value">
+            <div rdxAutocompleteInputGroup [class]="c.control">
                 <input
-                    [class]="cn(c.input, 'pr-3')"
                     rdxAutocompleteInput
                     placeholder="e.g. fix"
                     aria-label="Search tags"
+                    [class]="cn(c.input, 'pr-3')"
                 />
             </div>
 
-            <div *rdxAutocompletePortal [class]="c.positioner" rdxAutocompletePositioner>
-                <div [class]="c.popup" rdxAutocompletePopup>
-                    <div [class]="c.list" rdxAutocompleteList aria-label="Tags">
+            <div *rdxAutocompletePortal rdxAutocompletePositioner [class]="c.positioner">
+                <div rdxAutocompletePopup [class]="c.popup">
+                    <div rdxAutocompleteList aria-label="Tags" [class]="c.list">
                         @for (tag of tags; track tag) {
-                            <div [class]="c.item" rdxAutocompleteItem>{{ tag }}</div>
+                            <div rdxAutocompleteItem [class]="c.item">{{ tag }}</div>
                         }
                     </div>
-                    <div [class]="c.empty" rdxAutocompleteEmpty>No tags found.</div>
+                    <div rdxAutocompleteEmpty [class]="c.empty">No tags found.</div>
                 </div>
             </div>
         </div>
@@ -178,9 +178,9 @@ in place (non-matching items are hidden, not destroyed).
 Type to filter a list of suggestions; pick one to fill the input.
 
 ```typescript
-import { ChangeDetectionStrategy, Component, signal } from '@angular/core';
 import { cn, demoCombobox } from '../../storybook/styles';
 import { _importsAutocomplete } from '../index';
+import { ChangeDetectionStrategy, Component, signal } from '@angular/core';
 
 const TAGS = [
     'feature',
@@ -231,24 +231,24 @@ const TAGS = [
     selector: 'autocomplete-default',
     imports: [_importsAutocomplete],
     template: `
-        <div [(value)]="value" rdxAutocompleteRoot>
-            <div [class]="c.control" rdxAutocompleteInputGroup>
+        <div rdxAutocompleteRoot [(value)]="value">
+            <div rdxAutocompleteInputGroup [class]="c.control">
                 <input
-                    [class]="cn(c.input, 'pr-3')"
                     rdxAutocompleteInput
                     placeholder="e.g. fix"
                     aria-label="Search tags"
+                    [class]="cn(c.input, 'pr-3')"
                 />
             </div>
 
-            <div *rdxAutocompletePortal [class]="c.positioner" rdxAutocompletePositioner>
-                <div [class]="c.popup" rdxAutocompletePopup>
-                    <div [class]="c.list" rdxAutocompleteList aria-label="Tags">
+            <div *rdxAutocompletePortal rdxAutocompletePositioner [class]="c.positioner">
+                <div rdxAutocompletePopup [class]="c.popup">
+                    <div rdxAutocompleteList aria-label="Tags" [class]="c.list">
                         @for (tag of tags; track tag) {
-                            <div [class]="c.item" rdxAutocompleteItem>{{ tag }}</div>
+                            <div rdxAutocompleteItem [class]="c.item">{{ tag }}</div>
                         }
                     </div>
-                    <div [class]="c.empty" rdxAutocompleteEmpty>No tags found.</div>
+                    <div rdxAutocompleteEmpty [class]="c.empty">No tags found.</div>
                 </div>
             </div>
         </div>
@@ -269,9 +269,9 @@ suffix selected so the next keystroke replaces it. Inline modes highlight the fi
 so no `autoHighlight` is required.
 
 ```typescript
-import { ChangeDetectionStrategy, Component, signal } from '@angular/core';
 import { demoCombobox } from '../../storybook/styles';
 import { _importsAutocomplete } from '../index';
+import { ChangeDetectionStrategy, Component, signal } from '@angular/core';
 
 const TAGS = [
     'feature',
@@ -322,19 +322,19 @@ const TAGS = [
     selector: 'autocomplete-inline',
     imports: [_importsAutocomplete],
     template: `
-        <div [(value)]="value" mode="both" rdxAutocompleteRoot>
-            <div [class]="c.control" rdxAutocompleteInputGroup>
-                <input [class]="c.input" rdxAutocompleteInput placeholder="e.g. fix" aria-label="Search tags" />
+        <div mode="both" rdxAutocompleteRoot [(value)]="value">
+            <div rdxAutocompleteInputGroup [class]="c.control">
+                <input rdxAutocompleteInput placeholder="e.g. fix" aria-label="Search tags" [class]="c.input" />
             </div>
 
-            <div *rdxAutocompletePortal [class]="c.positioner" rdxAutocompletePositioner>
-                <div [class]="c.popup" rdxAutocompletePopup>
-                    <div [class]="c.list" rdxAutocompleteList aria-label="Tags">
+            <div *rdxAutocompletePortal rdxAutocompletePositioner [class]="c.positioner">
+                <div rdxAutocompletePopup [class]="c.popup">
+                    <div rdxAutocompleteList aria-label="Tags" [class]="c.list">
                         @for (tag of tags; track tag) {
-                            <div [class]="c.item" rdxAutocompleteItem>{{ tag }}</div>
+                            <div rdxAutocompleteItem [class]="c.item">{{ tag }}</div>
                         }
                     </div>
-                    <div [class]="c.empty" rdxAutocompleteEmpty>No tags found.</div>
+                    <div rdxAutocompleteEmpty [class]="c.empty">No tags found.</div>
                 </div>
             </div>
         </div>
@@ -352,9 +352,9 @@ export class AutocompleteInline {
 `autoHighlight` keeps the first match highlighted as you type, so Enter selects it immediately.
 
 ```typescript
-import { ChangeDetectionStrategy, Component, signal } from '@angular/core';
 import { demoCombobox } from '../../storybook/styles';
 import { _importsAutocomplete } from '../index';
+import { ChangeDetectionStrategy, Component, signal } from '@angular/core';
 
 const TAGS = [
     'feature',
@@ -405,19 +405,19 @@ const TAGS = [
     selector: 'autocomplete-auto-highlight',
     imports: [_importsAutocomplete],
     template: `
-        <div [(value)]="value" autoHighlight rdxAutocompleteRoot>
-            <div [class]="c.control" rdxAutocompleteInputGroup>
-                <input [class]="c.input" rdxAutocompleteInput placeholder="e.g. fix" aria-label="Search tags" />
+        <div autoHighlight rdxAutocompleteRoot [(value)]="value">
+            <div rdxAutocompleteInputGroup [class]="c.control">
+                <input rdxAutocompleteInput placeholder="e.g. fix" aria-label="Search tags" [class]="c.input" />
             </div>
 
-            <div *rdxAutocompletePortal [class]="c.positioner" rdxAutocompletePositioner>
-                <div [class]="c.popup" rdxAutocompletePopup>
-                    <div [class]="c.list" rdxAutocompleteList aria-label="Tags">
+            <div *rdxAutocompletePortal rdxAutocompletePositioner [class]="c.positioner">
+                <div rdxAutocompletePopup [class]="c.popup">
+                    <div rdxAutocompleteList aria-label="Tags" [class]="c.list">
                         @for (tag of tags; track tag) {
-                            <div [class]="c.item" rdxAutocompleteItem>{{ tag }}</div>
+                            <div rdxAutocompleteItem [class]="c.item">{{ tag }}</div>
                         }
                     </div>
-                    <div [class]="c.empty" rdxAutocompleteEmpty>No tags found.</div>
+                    <div rdxAutocompleteEmpty [class]="c.empty">No tags found.</div>
                 </div>
             </div>
         </div>
@@ -436,9 +436,9 @@ Group related suggestions with `rdxAutocompleteGroup` / `rdxAutocompleteGroupLab
 hides its heading automatically.
 
 ```typescript
-import { ChangeDetectionStrategy, Component, signal } from '@angular/core';
 import { demoCombobox } from '../../storybook/styles';
 import { _importsAutocomplete } from '../index';
+import { ChangeDetectionStrategy, Component, signal } from '@angular/core';
 
 interface Group {
     label: string;
@@ -450,24 +450,24 @@ interface Group {
     selector: 'autocomplete-grouped',
     imports: [_importsAutocomplete],
     template: `
-        <div [(value)]="value" rdxAutocompleteRoot>
-            <div [class]="c.control" rdxAutocompleteInputGroup>
-                <input [class]="c.input" rdxAutocompleteInput placeholder="e.g. fix" aria-label="Search tags" />
+        <div rdxAutocompleteRoot [(value)]="value">
+            <div rdxAutocompleteInputGroup [class]="c.control">
+                <input rdxAutocompleteInput placeholder="e.g. fix" aria-label="Search tags" [class]="c.input" />
             </div>
 
-            <div *rdxAutocompletePortal [class]="c.positioner" rdxAutocompletePositioner>
-                <div [class]="c.popup" rdxAutocompletePopup>
-                    <div [class]="c.list" rdxAutocompleteList aria-label="Tags">
+            <div *rdxAutocompletePortal rdxAutocompletePositioner [class]="c.positioner">
+                <div rdxAutocompletePopup [class]="c.popup">
+                    <div rdxAutocompleteList aria-label="Tags" [class]="c.list">
                         @for (group of groups; track group.label) {
                             <div rdxAutocompleteGroup>
-                                <div [class]="c.groupLabel" rdxAutocompleteGroupLabel>{{ group.label }}</div>
+                                <div rdxAutocompleteGroupLabel [class]="c.groupLabel">{{ group.label }}</div>
                                 @for (item of group.items; track item) {
-                                    <div [class]="c.item" rdxAutocompleteItem>{{ item }}</div>
+                                    <div rdxAutocompleteItem [class]="c.item">{{ item }}</div>
                                 }
                             </div>
                         }
                     </div>
-                    <div [class]="c.empty" rdxAutocompleteEmpty>No tags found.</div>
+                    <div rdxAutocompleteEmpty [class]="c.empty">No tags found.</div>
                 </div>
             </div>
         </div>
@@ -527,28 +527,28 @@ export class AutocompleteGrouped {
 `limit` caps how many matches are shown at once.
 
 ```typescript
-import { ChangeDetectionStrategy, Component, signal } from '@angular/core';
 import { demoCombobox } from '../../storybook/styles';
 import { _importsAutocomplete } from '../index';
+import { ChangeDetectionStrategy, Component, signal } from '@angular/core';
 
 @Component({
     changeDetection: ChangeDetectionStrategy.Eager,
     selector: 'autocomplete-limit',
     imports: [_importsAutocomplete],
     template: `
-        <div #ac="rdxAutocompleteRoot" [(value)]="value" [limit]="8" rdxAutocompleteRoot>
-            <div [class]="c.control" rdxAutocompleteInputGroup>
-                <input [class]="c.input" rdxAutocompleteInput placeholder="e.g. component" aria-label="Search tags" />
+        <div #ac="rdxAutocompleteRoot" rdxAutocompleteRoot [limit]="8" [(value)]="value">
+            <div rdxAutocompleteInputGroup [class]="c.control">
+                <input rdxAutocompleteInput placeholder="e.g. component" aria-label="Search tags" [class]="c.input" />
             </div>
 
-            <div *rdxAutocompletePortal [class]="c.positioner" rdxAutocompletePositioner>
-                <div [class]="c.popup" rdxAutocompletePopup>
-                    <div [class]="c.list" rdxAutocompleteList aria-label="Tags">
+            <div *rdxAutocompletePortal rdxAutocompletePositioner [class]="c.positioner">
+                <div rdxAutocompletePopup [class]="c.popup">
+                    <div rdxAutocompleteList aria-label="Tags" [class]="c.list">
                         @for (tag of tags; track tag) {
-                            <div [class]="c.item" rdxAutocompleteItem>{{ tag }}</div>
+                            <div rdxAutocompleteItem [class]="c.item">{{ tag }}</div>
                         }
                     </div>
-                    <div [class]="c.empty" rdxAutocompleteEmpty>No tags found.</div>
+                    <div rdxAutocompleteEmpty [class]="c.empty">No tags found.</div>
                     @if (hiddenCount(ac.value()); as hidden) {
                         <div class="text-muted-foreground border-border mt-1 border-t px-2 py-1 text-xs">
                             {{ hidden }} more {{ hidden === 1 ? 'result' : 'results' }} not shown
@@ -632,10 +632,10 @@ multiple fields. This example uses `match-sorter` over `title` / `description` /
 highlights the matched text.
 
 ```typescript
-import { ChangeDetectionStrategy, Component, signal } from '@angular/core';
-import { matchSorter, rankings } from 'match-sorter';
 import { cn, demoCombobox } from '../../storybook/styles';
 import { _importsAutocomplete, AutocompleteFilter } from '../index';
+import { ChangeDetectionStrategy, Component, signal } from '@angular/core';
+import { matchSorter, rankings } from 'match-sorter';
 
 interface DocItem {
     title: string;
@@ -667,17 +667,17 @@ const fuzzyFilter: AutocompleteFilter = (value, query) => {
     selector: 'autocomplete-fuzzy',
     imports: [_importsAutocomplete],
     template: `
-        <div #ac="rdxAutocompleteRoot" [(value)]="value" [filter]="fuzzy" rdxAutocompleteRoot>
-            <div [class]="control" rdxAutocompleteInputGroup>
-                <input [class]="c.input" rdxAutocompleteInput placeholder="e.g. React" aria-label="Documentation" />
+        <div #ac="rdxAutocompleteRoot" rdxAutocompleteRoot [filter]="fuzzy" [(value)]="value">
+            <div rdxAutocompleteInputGroup [class]="control">
+                <input rdxAutocompleteInput placeholder="e.g. React" aria-label="Documentation" [class]="c.input" />
             </div>
 
-            <div *rdxAutocompletePortal [class]="positioner" rdxAutocompletePositioner>
-                <div [class]="popup" rdxAutocompletePopup>
-                    <div [class]="c.empty" rdxAutocompleteEmpty>No results found for "{{ ac.value() }}".</div>
-                    <div [class]="c.list" rdxAutocompleteList aria-label="Documentation">
+            <div *rdxAutocompletePortal rdxAutocompletePositioner [class]="positioner">
+                <div rdxAutocompletePopup [class]="popup">
+                    <div rdxAutocompleteEmpty [class]="c.empty">No results found for "{{ ac.value() }}".</div>
+                    <div rdxAutocompleteList aria-label="Documentation" [class]="c.list">
                         @for (item of items; track item.title) {
-                            <div [class]="itemClass" [value]="item" [textValue]="item.title" rdxAutocompleteItem>
+                            <div rdxAutocompleteItem [class]="itemClass" [value]="item" [textValue]="item.title">
                                 <span class="flex flex-col gap-0.5">
                                     <span
                                         class="text-foreground leading-5 font-semibold"
@@ -826,9 +826,9 @@ export class AutocompleteFuzzy {
 a failure) and `RdxAutocompleteStatus` announces loading, result counts, and errors.
 
 ```typescript
-import { ChangeDetectionStrategy, Component, computed, signal } from '@angular/core';
 import { demoCombobox } from '../../storybook/styles';
 import { _importsAutocomplete } from '../index';
+import { ChangeDetectionStrategy, Component, computed, signal } from '@angular/core';
 
 interface Movie {
     id: string;
@@ -951,18 +951,18 @@ const top100Movies: Movie[] = [
     selector: 'autocomplete-async',
     imports: [_importsAutocomplete],
     template: `
-        <div [(value)]="value" [filter]="null" (onValueChange)="search($event.value)" rdxAutocompleteRoot>
-            <div [class]="c.control" rdxAutocompleteInputGroup>
+        <div rdxAutocompleteRoot [filter]="null" [(value)]="value" (onValueChange)="search($event.value)">
+            <div rdxAutocompleteInputGroup [class]="c.control">
                 <input
-                    [class]="c.input"
                     rdxAutocompleteInput
                     placeholder="e.g. Pulp Fiction or 1994"
                     aria-label="Movie"
+                    [class]="c.input"
                 />
             </div>
 
-            <div *rdxAutocompletePortal [class]="c.positioner" rdxAutocompletePositioner>
-                <div [class]="c.popup" [hidden]="!status()" rdxAutocompletePopup>
+            <div *rdxAutocompletePortal rdxAutocompletePositioner [class]="c.positioner">
+                <div rdxAutocompletePopup [class]="c.popup" [hidden]="!status()">
                     <div class="text-muted-foreground flex items-center gap-2 px-2 py-1 text-xs" rdxAutocompleteStatus>
                         @if (loading()) {
                             <span
@@ -974,9 +974,9 @@ const top100Movies: Movie[] = [
                             {{ status() }}
                         }
                     </div>
-                    <div [class]="c.list" rdxAutocompleteList aria-label="Movies">
+                    <div rdxAutocompleteList aria-label="Movies" [class]="c.list">
                         @for (movie of results(); track movie.id) {
-                            <div [class]="c.item" [value]="movie.title" [textValue]="movie.title" rdxAutocompleteItem>
+                            <div rdxAutocompleteItem [class]="c.item" [value]="movie.title" [textValue]="movie.title">
                                 {{ movie.title }}
                                 <span class="text-muted-foreground ml-1 text-xs">{{ movie.year }}</span>
                             </div>
@@ -1054,10 +1054,10 @@ An always-open, inline autocomplete (no popup — the `List` is rendered directl
 (the autocomplete's `open` is shared with the dialog via `[(open)]`).
 
 ```typescript
-import { ChangeDetectionStrategy, Component, signal } from '@angular/core';
-import { dialogImports } from '@radix-ng/primitives/dialog';
 import { cn, demoButton, demoCard, demoDialog } from '../../storybook/styles';
 import { _importsAutocomplete } from '../index';
+import { ChangeDetectionStrategy, Component, signal } from '@angular/core';
+import { dialogImports } from '@radix-ng/primitives/dialog';
 
 interface Item {
     value: string;
@@ -1079,33 +1079,33 @@ interface Group {
     selector: 'autocomplete-command-palette',
     imports: [...dialogImports, _importsAutocomplete],
     template: `
-        <div [(open)]="open" rdxDialogRoot>
-            <button [class]="cn(b.base, b.primary, b.size.md)" rdxDialogTrigger>Open command palette</button>
+        <div rdxDialogRoot [(open)]="open">
+            <button rdxDialogTrigger [class]="cn(b.base, b.primary, b.size.md)">Open command palette</button>
 
             <ng-template rdxDialogPortal>
-                <div [class]="cn(d.backdrop, d.backdropAnimated)" rdxDialogBackdrop></div>
+                <div rdxDialogBackdrop [class]="cn(d.backdrop, d.backdropAnimated)"></div>
 
                 <div class="fixed inset-0 z-50 flex items-start justify-center overflow-y-auto p-4 pt-[12vh]">
-                    <div [class]="popup" rdxDialogPopup aria-label="Command palette">
-                        <div [(open)]="open" autoHighlight="always" rdxAutocompleteRoot>
+                    <div rdxDialogPopup aria-label="Command palette" [class]="popup">
+                        <div autoHighlight="always" rdxAutocompleteRoot [(open)]="open">
                             <input
                                 #cmdInput
-                                [class]="input"
                                 rdxAutocompleteInput
                                 placeholder="Search for apps and commands…"
                                 aria-label="Command"
+                                [class]="input"
                             />
 
-                            <div [class]="list" rdxAutocompleteList aria-label="Commands">
+                            <div rdxAutocompleteList aria-label="Commands" [class]="list">
                                 @for (group of groups; track group.value) {
                                     <div class="mb-1" rdxAutocompleteGroup>
-                                        <div [class]="groupLabel" rdxAutocompleteGroupLabel>{{ group.value }}</div>
+                                        <div rdxAutocompleteGroupLabel [class]="groupLabel">{{ group.value }}</div>
                                         @for (item of group.items; track item.value) {
                                             <div
+                                                rdxAutocompleteItem
                                                 [class]="itemClass"
                                                 [value]="item"
                                                 [textValue]="item.label"
-                                                rdxAutocompleteItem
                                             >
                                                 <span class="truncate">{{ item.label }}</span>
                                                 <span [class]="badge">
@@ -1115,7 +1115,7 @@ interface Group {
                                         }
                                     </div>
                                 }
-                                <div [class]="empty" rdxAutocompleteEmpty>No results found.</div>
+                                <div rdxAutocompleteEmpty [class]="empty">No results found.</div>
                             </div>
 
                             <div [class]="footer">
@@ -1211,9 +1211,9 @@ open; pressing an item inserts it into the message field, and `onValueChange` is
 `reason === 'item-press'` so the search box is not overwritten.
 
 ```typescript
-import { ChangeDetectionStrategy, Component, ElementRef, signal, viewChild } from '@angular/core';
 import { cn, demoCombobox, demoFocusRing } from '../../storybook/styles';
 import { _importsAutocomplete } from '../index';
+import { ChangeDetectionStrategy, Component, ElementRef, signal, viewChild } from '@angular/core';
 
 interface Emoji {
     emoji: string;
@@ -1248,42 +1248,42 @@ function chunk<T>(items: T[], size: number): T[][] {
     template: `
         <div class="relative flex w-64">
             <input
-                class="border-border bg-background text-foreground placeholder:text-muted-foreground focus-visible:ring-ring relative -mr-px h-9 flex-1 rounded-l-md border px-2 text-sm outline-none focus-visible:z-10 focus-visible:ring-2 focus-visible:ring-inset"
                 #message
+                class="border-border bg-background text-foreground placeholder:text-muted-foreground focus-visible:ring-ring relative -mr-px h-9 flex-1 rounded-l-md border px-2 text-sm outline-none focus-visible:z-10 focus-visible:ring-2 focus-visible:ring-inset"
                 placeholder="Message…"
                 aria-label="Message"
             />
 
             <div
-                [(open)]="open"
+                grid
+                rdxAutocompleteRoot
                 [value]="search()"
+                [(open)]="open"
                 (onValueChange)="onSearch($event)"
                 (onOpenChangeComplete)="onOpenComplete($event)"
-                grid
-                rdxAutocompleteRoot
             >
-                <button [class]="trigger" rdxAutocompleteTrigger rdxAutocompleteAnchor aria-label="Choose emoji">
+                <button rdxAutocompleteTrigger rdxAutocompleteAnchor aria-label="Choose emoji" [class]="trigger">
                     😀
                 </button>
 
-                <div *rdxAutocompletePortal [class]="c.positioner" rdxAutocompletePositioner align="end">
-                    <div [class]="popup" rdxAutocompletePopup>
+                <div *rdxAutocompletePortal rdxAutocompletePositioner align="end" [class]="c.positioner">
+                    <div rdxAutocompletePopup [class]="popup">
                         <input
-                            [class]="input"
                             rdxAutocompleteInput
                             placeholder="Search emojis…"
                             aria-label="Search emojis"
+                            [class]="input"
                         />
                         <div class="max-h-64 overflow-auto p-1">
                             @for (group of groups; track group.label) {
                                 <div rdxAutocompleteGroup>
-                                    <div [class]="c.groupLabel" rdxAutocompleteGroupLabel>
+                                    <div rdxAutocompleteGroupLabel [class]="c.groupLabel">
                                         {{ group.label }}
                                     </div>
                                     @for (row of group.rows; track $index) {
                                         <div class="grid grid-cols-5" rdxAutocompleteRow>
                                             @for (item of row; track item.emoji) {
-                                                <div [class]="cell" [textValue]="item.name" rdxAutocompleteItem>
+                                                <div rdxAutocompleteItem [class]="cell" [textValue]="item.name">
                                                     {{ item.emoji }}
                                                 </div>
                                             }
@@ -1292,7 +1292,7 @@ function chunk<T>(items: T[], size: number): T[][] {
                                 </div>
                             }
                         </div>
-                        <div [class]="c.empty" rdxAutocompleteEmpty>No emoji found.</div>
+                        <div rdxAutocompleteEmpty [class]="c.empty">No emoji found.</div>
                     </div>
                 </div>
             </div>
@@ -1511,10 +1511,10 @@ protected onOpenChange(change: { open: boolean; eventDetails: { cancel(): void }
 renders only the visible window.
 
 ```typescript
-import { ChangeDetectionStrategy, Component, ElementRef, signal, viewChild } from '@angular/core';
-import { injectVirtualizer } from '@tanstack/angular-virtual';
 import { cn, demoCombobox } from '../../storybook/styles';
 import { _importsAutocomplete, AutocompleteItemHighlightedDetails, RdxAutocompleteRoot } from '../index';
+import { ChangeDetectionStrategy, Component, ElementRef, signal, viewChild } from '@angular/core';
+import { injectVirtualizer } from '@tanstack/angular-virtual';
 
 /**
  * Externally virtualized list of 10,000 items. The autocomplete owns filtering and index navigation
@@ -1529,30 +1529,30 @@ import { _importsAutocomplete, AutocompleteItemHighlightedDetails, RdxAutocomple
     template: `
         <div
             #ac="rdxAutocompleteRoot"
-            [(value)]="value"
-            [items]="items"
-            (onItemHighlighted)="onHighlight($event)"
             virtualized
             rdxAutocompleteRoot
+            [items]="items"
+            [(value)]="value"
+            (onItemHighlighted)="onHighlight($event)"
         >
-            <div [class]="c.control" rdxAutocompleteInputGroup>
-                <input [class]="c.input" rdxAutocompleteInput placeholder="Search 10,000 items…" aria-label="Item" />
+            <div rdxAutocompleteInputGroup [class]="c.control">
+                <input rdxAutocompleteInput placeholder="Search 10,000 items…" aria-label="Item" [class]="c.input" />
             </div>
 
-            <div *rdxAutocompletePortal [class]="c.positioner" rdxAutocompletePositioner>
-                <div [class]="popup" rdxAutocompletePopup>
-                    <div [class]="c.empty" rdxAutocompleteEmpty>No items found.</div>
-                    <div [class]="c.list" rdxAutocompleteList aria-label="Items">
+            <div *rdxAutocompletePortal rdxAutocompletePositioner [class]="c.positioner">
+                <div rdxAutocompletePopup [class]="popup">
+                    <div rdxAutocompleteEmpty [class]="c.empty">No items found.</div>
+                    <div rdxAutocompleteList aria-label="Items" [class]="c.list">
                         <div #scroll [class]="scroller">
                             <div [class]="spacer" [style.height.px]="virtualizer.getTotalSize()">
                                 @for (row of virtualizer.getVirtualItems(); track row.key) {
                                     <div
+                                        rdxAutocompleteItem
                                         [class]="item"
                                         [value]="ac.filteredItems()[row.index]"
                                         [index]="row.index"
                                         [style.height.px]="row.size"
                                         [style.transform]="'translateY(' + row.start + 'px)'"
-                                        rdxAutocompleteItem
                                     >
                                         {{ ac.filteredItems()[row.index] }}
                                     </div>
@@ -1611,10 +1611,10 @@ export class AutocompleteVirtualizedExample {
 The form value is the input string. Bind `[formControl]` to the root.
 
 ```typescript
-import { ChangeDetectionStrategy, Component } from '@angular/core';
-import { FormControl, ReactiveFormsModule } from '@angular/forms';
 import { demoCombobox } from '../../storybook/styles';
 import { _importsAutocomplete } from '../index';
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { FormControl, ReactiveFormsModule } from '@angular/forms';
 
 /**
  * Reactive forms: the form value **is** the input string (typed or selected). Bind `[formControl]`
@@ -1626,19 +1626,19 @@ import { _importsAutocomplete } from '../index';
     imports: [_importsAutocomplete, ReactiveFormsModule],
     template: `
         <div class="flex flex-col gap-3">
-            <div [formControl]="fruit" rdxAutocompleteRoot>
-                <div [class]="c.control" rdxAutocompleteInputGroup>
-                    <input [class]="c.input" rdxAutocompleteInput placeholder="Search a fruit…" aria-label="Fruit" />
+            <div rdxAutocompleteRoot [formControl]="fruit">
+                <div rdxAutocompleteInputGroup [class]="c.control">
+                    <input rdxAutocompleteInput placeholder="Search a fruit…" aria-label="Fruit" [class]="c.input" />
                 </div>
 
-                <div *rdxAutocompletePortal [class]="c.positioner" rdxAutocompletePositioner>
-                    <div [class]="c.popup" rdxAutocompletePopup>
-                        <div [class]="c.list" rdxAutocompleteList aria-label="Fruits">
+                <div *rdxAutocompletePortal rdxAutocompletePositioner [class]="c.positioner">
+                    <div rdxAutocompletePopup [class]="c.popup">
+                        <div rdxAutocompleteList aria-label="Fruits" [class]="c.list">
                             @for (item of fruits; track item) {
-                                <div [class]="c.item" rdxAutocompleteItem>{{ item }}</div>
+                                <div rdxAutocompleteItem [class]="c.item">{{ item }}</div>
                             }
                         </div>
-                        <div [class]="c.empty" rdxAutocompleteEmpty>No fruit found.</div>
+                        <div rdxAutocompleteEmpty [class]="c.empty">No fruit found.</div>
                     </div>
                 </div>
             </div>
@@ -1659,10 +1659,10 @@ export class AutocompleteReactiveForms {
 `[(ngModel)]` binds the input string two-way.
 
 ```typescript
-import { ChangeDetectionStrategy, Component, signal } from '@angular/core';
-import { FormsModule } from '@angular/forms';
 import { demoCombobox } from '../../storybook/styles';
 import { _importsAutocomplete } from '../index';
+import { ChangeDetectionStrategy, Component, signal } from '@angular/core';
+import { FormsModule } from '@angular/forms';
 
 /**
  * Template-driven forms: `[(ngModel)]` binds the input string two-way.
@@ -1673,19 +1673,19 @@ import { _importsAutocomplete } from '../index';
     imports: [_importsAutocomplete, FormsModule],
     template: `
         <div class="flex flex-col gap-3">
-            <div [(ngModel)]="value" rdxAutocompleteRoot>
-                <div [class]="c.control" rdxAutocompleteInputGroup>
-                    <input [class]="c.input" rdxAutocompleteInput placeholder="Search a fruit…" aria-label="Fruit" />
+            <div rdxAutocompleteRoot [(ngModel)]="value">
+                <div rdxAutocompleteInputGroup [class]="c.control">
+                    <input rdxAutocompleteInput placeholder="Search a fruit…" aria-label="Fruit" [class]="c.input" />
                 </div>
 
-                <div *rdxAutocompletePortal [class]="c.positioner" rdxAutocompletePositioner>
-                    <div [class]="c.popup" rdxAutocompletePopup>
-                        <div [class]="c.list" rdxAutocompleteList aria-label="Fruits">
+                <div *rdxAutocompletePortal rdxAutocompletePositioner [class]="c.positioner">
+                    <div rdxAutocompletePopup [class]="c.popup">
+                        <div rdxAutocompleteList aria-label="Fruits" [class]="c.list">
                             @for (item of fruits; track item) {
-                                <div [class]="c.item" rdxAutocompleteItem>{{ item }}</div>
+                                <div rdxAutocompleteItem [class]="c.item">{{ item }}</div>
                             }
                         </div>
-                        <div [class]="c.empty" rdxAutocompleteEmpty>No fruit found.</div>
+                        <div rdxAutocompleteEmpty [class]="c.empty">No fruit found.</div>
                     </div>
                 </div>
             </div>
@@ -1707,10 +1707,10 @@ Bind the control's validity to `[invalid]` so the input reflects `data-invalid`
 error message and submit guard follow the standard reactive-forms pattern.
 
 ```typescript
-import { ChangeDetectionStrategy, Component, signal } from '@angular/core';
-import { FormControl, ReactiveFormsModule, Validators } from '@angular/forms';
 import { cn, demoButton, demoCombobox } from '../../storybook/styles';
 import { _importsAutocomplete } from '../index';
+import { ChangeDetectionStrategy, Component, signal } from '@angular/core';
+import { FormControl, ReactiveFormsModule, Validators } from '@angular/forms';
 
 /**
  * Reactive forms with validation. The form value **is** the input string; its validity is bound to the
@@ -1723,22 +1723,22 @@ import { _importsAutocomplete } from '../index';
     imports: [_importsAutocomplete, ReactiveFormsModule],
     template: `
         <form class="flex flex-col gap-3" (ngSubmit)="onSubmit()">
-            <div [formControl]="fruit" [invalid]="showError()" rdxAutocompleteRoot>
+            <div rdxAutocompleteRoot [formControl]="fruit" [invalid]="showError()">
                 <div
-                    [class]="cn(c.control, showError() && 'border-destructive focus-within:ring-destructive')"
                     rdxAutocompleteInputGroup
+                    [class]="cn(c.control, showError() && 'border-destructive focus-within:ring-destructive')"
                 >
-                    <input [class]="c.input" rdxAutocompleteInput placeholder="Search a fruit…" aria-label="Fruit" />
+                    <input rdxAutocompleteInput placeholder="Search a fruit…" aria-label="Fruit" [class]="c.input" />
                 </div>
 
-                <div *rdxAutocompletePortal [class]="c.positioner" rdxAutocompletePositioner>
-                    <div [class]="c.popup" rdxAutocompletePopup>
-                        <div [class]="c.list" rdxAutocompleteList aria-label="Fruits">
+                <div *rdxAutocompletePortal rdxAutocompletePositioner [class]="c.positioner">
+                    <div rdxAutocompletePopup [class]="c.popup">
+                        <div rdxAutocompleteList aria-label="Fruits" [class]="c.list">
                             @for (item of fruits; track item) {
-                                <div [class]="c.item" rdxAutocompleteItem>{{ item }}</div>
+                                <div rdxAutocompleteItem [class]="c.item">{{ item }}</div>
                             }
                         </div>
-                        <div [class]="c.empty" rdxAutocompleteEmpty>No fruit found.</div>
+                        <div rdxAutocompleteEmpty [class]="c.empty">No fruit found.</div>
                     </div>
                 </div>
             </div>
@@ -1747,7 +1747,7 @@ import { _importsAutocomplete } from '../index';
                 <p class="text-destructive text-sm">Please enter a fruit.</p>
             }
 
-            <button [class]="cn(b.base, b.primary, b.size.md, 'self-start')" type="submit">Submit</button>
+            <button type="submit" [class]="cn(b.base, b.primary, b.size.md, 'self-start')">Submit</button>
 
             @if (submitted()) {
                 <p class="text-muted-foreground text-sm">Submitted ✓</p>
@@ -1782,25 +1782,25 @@ export class AutocompleteValidation {
 ### Disabled
 
 ```typescript
-import { ChangeDetectionStrategy, Component, signal } from '@angular/core';
 import { demoCombobox } from '../../storybook/styles';
 import { _importsAutocomplete } from '../index';
+import { ChangeDetectionStrategy, Component, signal } from '@angular/core';
 
 @Component({
     changeDetection: ChangeDetectionStrategy.Eager,
     selector: 'autocomplete-disabled',
     imports: [_importsAutocomplete],
     template: `
-        <div [(value)]="value" disabled rdxAutocompleteRoot>
-            <div [class]="c.control" rdxAutocompleteInputGroup>
-                <input [class]="c.input" rdxAutocompleteInput placeholder="Disabled" aria-label="Fruit" />
+        <div disabled rdxAutocompleteRoot [(value)]="value">
+            <div rdxAutocompleteInputGroup [class]="c.control">
+                <input rdxAutocompleteInput placeholder="Disabled" aria-label="Fruit" [class]="c.input" />
             </div>
 
-            <div *rdxAutocompletePortal [class]="c.positioner" rdxAutocompletePositioner>
-                <div [class]="c.popup" rdxAutocompletePopup>
-                    <div [class]="c.list" rdxAutocompleteList aria-label="Fruits">
+            <div *rdxAutocompletePortal rdxAutocompletePositioner [class]="c.positioner">
+                <div rdxAutocompletePopup [class]="c.popup">
+                    <div rdxAutocompleteList aria-label="Fruits" [class]="c.list">
                         @for (fruit of fruits; track fruit) {
-                            <div [class]="c.item" rdxAutocompleteItem>{{ fruit }}</div>
+                            <div rdxAutocompleteItem [class]="c.item">{{ fruit }}</div>
                         }
                     </div>
                 </div>
diff --git a/skills/radix-ng-examples/references/components/button.md b/skills/radix-ng-examples/references/components/button.md
index 1127e0f3a..cb96090ba 100644
--- a/skills/radix-ng-examples/references/components/button.md
+++ b/skills/radix-ng-examples/references/components/button.md
@@ -7,9 +7,9 @@ styles — visual variants in the examples come from the centralized demo style
 **Guides/Styling** page).
 
 ```typescript
-import { ChangeDetectionStrategy, Component } from '@angular/core';
 import { cn, demoButton } from '../../storybook/styles';
 import { RdxButtonDirective } from '../src/button.directive';
+import { ChangeDetectionStrategy, Component } from '@angular/core';
 
 /**
  * Visual variants — the recommended `demoButton` styling from the centralized
@@ -21,11 +21,11 @@ import { RdxButtonDirective } from '../src/button.directive';
     imports: [RdxButtonDirective],
     template: `
         <div class="flex flex-wrap items-center gap-3">
-            <button [class]="cn(b.base, b.primary, b.size.md)" rdxButton>Primary</button>
-            <button [class]="cn(b.base, b.secondary, b.size.md)" rdxButton>Secondary</button>
-            <button [class]="cn(b.base, b.outline, b.size.md)" rdxButton>Outline</button>
-            <button [class]="cn(b.base, b.ghost, b.size.md)" rdxButton>Ghost</button>
-            <button [class]="cn(b.base, b.destructive, b.size.md)" rdxButton>Destructive</button>
+            <button rdxButton [class]="cn(b.base, b.primary, b.size.md)">Primary</button>
+            <button rdxButton [class]="cn(b.base, b.secondary, b.size.md)">Secondary</button>
+            <button rdxButton [class]="cn(b.base, b.outline, b.size.md)">Outline</button>
+            <button rdxButton [class]="cn(b.base, b.ghost, b.size.md)">Ghost</button>
+            <button rdxButton [class]="cn(b.base, b.destructive, b.size.md)">Destructive</button>
         </div>
     `
 })
@@ -68,9 +68,9 @@ Visual variants — `primary`, `secondary`, `outline`, `ghost`, and `destructive
 shared `demoButton` style layer, not the directive itself.
 
 ```typescript
-import { ChangeDetectionStrategy, Component } from '@angular/core';
 import { cn, demoButton } from '../../storybook/styles';
 import { RdxButtonDirective } from '../src/button.directive';
+import { ChangeDetectionStrategy, Component } from '@angular/core';
 
 /**
  * Visual variants — the recommended `demoButton` styling from the centralized
@@ -82,11 +82,11 @@ import { RdxButtonDirective } from '../src/button.directive';
     imports: [RdxButtonDirective],
     template: `
         <div class="flex flex-wrap items-center gap-3">
-            <button [class]="cn(b.base, b.primary, b.size.md)" rdxButton>Primary</button>
-            <button [class]="cn(b.base, b.secondary, b.size.md)" rdxButton>Secondary</button>
-            <button [class]="cn(b.base, b.outline, b.size.md)" rdxButton>Outline</button>
-            <button [class]="cn(b.base, b.ghost, b.size.md)" rdxButton>Ghost</button>
-            <button [class]="cn(b.base, b.destructive, b.size.md)" rdxButton>Destructive</button>
+            <button rdxButton [class]="cn(b.base, b.primary, b.size.md)">Primary</button>
+            <button rdxButton [class]="cn(b.base, b.secondary, b.size.md)">Secondary</button>
+            <button rdxButton [class]="cn(b.base, b.outline, b.size.md)">Outline</button>
+            <button rdxButton [class]="cn(b.base, b.ghost, b.size.md)">Ghost</button>
+            <button rdxButton [class]="cn(b.base, b.destructive, b.size.md)">Destructive</button>
         </div>
     `
 })
@@ -101,10 +101,10 @@ export class RdxButtonVariantsComponent {
 `sm`, `md`, `lg`, and a square `icon` size.
 
 ```typescript
-import { ChangeDetectionStrategy, Component } from '@angular/core';
-import { LucideDynamicIcon, LucidePlus } from '@lucide/angular';
 import { cn, demoButton } from '../../storybook/styles';
 import { RdxButtonDirective } from '../src/button.directive';
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { LucideDynamicIcon, LucidePlus } from '@lucide/angular';
 
 /**
  * Sizes, including a square icon button.
@@ -115,10 +115,10 @@ import { RdxButtonDirective } from '../src/button.directive';
     imports: [RdxButtonDirective, LucideDynamicIcon, LucidePlus],
     template: `
         <div class="flex flex-wrap items-center gap-3">
-            <button [class]="cn(b.base, b.primary, b.size.sm)" rdxButton>Small</button>
-            <button [class]="cn(b.base, b.primary, b.size.md)" rdxButton>Medium</button>
-            <button [class]="cn(b.base, b.primary, b.size.lg)" rdxButton>Large</button>
-            <button [class]="cn(b.base, b.primary, b.size.icon)" rdxButton aria-label="Add">
+            <button rdxButton [class]="cn(b.base, b.primary, b.size.sm)">Small</button>
+            <button rdxButton [class]="cn(b.base, b.primary, b.size.md)">Medium</button>
+            <button rdxButton [class]="cn(b.base, b.primary, b.size.lg)">Large</button>
+            <button rdxButton aria-label="Add" [class]="cn(b.base, b.primary, b.size.icon)">
                 <svg class="flex" lucidePlus size="16" />
             </button>
         </div>
@@ -136,9 +136,9 @@ The first button uses the native `disabled` attribute (removed from the tab orde
 `focusableWhenDisabled`, so it stays focusable via `aria-disabled` while its activation is suppressed.
 
 ```typescript
-import { ChangeDetectionStrategy, Component } from '@angular/core';
 import { cn, demoButton } from '../../storybook/styles';
 import { RdxButtonDirective } from '../src/button.directive';
+import { ChangeDetectionStrategy, Component } from '@angular/core';
 
 /**
  * Disabled handling. The first button uses the native `disabled` attribute
@@ -151,8 +151,8 @@ import { RdxButtonDirective } from '../src/button.directive';
     imports: [RdxButtonDirective],
     template: `
         <div class="flex flex-wrap items-center gap-3">
-            <button [class]="cn(b.base, b.primary, b.size.md)" rdxButton disabled>Disabled</button>
-            <button [class]="cn(b.base, b.outline, b.size.md)" rdxButton disabled focusableWhenDisabled>
+            <button rdxButton disabled [class]="cn(b.base, b.primary, b.size.md)">Disabled</button>
+            <button rdxButton disabled focusableWhenDisabled [class]="cn(b.base, b.outline, b.size.md)">
                 Disabled (focusable)
             </button>
         </div>
@@ -170,9 +170,9 @@ The directive applies button semantics to any element. Here an `<a>` renders as
 keeping native link behavior.
 
 ```typescript
-import { ChangeDetectionStrategy, Component } from '@angular/core';
 import { cn, demoButton } from '../../storybook/styles';
 import { RdxButtonDirective } from '../src/button.directive';
+import { ChangeDetectionStrategy, Component } from '@angular/core';
 
 /**
  * The directive works on any host. Here it renders an `<a>` as a button while
@@ -183,7 +183,7 @@ import { RdxButtonDirective } from '../src/button.directive';
     selector: 'rdx-button-as-link',
     imports: [RdxButtonDirective],
     template: `
-        <a [class]="cn(b.base, b.secondary, b.size.md)" rdxButton href="https://base-ui.com" target="_blank">
+        <a rdxButton href="https://base-ui.com" target="_blank" [class]="cn(b.base, b.secondary, b.size.md)">
             Open Base UI
         </a>
     `
@@ -201,10 +201,10 @@ with `focusableWhenDisabled` so focus stays on the button. Add `aria-busy` and r
 communicate the state.
 
 ```typescript
-import { ChangeDetectionStrategy, Component, signal } from '@angular/core';
-import { LucideDynamicIcon, LucidePlus } from '@lucide/angular';
 import { cn, demoButton } from '../../storybook/styles';
 import { RdxButtonDirective } from '../src/button.directive';
+import { ChangeDetectionStrategy, Component, signal } from '@angular/core';
+import { LucideDynamicIcon, LucidePlus } from '@lucide/angular';
 
 /**
  * Loading state. Following Base UI's guidance, the button becomes `disabled`
@@ -217,18 +217,18 @@ import { RdxButtonDirective } from '../src/button.directive';
     imports: [RdxButtonDirective, LucideDynamicIcon, LucidePlus],
     template: `
         <button
+            rdxButton
+            focusableWhenDisabled
             [disabled]="loading()"
             [attr.aria-busy]="loading() ? 'true' : null"
             [class]="cn(b.base, b.primary, b.size.md)"
             (click)="run()"
-            rdxButton
-            focusableWhenDisabled
         >
             <svg
                 class="flex"
+                size="16"
                 [lucideIcon]="loading() ? 'loader-circle' : 'save'"
                 [class.animate-spin]="loading()"
-                size="16"
             />
             {{ loading() ? 'Saving…' : 'Save' }}
         </button>
diff --git a/skills/radix-ng-examples/references/components/calendar.md b/skills/radix-ng-examples/references/components/calendar.md
index 11d07fb64..bf7dde4ce 100644
--- a/skills/radix-ng-examples/references/components/calendar.md
+++ b/skills/radix-ng-examples/references/components/calendar.md
@@ -3,21 +3,21 @@
 #### Displays dates and days of the week, facilitating date-related interactions.
 
 ```typescript
-import { ChangeDetectionStrategy, Component } from '@angular/core';
-import { CalendarDate, DateValue } from '@internationalized/date';
-import { LucideChevronLeft, LucideChevronRight } from '@lucide/angular';
 import { cn, demoCalendar } from '../../storybook/styles';
-import { RdxCalendarCellTriggerDirective } from '../src/calendar-cell-trigger.directive';
 import { RdxCalendarCellDirective } from '../src/calendar-cell.directive';
+import { RdxCalendarCellTriggerDirective } from '../src/calendar-cell-trigger.directive';
+import { RdxCalendarGridDirective } from '../src/calendar-grid.directive';
 import { RdxCalendarGridBodyDirective } from '../src/calendar-grid-body.directive';
 import { RdxCalendarGridHeadDirective } from '../src/calendar-grid-head.directive';
-import { RdxCalendarGridDirective } from '../src/calendar-grid.directive';
 import { RdxCalendarHeadCellDirective } from '../src/calendar-head-cell.directive';
 import { RdxCalendarHeaderDirective } from '../src/calendar-header.directive';
 import { RdxCalendarHeadingDirective } from '../src/calendar-heading.directive';
 import { RdxCalendarNextDirective } from '../src/calendar-next.directive';
 import { RdxCalendarPrevDirective } from '../src/calendar-prev.directive';
 import { RdxCalendarRootDirective } from '../src/calendar-root.directive';
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { CalendarDate, DateValue } from '@internationalized/date';
+import { LucideChevronLeft, LucideChevronRight } from '@lucide/angular';
 
 @Component({
     changeDetection: ChangeDetectionStrategy.Eager,
@@ -38,37 +38,37 @@ import { RdxCalendarRootDirective } from '../src/calendar-root.directive';
         LucideChevronRight
     ],
     template: `
-        <div #root="rdxCalendarRoot" [class]="c.root" [value]="date" rdxCalendarRoot fixedWeeks>
-            <div [class]="c.header" rdxCalendarHeader>
-                <button [class]="c.nav" type="button" rdxCalendarPrev>
+        <div #root="rdxCalendarRoot" rdxCalendarRoot fixedWeeks [class]="c.root" [value]="date">
+            <div rdxCalendarHeader [class]="c.header">
+                <button type="button" rdxCalendarPrev [class]="c.nav">
                     <svg lucideChevronLeft size="16" />
                 </button>
-                <div #head="rdxCalendarHeading" [class]="c.heading" rdxCalendarHeading>{{ head.headingValue() }}</div>
-                <button [class]="c.nav" type="button" rdxCalendarNext>
+                <div #head="rdxCalendarHeading" rdxCalendarHeading [class]="c.heading">{{ head.headingValue() }}</div>
+                <button type="button" rdxCalendarNext [class]="c.nav">
                     <svg lucideChevronRight size="16" />
                 </button>
             </div>
 
-            <table [class]="c.grid" rdxCalendarGrid>
+            <table rdxCalendarGrid [class]="c.grid">
                 @for (month of root.months(); track $index) {
                     <thead rdxCalendarGridHead>
                         <tr [class]="c.headRow">
                             @for (day of root.weekDays(); track $index) {
-                                <th [class]="c.headCell" rdxCalendarHeadCell>{{ day }}</th>
+                                <th rdxCalendarHeadCell [class]="c.headCell">{{ day }}</th>
                             }
                         </tr>
                     </thead>
-                    <tbody [class]="c.body" rdxCalendarGridBody>
+                    <tbody rdxCalendarGridBody [class]="c.body">
                         @for (weekDates of month.weeks; track $index) {
                             <tr [class]="c.weekRow">
                                 @for (weekDate of weekDates; track $index) {
-                                    <td [class]="c.cell" [date]="weekDate" rdxCalendarCell>
+                                    <td rdxCalendarCell [class]="c.cell" [date]="weekDate">
                                         <div
                                             #cell="rdxCalendarCellTrigger"
+                                            rdxCalendarCellTrigger
                                             [class]="c.day"
                                             [day]="weekDate"
                                             [month]="month.value"
-                                            rdxCalendarCellTrigger
                                         >
                                             {{ cell.dayValue() }}
                                         </div>
@@ -238,21 +238,21 @@ Import all parts and piece them together.
 This example showcases some of the available locales and how the calendar systems are displayed.
 
 ```typescript
-import { ChangeDetectionStrategy, Component, computed, signal } from '@angular/core';
-import { CalendarIdentifier, createCalendar, getLocalTimeZone, toCalendar, today } from '@internationalized/date';
-import { LucideChevronLeft, LucideChevronRight } from '@lucide/angular';
 import { cn, demoCalendar, demoInput } from '../../storybook/styles';
-import { RdxCalendarCellTriggerDirective } from '../src/calendar-cell-trigger.directive';
 import { RdxCalendarCellDirective } from '../src/calendar-cell.directive';
+import { RdxCalendarCellTriggerDirective } from '../src/calendar-cell-trigger.directive';
+import { RdxCalendarGridDirective } from '../src/calendar-grid.directive';
 import { RdxCalendarGridBodyDirective } from '../src/calendar-grid-body.directive';
 import { RdxCalendarGridHeadDirective } from '../src/calendar-grid-head.directive';
-import { RdxCalendarGridDirective } from '../src/calendar-grid.directive';
 import { RdxCalendarHeadCellDirective } from '../src/calendar-head-cell.directive';
 import { RdxCalendarHeaderDirective } from '../src/calendar-header.directive';
 import { RdxCalendarHeadingDirective } from '../src/calendar-heading.directive';
 import { RdxCalendarNextDirective } from '../src/calendar-next.directive';
 import { RdxCalendarPrevDirective } from '../src/calendar-prev.directive';
 import { RdxCalendarRootDirective } from '../src/calendar-root.directive';
+import { ChangeDetectionStrategy, Component, computed, signal } from '@angular/core';
+import { CalendarIdentifier, createCalendar, getLocalTimeZone, toCalendar, today } from '@internationalized/date';
+import { LucideChevronLeft, LucideChevronRight } from '@lucide/angular';
 
 @Component({
     changeDetection: ChangeDetectionStrategy.Eager,
@@ -294,44 +294,44 @@ import { RdxCalendarRootDirective } from '../src/calendar-root.directive';
 
             <div
                 #root="rdxCalendarRoot"
+                rdxCalendarRoot
+                fixedWeeks
                 [class]="c.root"
                 [value]="value()"
                 [locale]="locale()"
-                rdxCalendarRoot
-                fixedWeeks
             >
-                <div [class]="c.header" rdxCalendarHeader>
-                    <button [class]="c.nav" type="button" rdxCalendarPrev>
+                <div rdxCalendarHeader [class]="c.header">
+                    <button type="button" rdxCalendarPrev [class]="c.nav">
                         <svg lucideChevronLeft size="16" />
                     </button>
-                    <div #head="rdxCalendarHeading" [class]="c.heading" rdxCalendarHeading>
+                    <div #head="rdxCalendarHeading" rdxCalendarHeading [class]="c.heading">
                         {{ head.headingValue() }}
                     </div>
-                    <button [class]="c.nav" type="button" rdxCalendarNext>
+                    <button type="button" rdxCalendarNext [class]="c.nav">
                         <svg lucideChevronRight size="16" />
                     </button>
                 </div>
 
-                <table [class]="c.grid" rdxCalendarGrid>
+                <table rdxCalendarGrid [class]="c.grid">
                     @for (month of root.months(); track $index) {
                         <thead rdxCalendarGridHead>
                             <tr [class]="c.headRow">
                                 @for (day of root.weekDays(); track $index) {
-                                    <th [class]="c.headCell" rdxCalendarHeadCell>{{ day }}</th>
+                                    <th rdxCalendarHeadCell [class]="c.headCell">{{ day }}</th>
                                 }
                             </tr>
                         </thead>
-                        <tbody [class]="c.body" rdxCalendarGridBody>
+                        <tbody rdxCalendarGridBody [class]="c.body">
                             @for (weekDates of month.weeks; track $index) {
                                 <tr [class]="c.weekRow">
                                     @for (weekDate of weekDates; track $index) {
-                                        <td [class]="c.cell" [date]="weekDate" rdxCalendarCell>
+                                        <td rdxCalendarCell [class]="c.cell" [date]="weekDate">
                                             <div
                                                 #cell="rdxCalendarCellTrigger"
+                                                rdxCalendarCellTrigger
                                                 [class]="c.day"
                                                 [day]="weekDate"
                                                 [month]="month.value"
-                                                rdxCalendarCellTrigger
                                             >
                                                 {{ cell.dayValue() }}
                                             </div>
@@ -455,21 +455,21 @@ export class CalendarWithLocale {
 Set `multiple` to let the calendar hold an array of selected dates; clicking a selected date deselects it.
 
 ```typescript
-import { ChangeDetectionStrategy, Component, signal } from '@angular/core';
-import { CalendarDate } from '@internationalized/date';
-import { LucideChevronLeft, LucideChevronRight } from '@lucide/angular';
 import { cn, demoCalendar } from '../../storybook/styles';
-import { RdxCalendarCellTriggerDirective } from '../src/calendar-cell-trigger.directive';
 import { RdxCalendarCellDirective } from '../src/calendar-cell.directive';
+import { RdxCalendarCellTriggerDirective } from '../src/calendar-cell-trigger.directive';
+import { RdxCalendarGridDirective } from '../src/calendar-grid.directive';
 import { RdxCalendarGridBodyDirective } from '../src/calendar-grid-body.directive';
 import { RdxCalendarGridHeadDirective } from '../src/calendar-grid-head.directive';
-import { RdxCalendarGridDirective } from '../src/calendar-grid.directive';
 import { RdxCalendarHeadCellDirective } from '../src/calendar-head-cell.directive';
 import { RdxCalendarHeaderDirective } from '../src/calendar-header.directive';
 import { RdxCalendarHeadingDirective } from '../src/calendar-heading.directive';
 import { RdxCalendarNextDirective } from '../src/calendar-next.directive';
 import { RdxCalendarPrevDirective } from '../src/calendar-prev.directive';
 import { RdxCalendarRootDirective } from '../src/calendar-root.directive';
+import { ChangeDetectionStrategy, Component, signal } from '@angular/core';
+import { CalendarDate } from '@internationalized/date';
+import { LucideChevronLeft, LucideChevronRight } from '@lucide/angular';
 
 @Component({
     changeDetection: ChangeDetectionStrategy.Eager,
@@ -490,37 +490,37 @@ import { RdxCalendarRootDirective } from '../src/calendar-root.directive';
         LucideChevronRight
     ],
     template: `
-        <div #root="rdxCalendarRoot" [class]="c.root" [value]="value()" rdxCalendarRoot multiple fixedWeeks>
-            <div [class]="c.header" rdxCalendarHeader>
-                <button [class]="c.nav" type="button" rdxCalendarPrev>
+        <div #root="rdxCalendarRoot" rdxCalendarRoot multiple fixedWeeks [class]="c.root" [value]="value()">
+            <div rdxCalendarHeader [class]="c.header">
+                <button type="button" rdxCalendarPrev [class]="c.nav">
                     <svg lucideChevronLeft size="16" />
                 </button>
-                <div #head="rdxCalendarHeading" [class]="c.heading" rdxCalendarHeading>{{ head.headingValue() }}</div>
-                <button [class]="c.nav" type="button" rdxCalendarNext>
+                <div #head="rdxCalendarHeading" rdxCalendarHeading [class]="c.heading">{{ head.headingValue() }}</div>
+                <button type="button" rdxCalendarNext [class]="c.nav">
                     <svg lucideChevronRight size="16" />
                 </button>
             </div>
 
-            <table [class]="c.grid" rdxCalendarGrid>
+            <table rdxCalendarGrid [class]="c.grid">
                 @for (month of root.months(); track $index) {
                     <thead rdxCalendarGridHead>
                         <tr [class]="c.headRow">
                             @for (day of root.weekDays(); track $index) {
-                                <th [class]="c.headCell" rdxCalendarHeadCell>{{ day }}</th>
+                                <th rdxCalendarHeadCell [class]="c.headCell">{{ day }}</th>
                             }
                         </tr>
                     </thead>
-                    <tbody [class]="c.body" rdxCalendarGridBody>
+                    <tbody rdxCalendarGridBody [class]="c.body">
                         @for (weekDates of month.weeks; track $index) {
                             <tr [class]="c.weekRow">
                                 @for (weekDate of weekDates; track $index) {
-                                    <td [class]="c.cell" [date]="weekDate" rdxCalendarCell>
+                                    <td rdxCalendarCell [class]="c.cell" [date]="weekDate">
                                         <div
                                             #cell="rdxCalendarCellTrigger"
+                                            rdxCalendarCellTrigger
                                             [class]="c.day"
                                             [day]="weekDate"
                                             [month]="month.value"
-                                            rdxCalendarCellTrigger
                                         >
                                             {{ cell.dayValue() }}
                                         </div>
@@ -547,22 +547,22 @@ export class CalendarMultiple {
 Render an extra leading column with the ISO week number via `getWeekNumber`.
 
 ```typescript
-import { ChangeDetectionStrategy, Component } from '@angular/core';
-import { CalendarDate, DateValue } from '@internationalized/date';
-import { LucideChevronLeft, LucideChevronRight } from '@lucide/angular';
-import { getWeekNumber } from '@radix-ng/primitives/core';
 import { cn, demoCalendar } from '../../storybook/styles';
-import { RdxCalendarCellTriggerDirective } from '../src/calendar-cell-trigger.directive';
 import { RdxCalendarCellDirective } from '../src/calendar-cell.directive';
+import { RdxCalendarCellTriggerDirective } from '../src/calendar-cell-trigger.directive';
+import { RdxCalendarGridDirective } from '../src/calendar-grid.directive';
 import { RdxCalendarGridBodyDirective } from '../src/calendar-grid-body.directive';
 import { RdxCalendarGridHeadDirective } from '../src/calendar-grid-head.directive';
-import { RdxCalendarGridDirective } from '../src/calendar-grid.directive';
 import { RdxCalendarHeadCellDirective } from '../src/calendar-head-cell.directive';
 import { RdxCalendarHeaderDirective } from '../src/calendar-header.directive';
 import { RdxCalendarHeadingDirective } from '../src/calendar-heading.directive';
 import { RdxCalendarNextDirective } from '../src/calendar-next.directive';
 import { RdxCalendarPrevDirective } from '../src/calendar-prev.directive';
 import { RdxCalendarRootDirective } from '../src/calendar-root.directive';
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { CalendarDate, DateValue } from '@internationalized/date';
+import { LucideChevronLeft, LucideChevronRight } from '@lucide/angular';
+import { getWeekNumber } from '@radix-ng/primitives/core';
 
 @Component({
     changeDetection: ChangeDetectionStrategy.Eager,
@@ -583,41 +583,41 @@ import { RdxCalendarRootDirective } from '../src/calendar-root.directive';
         LucideChevronRight
     ],
     template: `
-        <div #root="rdxCalendarRoot" [class]="c.root" [value]="date" rdxCalendarRoot fixedWeeks>
-            <div [class]="c.header" rdxCalendarHeader>
-                <button [class]="c.nav" type="button" rdxCalendarPrev>
+        <div #root="rdxCalendarRoot" rdxCalendarRoot fixedWeeks [class]="c.root" [value]="date">
+            <div rdxCalendarHeader [class]="c.header">
+                <button type="button" rdxCalendarPrev [class]="c.nav">
                     <svg lucideChevronLeft size="16" />
                 </button>
-                <div #head="rdxCalendarHeading" [class]="c.heading" rdxCalendarHeading>{{ head.headingValue() }}</div>
-                <button [class]="c.nav" type="button" rdxCalendarNext>
+                <div #head="rdxCalendarHeading" rdxCalendarHeading [class]="c.heading">{{ head.headingValue() }}</div>
+                <button type="button" rdxCalendarNext [class]="c.nav">
                     <svg lucideChevronRight size="16" />
                 </button>
             </div>
 
-            <table [class]="c.grid" rdxCalendarGrid>
+            <table rdxCalendarGrid [class]="c.grid">
                 @for (month of root.months(); track $index) {
                     <thead rdxCalendarGridHead>
                         <tr class="mt-4 grid w-full grid-cols-8">
-                            <th [class]="c.headCell" rdxCalendarHeadCell>Wk</th>
+                            <th rdxCalendarHeadCell [class]="c.headCell">Wk</th>
                             @for (day of root.weekDays(); track $index) {
-                                <th [class]="c.headCell" rdxCalendarHeadCell>{{ day }}</th>
+                                <th rdxCalendarHeadCell [class]="c.headCell">{{ day }}</th>
                             }
                         </tr>
                     </thead>
-                    <tbody [class]="c.body" rdxCalendarGridBody>
+                    <tbody rdxCalendarGridBody [class]="c.body">
                         @for (weekDates of month.weeks; track $index) {
                             <tr class="grid grid-cols-8">
                                 <div class="text-muted-foreground flex items-center justify-center text-xs">
                                     {{ getWeekNumber(weekDates[0]) }}
                                 </div>
                                 @for (weekDate of weekDates; track $index) {
-                                    <td [class]="c.cell" [date]="weekDate" rdxCalendarCell>
+                                    <td rdxCalendarCell [class]="c.cell" [date]="weekDate">
                                         <div
                                             #cell="rdxCalendarCellTrigger"
+                                            rdxCalendarCellTrigger
                                             [class]="c.day"
                                             [day]="weekDate"
                                             [month]="month.value"
-                                            rdxCalendarCellTrigger
                                         >
                                             {{ cell.dayValue() }}
                                         </div>
@@ -646,21 +646,21 @@ Pass an `isDateDisabled` matcher — a `(date) => boolean` callback run for ever
 dates are not focusable or selectable. This example disables weekends.
 
 ```typescript
-import { ChangeDetectionStrategy, Component } from '@angular/core';
-import { CalendarDate, DateValue, isWeekend } from '@internationalized/date';
-import { LucideChevronLeft, LucideChevronRight } from '@lucide/angular';
 import { cn, demoCalendar } from '../../storybook/styles';
-import { RdxCalendarCellTriggerDirective } from '../src/calendar-cell-trigger.directive';
 import { RdxCalendarCellDirective } from '../src/calendar-cell.directive';
+import { RdxCalendarCellTriggerDirective } from '../src/calendar-cell-trigger.directive';
+import { RdxCalendarGridDirective } from '../src/calendar-grid.directive';
 import { RdxCalendarGridBodyDirective } from '../src/calendar-grid-body.directive';
 import { RdxCalendarGridHeadDirective } from '../src/calendar-grid-head.directive';
-import { RdxCalendarGridDirective } from '../src/calendar-grid.directive';
 import { RdxCalendarHeadCellDirective } from '../src/calendar-head-cell.directive';
 import { RdxCalendarHeaderDirective } from '../src/calendar-header.directive';
 import { RdxCalendarHeadingDirective } from '../src/calendar-heading.directive';
 import { RdxCalendarNextDirective } from '../src/calendar-next.directive';
 import { RdxCalendarPrevDirective } from '../src/calendar-prev.directive';
 import { RdxCalendarRootDirective } from '../src/calendar-root.directive';
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { CalendarDate, DateValue, isWeekend } from '@internationalized/date';
+import { LucideChevronLeft, LucideChevronRight } from '@lucide/angular';
 
 @Component({
     changeDetection: ChangeDetectionStrategy.Eager,
@@ -683,42 +683,42 @@ import { RdxCalendarRootDirective } from '../src/calendar-root.directive';
     template: `
         <div
             #root="rdxCalendarRoot"
+            rdxCalendarRoot
+            fixedWeeks
             [class]="c.root"
             [value]="date"
             [isDateDisabled]="isDateDisabled"
-            rdxCalendarRoot
-            fixedWeeks
         >
-            <div [class]="c.header" rdxCalendarHeader>
-                <button [class]="c.nav" type="button" rdxCalendarPrev>
+            <div rdxCalendarHeader [class]="c.header">
+                <button type="button" rdxCalendarPrev [class]="c.nav">
                     <svg lucideChevronLeft size="16" />
                 </button>
-                <div #head="rdxCalendarHeading" [class]="c.heading" rdxCalendarHeading>{{ head.headingValue() }}</div>
-                <button [class]="c.nav" type="button" rdxCalendarNext>
+                <div #head="rdxCalendarHeading" rdxCalendarHeading [class]="c.heading">{{ head.headingValue() }}</div>
+                <button type="button" rdxCalendarNext [class]="c.nav">
                     <svg lucideChevronRight size="16" />
                 </button>
             </div>
 
-            <table [class]="c.grid" rdxCalendarGrid>
+            <table rdxCalendarGrid [class]="c.grid">
                 @for (month of root.months(); track $index) {
                     <thead rdxCalendarGridHead>
                         <tr [class]="c.headRow">
                             @for (day of root.weekDays(); track $index) {
-                                <th [class]="c.headCell" rdxCalendarHeadCell>{{ day }}</th>
+                                <th rdxCalendarHeadCell [class]="c.headCell">{{ day }}</th>
                             }
                         </tr>
                     </thead>
-                    <tbody [class]="c.body" rdxCalendarGridBody>
+                    <tbody rdxCalendarGridBody [class]="c.body">
                         @for (weekDates of month.weeks; track $index) {
                             <tr [class]="c.weekRow">
                                 @for (weekDate of weekDates; track $index) {
-                                    <td [class]="c.cell" [date]="weekDate" rdxCalendarCell>
+                                    <td rdxCalendarCell [class]="c.cell" [date]="weekDate">
                                         <div
                                             #cell="rdxCalendarCellTrigger"
+                                            rdxCalendarCellTrigger
                                             [class]="c.day"
                                             [day]="weekDate"
                                             [month]="month.value"
-                                            rdxCalendarCellTrigger
                                         >
                                             {{ cell.dayValue() }}
                                         </div>
@@ -749,21 +749,21 @@ export class CalendarDisabledDates {
 (e.g. already booked). They render struck-through and ignore pointer interaction.
 
 ```typescript
-import { ChangeDetectionStrategy, Component } from '@angular/core';
-import { CalendarDate, DateValue } from '@internationalized/date';
-import { LucideChevronLeft, LucideChevronRight } from '@lucide/angular';
 import { cn, demoCalendar } from '../../storybook/styles';
-import { RdxCalendarCellTriggerDirective } from '../src/calendar-cell-trigger.directive';
 import { RdxCalendarCellDirective } from '../src/calendar-cell.directive';
+import { RdxCalendarCellTriggerDirective } from '../src/calendar-cell-trigger.directive';
+import { RdxCalendarGridDirective } from '../src/calendar-grid.directive';
 import { RdxCalendarGridBodyDirective } from '../src/calendar-grid-body.directive';
 import { RdxCalendarGridHeadDirective } from '../src/calendar-grid-head.directive';
-import { RdxCalendarGridDirective } from '../src/calendar-grid.directive';
 import { RdxCalendarHeadCellDirective } from '../src/calendar-head-cell.directive';
 import { RdxCalendarHeaderDirective } from '../src/calendar-header.directive';
 import { RdxCalendarHeadingDirective } from '../src/calendar-heading.directive';
 import { RdxCalendarNextDirective } from '../src/calendar-next.directive';
 import { RdxCalendarPrevDirective } from '../src/calendar-prev.directive';
 import { RdxCalendarRootDirective } from '../src/calendar-root.directive';
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { CalendarDate, DateValue } from '@internationalized/date';
+import { LucideChevronLeft, LucideChevronRight } from '@lucide/angular';
 
 @Component({
     changeDetection: ChangeDetectionStrategy.Eager,
@@ -786,42 +786,42 @@ import { RdxCalendarRootDirective } from '../src/calendar-root.directive';
     template: `
         <div
             #root="rdxCalendarRoot"
+            rdxCalendarRoot
+            fixedWeeks
             [class]="c.root"
             [value]="date"
             [isDateUnavailable]="isDateUnavailable"
-            rdxCalendarRoot
-            fixedWeeks
         >
-            <div [class]="c.header" rdxCalendarHeader>
-                <button [class]="c.nav" type="button" rdxCalendarPrev>
+            <div rdxCalendarHeader [class]="c.header">
+                <button type="button" rdxCalendarPrev [class]="c.nav">
                     <svg lucideChevronLeft size="16" />
                 </button>
-                <div #head="rdxCalendarHeading" [class]="c.heading" rdxCalendarHeading>{{ head.headingValue() }}</div>
-                <button [class]="c.nav" type="button" rdxCalendarNext>
+                <div #head="rdxCalendarHeading" rdxCalendarHeading [class]="c.heading">{{ head.headingValue() }}</div>
+                <button type="button" rdxCalendarNext [class]="c.nav">
                     <svg lucideChevronRight size="16" />
                 </button>
             </div>
 
-            <table [class]="c.grid" rdxCalendarGrid>
+            <table rdxCalendarGrid [class]="c.grid">
                 @for (month of root.months(); track $index) {
                     <thead rdxCalendarGridHead>
                         <tr [class]="c.headRow">
                             @for (day of root.weekDays(); track $index) {
-                                <th [class]="c.headCell" rdxCalendarHeadCell>{{ day }}</th>
+                                <th rdxCalendarHeadCell [class]="c.headCell">{{ day }}</th>
                             }
                         </tr>
                     </thead>
-                    <tbody [class]="c.body" rdxCalendarGridBody>
+                    <tbody rdxCalendarGridBody [class]="c.body">
                         @for (weekDates of month.weeks; track $index) {
                             <tr [class]="c.weekRow">
                                 @for (weekDate of weekDates; track $index) {
-                                    <td [class]="c.cell" [date]="weekDate" rdxCalendarCell>
+                                    <td rdxCalendarCell [class]="c.cell" [date]="weekDate">
                                         <div
                                             #cell="rdxCalendarCellTrigger"
+                                            rdxCalendarCellTrigger
                                             [class]="c.day"
                                             [day]="weekDate"
                                             [month]="month.value"
-                                            rdxCalendarCellTrigger
                                         >
                                             {{ cell.dayValue() }}
                                         </div>
@@ -852,21 +852,21 @@ Override how the previous/next buttons move the view with `propsPrevPage` / `pro
 `(placeholder) => DateValue` callback. This example jumps a whole year per click.
 
 ```typescript
-import { ChangeDetectionStrategy, Component } from '@angular/core';
-import { CalendarDate, DateValue } from '@internationalized/date';
-import { LucideChevronLeft, LucideChevronRight } from '@lucide/angular';
 import { cn, demoCalendar } from '../../storybook/styles';
-import { RdxCalendarCellTriggerDirective } from '../src/calendar-cell-trigger.directive';
 import { RdxCalendarCellDirective } from '../src/calendar-cell.directive';
+import { RdxCalendarCellTriggerDirective } from '../src/calendar-cell-trigger.directive';
+import { RdxCalendarGridDirective } from '../src/calendar-grid.directive';
 import { RdxCalendarGridBodyDirective } from '../src/calendar-grid-body.directive';
 import { RdxCalendarGridHeadDirective } from '../src/calendar-grid-head.directive';
-import { RdxCalendarGridDirective } from '../src/calendar-grid.directive';
 import { RdxCalendarHeadCellDirective } from '../src/calendar-head-cell.directive';
 import { RdxCalendarHeaderDirective } from '../src/calendar-header.directive';
 import { RdxCalendarHeadingDirective } from '../src/calendar-heading.directive';
 import { RdxCalendarNextDirective } from '../src/calendar-next.directive';
 import { RdxCalendarPrevDirective } from '../src/calendar-prev.directive';
 import { RdxCalendarRootDirective } from '../src/calendar-root.directive';
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { CalendarDate, DateValue } from '@internationalized/date';
+import { LucideChevronLeft, LucideChevronRight } from '@lucide/angular';
 
 @Component({
     changeDetection: ChangeDetectionStrategy.Eager,
@@ -889,43 +889,43 @@ import { RdxCalendarRootDirective } from '../src/calendar-root.directive';
     template: `
         <div
             #root="rdxCalendarRoot"
+            rdxCalendarRoot
+            fixedWeeks
             [class]="c.root"
             [value]="date"
             [propsNextPage]="nextYear"
             [propsPrevPage]="prevYear"
-            rdxCalendarRoot
-            fixedWeeks
         >
-            <div [class]="c.header" rdxCalendarHeader>
-                <button [class]="c.nav" type="button" rdxCalendarPrev>
+            <div rdxCalendarHeader [class]="c.header">
+                <button type="button" rdxCalendarPrev [class]="c.nav">
                     <svg lucideChevronLeft size="16" />
                 </button>
-                <div #head="rdxCalendarHeading" [class]="c.heading" rdxCalendarHeading>{{ head.headingValue() }}</div>
-                <button [class]="c.nav" type="button" rdxCalendarNext>
+                <div #head="rdxCalendarHeading" rdxCalendarHeading [class]="c.heading">{{ head.headingValue() }}</div>
+                <button type="button" rdxCalendarNext [class]="c.nav">
                     <svg lucideChevronRight size="16" />
                 </button>
             </div>
 
-            <table [class]="c.grid" rdxCalendarGrid>
+            <table rdxCalendarGrid [class]="c.grid">
                 @for (month of root.months(); track $index) {
                     <thead rdxCalendarGridHead>
                         <tr [class]="c.headRow">
                             @for (day of root.weekDays(); track $index) {
-                                <th [class]="c.headCell" rdxCalendarHeadCell>{{ day }}</th>
+                                <th rdxCalendarHeadCell [class]="c.headCell">{{ day }}</th>
                             }
                         </tr>
                     </thead>
-                    <tbody [class]="c.body" rdxCalendarGridBody>
+                    <tbody rdxCalendarGridBody [class]="c.body">
                         @for (weekDates of month.weeks; track $index) {
                             <tr [class]="c.weekRow">
                                 @for (weekDate of weekDates; track $index) {
-                                    <td [class]="c.cell" [date]="weekDate" rdxCalendarCell>
+                                    <td rdxCalendarCell [class]="c.cell" [date]="weekDate">
                                         <div
                                             #cell="rdxCalendarCellTrigger"
+                                            rdxCalendarCellTrigger
                                             [class]="c.day"
                                             [day]="weekDate"
                                             [month]="month.value"
-                                            rdxCalendarCellTrigger
                                         >
                                             {{ cell.dayValue() }}
                                         </div>
@@ -957,21 +957,21 @@ Set `numberOfMonths` to render several months at once. Arrow-key navigation flow
 boundary between months, and (without `pagedNavigation`) the prev/next buttons shift the view by one month.
 
 ```typescript
-import { ChangeDetectionStrategy, Component } from '@angular/core';
-import { CalendarDate, DateValue } from '@internationalized/date';
-import { LucideChevronLeft, LucideChevronRight } from '@lucide/angular';
 import { cn, demoCalendar } from '../../storybook/styles';
-import { RdxCalendarCellTriggerDirective } from '../src/calendar-cell-trigger.directive';
 import { RdxCalendarCellDirective } from '../src/calendar-cell.directive';
+import { RdxCalendarCellTriggerDirective } from '../src/calendar-cell-trigger.directive';
+import { RdxCalendarGridDirective } from '../src/calendar-grid.directive';
 import { RdxCalendarGridBodyDirective } from '../src/calendar-grid-body.directive';
 import { RdxCalendarGridHeadDirective } from '../src/calendar-grid-head.directive';
-import { RdxCalendarGridDirective } from '../src/calendar-grid.directive';
 import { RdxCalendarHeadCellDirective } from '../src/calendar-head-cell.directive';
 import { RdxCalendarHeaderDirective } from '../src/calendar-header.directive';
 import { RdxCalendarHeadingDirective } from '../src/calendar-heading.directive';
 import { RdxCalendarNextDirective } from '../src/calendar-next.directive';
 import { RdxCalendarPrevDirective } from '../src/calendar-prev.directive';
 import { RdxCalendarRootDirective } from '../src/calendar-root.directive';
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { CalendarDate, DateValue } from '@internationalized/date';
+import { LucideChevronLeft, LucideChevronRight } from '@lucide/angular';
 
 @Component({
     changeDetection: ChangeDetectionStrategy.Eager,
@@ -993,19 +993,19 @@ import { RdxCalendarRootDirective } from '../src/calendar-root.directive';
     ],
     template: `
         <div
-            class="border-border bg-background rounded-xl border p-4 shadow-sm"
             #root="rdxCalendarRoot"
-            [value]="date"
-            [numberOfMonths]="2"
+            class="border-border bg-background rounded-xl border p-4 shadow-sm"
             rdxCalendarRoot
             fixedWeeks
+            [value]="date"
+            [numberOfMonths]="2"
         >
-            <div [class]="c.header" rdxCalendarHeader>
-                <button [class]="c.nav" type="button" rdxCalendarPrev>
+            <div rdxCalendarHeader [class]="c.header">
+                <button type="button" rdxCalendarPrev [class]="c.nav">
                     <svg lucideChevronLeft size="16" />
                 </button>
-                <div #head="rdxCalendarHeading" [class]="c.heading" rdxCalendarHeading>{{ head.headingValue() }}</div>
-                <button [class]="c.nav" type="button" rdxCalendarNext>
+                <div #head="rdxCalendarHeading" rdxCalendarHeading [class]="c.heading">{{ head.headingValue() }}</div>
+                <button type="button" rdxCalendarNext [class]="c.nav">
                     <svg lucideChevronRight size="16" />
                 </button>
             </div>
@@ -1016,21 +1016,21 @@ import { RdxCalendarRootDirective } from '../src/calendar-root.directive';
                         <thead rdxCalendarGridHead>
                             <tr [class]="c.headRow">
                                 @for (day of root.weekDays(); track $index) {
-                                    <th [class]="c.headCell" rdxCalendarHeadCell>{{ day }}</th>
+                                    <th rdxCalendarHeadCell [class]="c.headCell">{{ day }}</th>
                                 }
                             </tr>
                         </thead>
-                        <tbody [class]="c.body" rdxCalendarGridBody>
+                        <tbody rdxCalendarGridBody [class]="c.body">
                             @for (weekDates of month.weeks; track $index) {
                                 <tr [class]="c.weekRow">
                                     @for (weekDate of weekDates; track $index) {
-                                        <td [class]="c.cell" [date]="weekDate" rdxCalendarCell>
+                                        <td rdxCalendarCell [class]="c.cell" [date]="weekDate">
                                             <div
                                                 #cell="rdxCalendarCellTrigger"
+                                                rdxCalendarCellTrigger
                                                 [class]="c.day"
                                                 [day]="weekDate"
                                                 [month]="month.value"
-                                                rdxCalendarCellTrigger
                                             >
                                                 {{ cell.dayValue() }}
                                             </div>
diff --git a/skills/radix-ng-examples/references/components/checkbox.md b/skills/radix-ng-examples/references/components/checkbox.md
index 7528956c1..2bae415b0 100644
--- a/skills/radix-ng-examples/references/components/checkbox.md
+++ b/skills/radix-ng-examples/references/components/checkbox.md
@@ -94,15 +94,15 @@ setChecked(change: RdxCheckboxCheckedChangeEvent) {
 The third "mixed" state. Clicking a checkbox in the indeterminate state resolves it to checked.
 
 ```typescript
+import { cn, demoButton, demoCheckbox } from '../../storybook/styles';
+import { RdxCheckboxIndicatorDirective } from '../src/checkbox-indicator';
+import { RdxCheckboxInputDirective } from '../src/checkbox-input';
+import { RdxCheckboxRootDirective } from '../src/checkbox-root';
 import { JsonPipe } from '@angular/common';
 import { ChangeDetectionStrategy, Component, computed, model } from '@angular/core';
 import { LucideDynamicIcon } from '@lucide/angular';
 import { RdxCheckboxButtonDirective } from '@radix-ng/primitives/checkbox';
 import { RdxLabelDirective } from '@radix-ng/primitives/label';
-import { cn, demoButton, demoCheckbox } from '../../storybook/styles';
-import { RdxCheckboxIndicatorDirective } from '../src/checkbox-indicator';
-import { RdxCheckboxInputDirective } from '../src/checkbox-input';
-import { RdxCheckboxRootDirective } from '../src/checkbox-root';
 
 @Component({
     changeDetection: ChangeDetectionStrategy.Eager,
@@ -119,13 +119,13 @@ import { RdxCheckboxRootDirective } from '../src/checkbox-root';
     template: `
         <div class="flex items-center gap-3">
             <div
+                rdxCheckboxRoot
                 [checked]="checked()"
                 [indeterminate]="indeterminate()"
                 (onCheckedChange)="checked.set($event.checked); indeterminate.set(false)"
-                rdxCheckboxRoot
             >
-                <button id="r1" [class]="c.button" rdxCheckboxButton>
-                    <svg [class]="c.indicator" [lucideIcon]="iconName()" rdxCheckboxIndicator size="16" />
+                <button id="r1" rdxCheckboxButton [class]="c.button">
+                    <svg rdxCheckboxIndicator size="16" [class]="c.indicator" [lucideIcon]="iconName()" />
                 </button>
                 <input rdxCheckboxInput />
             </div>
@@ -139,7 +139,7 @@ import { RdxCheckboxRootDirective } from '../src/checkbox-root';
             <p>indeterminate:&nbsp;{{ indeterminate() | json }}</p>
         </section>
 
-        <button [class]="cn(b.base, b.primary, b.size.md, 'mt-3')" (click)="toggleIndeterminate()" type="button">
+        <button type="button" [class]="cn(b.base, b.primary, b.size.md, 'mt-3')" (click)="toggleIndeterminate()">
             Toggle Indeterminate state
         </button>
     `
@@ -167,15 +167,15 @@ The indicator is removed from layout when unchecked. Add `keepMounted` to keep i
 CSS transitions or measurement, matching Base UI's `Checkbox.Indicator keepMounted` prop.
 
 ```typescript
+import { demoCheckbox } from '../../storybook/styles';
+import { RdxCheckboxIndicatorDirective } from '../src/checkbox-indicator';
+import { RdxCheckboxInputDirective } from '../src/checkbox-input';
+import { RdxCheckboxRootDirective } from '../src/checkbox-root';
 import { JsonPipe } from '@angular/common';
 import { ChangeDetectionStrategy, Component, model } from '@angular/core';
 import { LucideCheck as Check, LucideDynamicIcon } from '@lucide/angular';
 import { RdxCheckboxButtonDirective } from '@radix-ng/primitives/checkbox';
 import { RdxLabelDirective } from '@radix-ng/primitives/label';
-import { demoCheckbox } from '../../storybook/styles';
-import { RdxCheckboxIndicatorDirective } from '../src/checkbox-indicator';
-import { RdxCheckboxInputDirective } from '../src/checkbox-input';
-import { RdxCheckboxRootDirective } from '../src/checkbox-root';
 
 @Component({
     changeDetection: ChangeDetectionStrategy.Eager,
@@ -191,9 +191,9 @@ import { RdxCheckboxRootDirective } from '../src/checkbox-root';
     ],
     template: `
         <div class="flex items-center gap-3">
-            <div [checked]="checked()" (onCheckedChange)="checked.set($event.checked)" rdxCheckboxRoot>
-                <button id="r1" [class]="c.button" rdxCheckboxButton>
-                    <svg [class]="c.indicator" [lucideIcon]="Check" keepMounted rdxCheckboxIndicator size="16" />
+            <div rdxCheckboxRoot [checked]="checked()" (onCheckedChange)="checked.set($event.checked)">
+                <button id="r1" rdxCheckboxButton [class]="c.button">
+                    <svg keepMounted rdxCheckboxIndicator size="16" [class]="c.indicator" [lucideIcon]="Check" />
                 </button>
                 <input rdxCheckboxInput />
             </div>
@@ -219,15 +219,15 @@ export class CheckboxKeepMountedExample {
 Two-way bind the root with `[(ngModel)]`.
 
 ```typescript
-import { ChangeDetectionStrategy, Component } from '@angular/core';
-import { FormsModule } from '@angular/forms';
-import { LucideCheck } from '@lucide/angular';
-import { RdxLabelDirective } from '@radix-ng/primitives/label';
 import { demoCheckbox } from '../../storybook/styles';
 import { RdxCheckboxButtonDirective } from '../src/checkbox-button';
 import { RdxCheckboxIndicatorDirective } from '../src/checkbox-indicator';
 import { RdxCheckboxInputDirective } from '../src/checkbox-input';
 import { RdxCheckboxRootDirective } from '../src/checkbox-root';
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { FormsModule } from '@angular/forms';
+import { LucideCheck } from '@lucide/angular';
+import { RdxLabelDirective } from '@radix-ng/primitives/label';
 
 /**
  * Template-driven forms: two-way bind the root with `[(ngModel)]`.
@@ -246,9 +246,9 @@ import { RdxCheckboxRootDirective } from '../src/checkbox-root';
     ],
     template: `
         <div class="flex items-center gap-3">
-            <div [(ngModel)]="subscribed" rdxCheckboxRoot>
-                <button id="sub" [class]="c.button" rdxCheckboxButton>
-                    <svg [class]="c.indicator" rdxCheckboxIndicator size="16" lucideCheck />
+            <div rdxCheckboxRoot [(ngModel)]="subscribed">
+                <button id="sub" rdxCheckboxButton [class]="c.button">
+                    <svg rdxCheckboxIndicator size="16" lucideCheck [class]="c.indicator" />
                 </button>
                 <input rdxCheckboxInput />
             </div>
@@ -272,16 +272,16 @@ export class CheckboxNgModelExample {
 Bind the root with `formControlName`; `disabled` reacts to the control's enable/disable state.
 
 ```typescript
+import { cn, demoButton, demoCheckbox } from '../../storybook/styles';
+import { RdxCheckboxIndicatorDirective } from '../src/checkbox-indicator';
+import { RdxCheckboxInputDirective } from '../src/checkbox-input';
+import { RdxCheckboxRootDirective } from '../src/checkbox-root';
 import { JsonPipe } from '@angular/common';
 import { ChangeDetectionStrategy, Component, inject } from '@angular/core';
 import { FormBuilder, FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { LucideCheck } from '@lucide/angular';
 import { RdxCheckboxButtonDirective } from '@radix-ng/primitives/checkbox';
 import { RdxLabelDirective } from '@radix-ng/primitives/label';
-import { cn, demoButton, demoCheckbox } from '../../storybook/styles';
-import { RdxCheckboxIndicatorDirective } from '../src/checkbox-indicator';
-import { RdxCheckboxInputDirective } from '../src/checkbox-input';
-import { RdxCheckboxRootDirective } from '../src/checkbox-root';
 
 @Component({
     changeDetection: ChangeDetectionStrategy.Eager,
@@ -290,8 +290,8 @@ import { RdxCheckboxRootDirective } from '../src/checkbox-root';
         <section [formGroup]="personality">
             <div class="flex items-center gap-3 pb-3">
                 <div rdxCheckboxRoot formControlName="fun">
-                    <button id="r1" [class]="c.button" rdxCheckboxButton>
-                        <svg [class]="c.indicator" rdxCheckboxIndicator size="16" lucideCheck />
+                    <button id="r1" rdxCheckboxButton [class]="c.button">
+                        <svg rdxCheckboxIndicator size="16" lucideCheck [class]="c.indicator" />
                     </button>
                     <input rdxCheckboxInput />
                 </div>
@@ -300,8 +300,8 @@ import { RdxCheckboxRootDirective } from '../src/checkbox-root';
 
             <div class="flex items-center gap-3 pb-3">
                 <div rdxCheckboxRoot formControlName="serious">
-                    <button id="r2" [class]="c.button" rdxCheckboxButton>
-                        <svg [class]="c.indicator" rdxCheckboxIndicator size="16" lucideCheck />
+                    <button id="r2" rdxCheckboxButton [class]="c.button">
+                        <svg rdxCheckboxIndicator size="16" lucideCheck [class]="c.indicator" />
                     </button>
                     <input rdxCheckboxInput />
                 </div>
@@ -312,8 +312,8 @@ import { RdxCheckboxRootDirective } from '../src/checkbox-root';
 
             <div class="flex items-center gap-3 pb-3">
                 <div rdxCheckboxRoot formControlName="smart" form="smart">
-                    <button id="r3" [class]="c.button" rdxCheckboxButton>
-                        <svg [class]="c.indicator" rdxCheckboxIndicator size="16" lucideCheck />
+                    <button id="r3" rdxCheckboxButton [class]="c.button">
+                        <svg rdxCheckboxIndicator size="16" lucideCheck [class]="c.indicator" />
                     </button>
                     <input rdxCheckboxInput />
                 </div>
@@ -326,7 +326,7 @@ import { RdxCheckboxRootDirective } from '../src/checkbox-root';
             {{ personality.value | json }}
         </section>
 
-        <button [class]="cn(b.base, b.primary, b.size.md)" (click)="toggleDisable()" type="button">
+        <button type="button" [class]="cn(b.base, b.primary, b.size.md)" (click)="toggleDisable()">
             Toggle disabled state
         </button>
     `,
@@ -369,15 +369,15 @@ export class CheckboxReactiveFormsExampleComponent {
 `Validators.requiredTrue` enforces acceptance; the error shows once the field is touched and submit is guarded.
 
 ```typescript
-import { ChangeDetectionStrategy, Component, inject, signal } from '@angular/core';
-import { FormBuilder, ReactiveFormsModule, Validators } from '@angular/forms';
-import { LucideCheck } from '@lucide/angular';
-import { RdxLabelDirective } from '@radix-ng/primitives/label';
 import { cn, demoButton, demoCheckbox } from '../../storybook/styles';
 import { RdxCheckboxButtonDirective } from '../src/checkbox-button';
 import { RdxCheckboxIndicatorDirective } from '../src/checkbox-indicator';
 import { RdxCheckboxInputDirective } from '../src/checkbox-input';
 import { RdxCheckboxRootDirective } from '../src/checkbox-root';
+import { ChangeDetectionStrategy, Component, inject, signal } from '@angular/core';
+import { FormBuilder, ReactiveFormsModule, Validators } from '@angular/forms';
+import { LucideCheck } from '@lucide/angular';
+import { RdxLabelDirective } from '@radix-ng/primitives/label';
 
 /**
  * Reactive forms with validation: `Validators.requiredTrue` forces the box to be
@@ -399,8 +399,8 @@ import { RdxCheckboxRootDirective } from '../src/checkbox-root';
         <form class="flex flex-col gap-3" [formGroup]="form" (ngSubmit)="onSubmit()">
             <div class="flex items-center gap-3">
                 <div rdxCheckboxRoot formControlName="terms">
-                    <button id="terms" [class]="c.button" rdxCheckboxButton>
-                        <svg [class]="c.indicator" rdxCheckboxIndicator size="16" lucideCheck />
+                    <button id="terms" rdxCheckboxButton [class]="c.button">
+                        <svg rdxCheckboxIndicator size="16" lucideCheck [class]="c.indicator" />
                     </button>
                     <input rdxCheckboxInput />
                 </div>
@@ -413,7 +413,7 @@ import { RdxCheckboxRootDirective } from '../src/checkbox-root';
                 <p class="text-destructive text-sm">You must accept the terms to continue.</p>
             }
 
-            <button [class]="cn(b.base, b.primary, b.size.md, 'self-start')" type="submit">Submit</button>
+            <button type="submit" [class]="cn(b.base, b.primary, b.size.md, 'self-start')">Submit</button>
 
             @if (submitted()) {
                 <p class="text-muted-foreground text-sm">Submitted ✓</p>
@@ -464,14 +464,14 @@ A parent checkbox derived from its children — `indeterminate` when only some a
 parent/child logic (and the flat all ↔ none toggle) is wired **by hand** in the component.
 
 ```typescript
-import { ChangeDetectionStrategy, Component, computed, signal } from '@angular/core';
-import { LucideCheck, LucideDynamicIcon } from '@lucide/angular';
-import { RdxLabelDirective } from '@radix-ng/primitives/label';
 import { demoCheckbox } from '../../storybook/styles';
 import { RdxCheckboxButtonDirective } from '../src/checkbox-button';
 import { RdxCheckboxIndicatorDirective } from '../src/checkbox-indicator';
 import { RdxCheckboxInputDirective } from '../src/checkbox-input';
 import { CheckedState, RdxCheckboxRootDirective } from '../src/checkbox-root';
+import { ChangeDetectionStrategy, Component, computed, signal } from '@angular/core';
+import { LucideCheck, LucideDynamicIcon } from '@lucide/angular';
+import { RdxLabelDirective } from '@radix-ng/primitives/label';
 
 interface Item {
     id: string;
@@ -499,17 +499,17 @@ interface Item {
         <div class="flex flex-col gap-3">
             <div class="flex items-center gap-3">
                 <div
+                    rdxCheckboxRoot
                     [checked]="parentState() === true"
                     [indeterminate]="parentState() === 'indeterminate'"
                     (onCheckedChange)="toggleAll($event)"
-                    rdxCheckboxRoot
                 >
-                    <button id="all" [class]="c.button" rdxCheckboxButton>
+                    <button id="all" rdxCheckboxButton [class]="c.button">
                         <svg
-                            [class]="c.indicator"
-                            [lucideIcon]="parentState() === 'indeterminate' ? 'minus' : 'check'"
                             rdxCheckboxIndicator
                             size="16"
+                            [class]="c.indicator"
+                            [lucideIcon]="parentState() === 'indeterminate' ? 'minus' : 'check'"
                         />
                     </button>
                     <input rdxCheckboxInput />
@@ -520,13 +520,13 @@ interface Item {
             <div class="ml-6 flex flex-col gap-3">
                 @for (item of items(); track item.id) {
                     <div class="flex items-center gap-3">
-                        <div [checked]="item.checked" (onCheckedChange)="toggleItem(item.id, $event)" rdxCheckboxRoot>
-                            <button [class]="c.button" [id]="item.id" rdxCheckboxButton>
-                                <svg [class]="c.indicator" rdxCheckboxIndicator size="16" lucideCheck />
+                        <div rdxCheckboxRoot [checked]="item.checked" (onCheckedChange)="toggleItem(item.id, $event)">
+                            <button rdxCheckboxButton [class]="c.button" [id]="item.id">
+                                <svg rdxCheckboxIndicator size="16" lucideCheck [class]="c.indicator" />
                             </button>
                             <input rdxCheckboxInput />
                         </div>
-                        <label class="text-foreground text-sm font-medium" [htmlFor]="item.id" rdxLabel>
+                        <label class="text-foreground text-sm font-medium" rdxLabel [htmlFor]="item.id">
                             {{ item.label }}
                         </label>
                     </div>
@@ -575,14 +575,14 @@ back to the partial), disabled-but-checked children are preserved, and the group
 control, so `[(value)]`, `ngModel`, and reactive forms bind to the `string[]` value.
 
 ```typescript
-import { ChangeDetectionStrategy, Component, signal } from '@angular/core';
-import { LucideCheck, LucideDynamicIcon } from '@lucide/angular';
-import { RdxLabelDirective } from '@radix-ng/primitives/label';
 import { demoCheckbox } from '../../storybook/styles';
 import { RdxCheckboxButtonDirective } from '../src/checkbox-button';
 import { RdxCheckboxGroupDirective } from '../src/checkbox-group';
 import { RdxCheckboxIndicatorDirective } from '../src/checkbox-indicator';
 import { RdxCheckboxRootDirective } from '../src/checkbox-root';
+import { ChangeDetectionStrategy, Component, signal } from '@angular/core';
+import { LucideCheck, LucideDynamicIcon } from '@lucide/angular';
+import { RdxLabelDirective } from '@radix-ng/primitives/label';
 
 /**
  * `rdxCheckboxGroup` holds the array of checked names. Each child participates by its `name`, and
@@ -605,15 +605,15 @@ import { RdxCheckboxRootDirective } from '../src/checkbox-root';
         LucideCheck
     ],
     template: `
-        <div class="flex flex-col gap-3" #group="rdxCheckboxGroup" [(value)]="value" [allValues]="all" rdxCheckboxGroup>
+        <div #group="rdxCheckboxGroup" class="flex flex-col gap-3" rdxCheckboxGroup [allValues]="all" [(value)]="value">
             <div class="flex items-center gap-3">
                 <div parent rdxCheckboxRoot>
-                    <button id="all" [class]="c.button" rdxCheckboxButton>
+                    <button id="all" rdxCheckboxButton [class]="c.button">
                         <svg
-                            [class]="c.indicator"
-                            [lucideIcon]="group.parentState() === 'indeterminate' ? 'minus' : 'check'"
                             rdxCheckboxIndicator
                             size="16"
+                            [class]="c.indicator"
+                            [lucideIcon]="group.parentState() === 'indeterminate' ? 'minus' : 'check'"
                         />
                     </button>
                 </div>
@@ -623,12 +623,12 @@ import { RdxCheckboxRootDirective } from '../src/checkbox-root';
             <div class="ml-6 flex flex-col gap-3">
                 @for (item of items; track item.name) {
                     <div class="flex items-center gap-3">
-                        <div [name]="item.name" rdxCheckboxRoot>
-                            <button [class]="c.button" [id]="item.name" rdxCheckboxButton>
-                                <svg [class]="c.indicator" rdxCheckboxIndicator size="16" lucideCheck />
+                        <div rdxCheckboxRoot [name]="item.name">
+                            <button rdxCheckboxButton [class]="c.button" [id]="item.name">
+                                <svg rdxCheckboxIndicator size="16" lucideCheck [class]="c.indicator" />
                             </button>
                         </div>
-                        <label class="text-foreground text-sm font-medium" [htmlFor]="item.name" rdxLabel>
+                        <label class="text-foreground text-sm font-medium" rdxLabel [htmlFor]="item.name">
                             {{ item.label }}
                         </label>
                     </div>
diff --git a/skills/radix-ng-examples/references/components/combobox.md b/skills/radix-ng-examples/references/components/combobox.md
index e81ac8200..f79f8e586 100644
--- a/skills/radix-ng-examples/references/components/combobox.md
+++ b/skills/radix-ng-examples/references/components/combobox.md
@@ -9,37 +9,37 @@ selection when closed. For free-form entry whose value is the typed text, reach
 [Autocomplete](?path=/docs/primitives-autocomplete--docs).
 
 ```typescript
-import { ChangeDetectionStrategy, Component, signal } from '@angular/core';
-import { LucideCheck, LucideChevronDown } from '@lucide/angular';
 import { demoCombobox } from '../../storybook/styles';
 import { _importsCombobox } from '../index';
+import { ChangeDetectionStrategy, Component, signal } from '@angular/core';
+import { LucideCheck, LucideChevronDown } from '@lucide/angular';
 
 @Component({
     changeDetection: ChangeDetectionStrategy.Eager,
     selector: 'combobox-default',
     imports: [_importsCombobox, LucideChevronDown, LucideCheck],
     template: `
-        <div [(value)]="value" rdxComboboxRoot>
+        <div rdxComboboxRoot [(value)]="value">
             <div [class]="c.control">
-                <input [class]="c.input" rdxComboboxInput placeholder="Search a fruit…" aria-label="Fruit" />
-                <button [class]="c.trigger" rdxComboboxTrigger aria-label="Open">
+                <input rdxComboboxInput placeholder="Search a fruit…" aria-label="Fruit" [class]="c.input" />
+                <button rdxComboboxTrigger aria-label="Open" [class]="c.trigger">
                     <svg lucideChevronDown size="16"></svg>
                 </button>
             </div>
 
-            <div *rdxComboboxPortal [class]="c.positioner" rdxComboboxPositioner>
-                <div [class]="c.popup" rdxComboboxPopup>
-                    <div [class]="c.list" rdxComboboxList aria-label="Fruits">
+            <div *rdxComboboxPortal rdxComboboxPositioner [class]="c.positioner">
+                <div rdxComboboxPopup [class]="c.popup">
+                    <div rdxComboboxList aria-label="Fruits" [class]="c.list">
                         @for (fruit of fruits; track fruit) {
-                            <div [class]="c.item" [value]="fruit" rdxComboboxItem>
-                                <span [class]="c.itemIndicator" rdxComboboxItemIndicator>
+                            <div rdxComboboxItem [class]="c.item" [value]="fruit">
+                                <span rdxComboboxItemIndicator [class]="c.itemIndicator">
                                     <svg lucideCheck size="14"></svg>
                                 </span>
                                 {{ fruit }}
                             </div>
                         }
                     </div>
-                    <div [class]="c.empty" rdxComboboxEmpty>No fruit found.</div>
+                    <div rdxComboboxEmpty [class]="c.empty">No fruit found.</div>
                 </div>
             </div>
         </div>
@@ -152,37 +152,37 @@ the wrapping element so the popup aligns to the whole control instead of the inl
 Single selection with built-in substring filtering. Type to filter, ArrowDown / Enter to pick.
 
 ```typescript
-import { ChangeDetectionStrategy, Component, signal } from '@angular/core';
-import { LucideCheck, LucideChevronDown } from '@lucide/angular';
 import { demoCombobox } from '../../storybook/styles';
 import { _importsCombobox } from '../index';
+import { ChangeDetectionStrategy, Component, signal } from '@angular/core';
+import { LucideCheck, LucideChevronDown } from '@lucide/angular';
 
 @Component({
     changeDetection: ChangeDetectionStrategy.Eager,
     selector: 'combobox-default',
     imports: [_importsCombobox, LucideChevronDown, LucideCheck],
     template: `
-        <div [(value)]="value" rdxComboboxRoot>
+        <div rdxComboboxRoot [(value)]="value">
             <div [class]="c.control">
-                <input [class]="c.input" rdxComboboxInput placeholder="Search a fruit…" aria-label="Fruit" />
-                <button [class]="c.trigger" rdxComboboxTrigger aria-label="Open">
+                <input rdxComboboxInput placeholder="Search a fruit…" aria-label="Fruit" [class]="c.input" />
+                <button rdxComboboxTrigger aria-label="Open" [class]="c.trigger">
                     <svg lucideChevronDown size="16"></svg>
                 </button>
             </div>
 
-            <div *rdxComboboxPortal [class]="c.positioner" rdxComboboxPositioner>
-                <div [class]="c.popup" rdxComboboxPopup>
-                    <div [class]="c.list" rdxComboboxList aria-label="Fruits">
+            <div *rdxComboboxPortal rdxComboboxPositioner [class]="c.positioner">
+                <div rdxComboboxPopup [class]="c.popup">
+                    <div rdxComboboxList aria-label="Fruits" [class]="c.list">
                         @for (fruit of fruits; track fruit) {
-                            <div [class]="c.item" [value]="fruit" rdxComboboxItem>
-                                <span [class]="c.itemIndicator" rdxComboboxItemIndicator>
+                            <div rdxComboboxItem [class]="c.item" [value]="fruit">
+                                <span rdxComboboxItemIndicator [class]="c.itemIndicator">
                                     <svg lucideCheck size="14"></svg>
                                 </span>
                                 {{ fruit }}
                             </div>
                         }
                     </div>
-                    <div [class]="c.empty" rdxComboboxEmpty>No fruit found.</div>
+                    <div rdxComboboxEmpty [class]="c.empty">No fruit found.</div>
                 </div>
             </div>
         </div>
@@ -200,30 +200,30 @@ export class ComboboxDefault {
 The whole control is disabled and won't open.
 
 ```typescript
-import { ChangeDetectionStrategy, Component, signal } from '@angular/core';
-import { LucideCheck, LucideChevronDown } from '@lucide/angular';
 import { demoCombobox } from '../../storybook/styles';
 import { _importsCombobox } from '../index';
+import { ChangeDetectionStrategy, Component, signal } from '@angular/core';
+import { LucideCheck, LucideChevronDown } from '@lucide/angular';
 
 @Component({
     changeDetection: ChangeDetectionStrategy.Eager,
     selector: 'combobox-disabled',
     imports: [_importsCombobox, LucideChevronDown, LucideCheck],
     template: `
-        <div [(value)]="value" disabled rdxComboboxRoot>
+        <div disabled rdxComboboxRoot [(value)]="value">
             <div [class]="c.control">
-                <input [class]="c.input" rdxComboboxInput placeholder="Search a fruit…" aria-label="Fruit" />
-                <button [class]="c.trigger" rdxComboboxTrigger aria-label="Open">
+                <input rdxComboboxInput placeholder="Search a fruit…" aria-label="Fruit" [class]="c.input" />
+                <button rdxComboboxTrigger aria-label="Open" [class]="c.trigger">
                     <svg lucideChevronDown size="16"></svg>
                 </button>
             </div>
 
-            <div *rdxComboboxPortal [class]="c.positioner" rdxComboboxPositioner>
-                <div [class]="c.popup" rdxComboboxPopup>
-                    <div [class]="c.list" rdxComboboxList aria-label="Fruits">
+            <div *rdxComboboxPortal rdxComboboxPositioner [class]="c.positioner">
+                <div rdxComboboxPopup [class]="c.popup">
+                    <div rdxComboboxList aria-label="Fruits" [class]="c.list">
                         @for (fruit of fruits; track fruit) {
-                            <div [class]="c.item" [value]="fruit" rdxComboboxItem>
-                                <span [class]="c.itemIndicator" rdxComboboxItemIndicator>
+                            <div rdxComboboxItem [class]="c.item" [value]="fruit">
+                                <span rdxComboboxItemIndicator [class]="c.itemIndicator">
                                     <svg lucideCheck size="14"></svg>
                                 </span>
                                 {{ fruit }}
@@ -248,10 +248,10 @@ Options organized into sections with `RdxComboboxGroup` / `RdxComboboxGroupLabel
 heading automatically once all of its items are filtered out.
 
 ```typescript
-import { ChangeDetectionStrategy, Component, signal } from '@angular/core';
-import { LucideCheck, LucideChevronDown } from '@lucide/angular';
 import { demoCombobox } from '../../storybook/styles';
 import { _importsCombobox } from '../index';
+import { ChangeDetectionStrategy, Component, signal } from '@angular/core';
+import { LucideCheck, LucideChevronDown } from '@lucide/angular';
 
 /** Options organized into sections with `RdxComboboxGroup` / `RdxComboboxGroupLabel`. A group hides
  * its heading automatically when all of its items are filtered out. */
@@ -260,22 +260,22 @@ import { _importsCombobox } from '../index';
     selector: 'combobox-grouped',
     imports: [_importsCombobox, LucideChevronDown, LucideCheck],
     template: `
-        <div [(value)]="value" rdxComboboxRoot>
+        <div rdxComboboxRoot [(value)]="value">
             <div [class]="c.control">
-                <input [class]="c.input" rdxComboboxInput placeholder="Search produce…" aria-label="Produce" />
-                <button [class]="c.trigger" rdxComboboxTrigger aria-label="Open">
+                <input rdxComboboxInput placeholder="Search produce…" aria-label="Produce" [class]="c.input" />
+                <button rdxComboboxTrigger aria-label="Open" [class]="c.trigger">
                     <svg lucideChevronDown size="16"></svg>
                 </button>
             </div>
 
-            <div *rdxComboboxPortal [class]="c.positioner" rdxComboboxPositioner>
-                <div [class]="c.popup" rdxComboboxPopup>
-                    <div [class]="c.list" rdxComboboxList aria-label="Produce">
+            <div *rdxComboboxPortal rdxComboboxPositioner [class]="c.positioner">
+                <div rdxComboboxPopup [class]="c.popup">
+                    <div rdxComboboxList aria-label="Produce" [class]="c.list">
                         <div rdxComboboxGroup>
-                            <div [class]="c.groupLabel" rdxComboboxGroupLabel>Fruits</div>
+                            <div rdxComboboxGroupLabel [class]="c.groupLabel">Fruits</div>
                             @for (fruit of fruits; track fruit) {
-                                <div [class]="c.item" [value]="fruit" rdxComboboxItem>
-                                    <span [class]="c.itemIndicator" rdxComboboxItemIndicator>
+                                <div rdxComboboxItem [class]="c.item" [value]="fruit">
+                                    <span rdxComboboxItemIndicator [class]="c.itemIndicator">
                                         <svg lucideCheck size="14"></svg>
                                     </span>
                                     {{ fruit }}
@@ -283,10 +283,10 @@ import { _importsCombobox } from '../index';
                             }
                         </div>
                         <div rdxComboboxGroup>
-                            <div [class]="c.groupLabel" rdxComboboxGroupLabel>Vegetables</div>
+                            <div rdxComboboxGroupLabel [class]="c.groupLabel">Vegetables</div>
                             @for (vegetable of vegetables; track vegetable) {
-                                <div [class]="c.item" [value]="vegetable" rdxComboboxItem>
-                                    <span [class]="c.itemIndicator" rdxComboboxItemIndicator>
+                                <div rdxComboboxItem [class]="c.item" [value]="vegetable">
+                                    <span rdxComboboxItemIndicator [class]="c.itemIndicator">
                                         <svg lucideCheck size="14"></svg>
                                     </span>
                                     {{ vegetable }}
@@ -294,7 +294,7 @@ import { _importsCombobox } from '../index';
                             }
                         </div>
                     </div>
-                    <div [class]="c.empty" rdxComboboxEmpty>No produce found.</div>
+                    <div rdxComboboxEmpty [class]="c.empty">No produce found.</div>
                 </div>
             </div>
         </div>
@@ -314,10 +314,10 @@ A 2D grid (`grid`): wrap items in `RdxComboboxRow` and the list becomes `role="g
 `ArrowDown` move between rows keeping the column; `ArrowLeft` / `ArrowRight` move within a row.
 
 ```typescript
-import { ChangeDetectionStrategy, Component, signal } from '@angular/core';
-import { LucideChevronDown } from '@lucide/angular';
 import { cn, demoCombobox } from '../../storybook/styles';
 import { _importsCombobox } from '../index';
+import { ChangeDetectionStrategy, Component, signal } from '@angular/core';
+import { LucideChevronDown } from '@lucide/angular';
 
 /**
  * A 2D grid list (`grid`): `ArrowUp`/`ArrowDown` move between rows keeping the column, `ArrowLeft`/
@@ -329,26 +329,26 @@ import { _importsCombobox } from '../index';
     selector: 'combobox-grid',
     imports: [_importsCombobox, LucideChevronDown],
     template: `
-        <div [(value)]="value" grid rdxComboboxRoot>
+        <div grid rdxComboboxRoot [(value)]="value">
             <div [class]="c.control">
-                <input [class]="c.input" rdxComboboxInput placeholder="Pick a size…" aria-label="Size" />
-                <button [class]="c.trigger" rdxComboboxTrigger aria-label="Open">
+                <input rdxComboboxInput placeholder="Pick a size…" aria-label="Size" [class]="c.input" />
+                <button rdxComboboxTrigger aria-label="Open" [class]="c.trigger">
                     <svg lucideChevronDown size="16"></svg>
                 </button>
             </div>
 
-            <div *rdxComboboxPortal [class]="c.positioner" rdxComboboxPositioner>
-                <div [class]="c.popup" rdxComboboxPopup>
-                    <div [class]="list" rdxComboboxList aria-label="Sizes">
+            <div *rdxComboboxPortal rdxComboboxPositioner [class]="c.positioner">
+                <div rdxComboboxPopup [class]="c.popup">
+                    <div rdxComboboxList aria-label="Sizes" [class]="list">
                         @for (row of rows; track $index) {
-                            <div [class]="rowClass" rdxComboboxRow>
+                            <div rdxComboboxRow [class]="rowClass">
                                 @for (size of row; track size) {
-                                    <div [class]="cell" [value]="size" rdxComboboxItem>{{ size }}</div>
+                                    <div rdxComboboxItem [class]="cell" [value]="size">{{ size }}</div>
                                 }
                             </div>
                         }
                     </div>
-                    <div [class]="c.empty" rdxComboboxEmpty>No size found.</div>
+                    <div rdxComboboxEmpty [class]="c.empty">No size found.</div>
                 </div>
             </div>
         </div>
@@ -378,24 +378,24 @@ Multiple selection: picks become chips before the input, the popup stays open be
 and Backspace in an empty input removes the last chip.
 
 ```typescript
-import { ChangeDetectionStrategy, Component, signal } from '@angular/core';
-import { LucideCheck, LucideChevronDown, LucideX } from '@lucide/angular';
 import { cn, demoCombobox } from '../../storybook/styles';
 import { _importsCombobox } from '../index';
+import { ChangeDetectionStrategy, Component, signal } from '@angular/core';
+import { LucideCheck, LucideChevronDown, LucideX } from '@lucide/angular';
 
 @Component({
     changeDetection: ChangeDetectionStrategy.Eager,
     selector: 'combobox-multiple',
     imports: [_importsCombobox, LucideChevronDown, LucideCheck, LucideX],
     template: `
-        <div [(value)]="value" multiple rdxComboboxRoot>
-            <div [class]="control" rdxComboboxAnchor>
+        <div multiple rdxComboboxRoot [(value)]="value">
+            <div rdxComboboxAnchor [class]="control">
                 @if (value().length) {
-                    <div [class]="c.chips" rdxComboboxChips>
+                    <div rdxComboboxChips [class]="c.chips">
                         @for (fruit of value(); track fruit) {
-                            <span [class]="c.chip" [value]="fruit" rdxComboboxChip>
+                            <span rdxComboboxChip [class]="c.chip" [value]="fruit">
                                 {{ fruit }}
-                                <button [class]="c.chipRemove" rdxComboboxChipRemove aria-label="Remove">
+                                <button rdxComboboxChipRemove aria-label="Remove" [class]="c.chipRemove">
                                     <svg lucideX size="12"></svg>
                                 </button>
                             </span>
@@ -403,29 +403,29 @@ import { _importsCombobox } from '../index';
                     </div>
                 }
                 <input
-                    [class]="c.inputInline"
-                    [placeholder]="value().length ? '' : 'Add fruits…'"
                     rdxComboboxInput
                     aria-label="Fruits"
+                    [class]="c.inputInline"
+                    [placeholder]="value().length ? '' : 'Add fruits…'"
                 />
-                <button [class]="c.trigger" rdxComboboxTrigger aria-label="Open">
+                <button rdxComboboxTrigger aria-label="Open" [class]="c.trigger">
                     <svg lucideChevronDown size="16"></svg>
                 </button>
             </div>
 
-            <div *rdxComboboxPortal [class]="c.positioner" rdxComboboxPositioner>
-                <div [class]="c.popup" rdxComboboxPopup>
-                    <div [class]="c.list" rdxComboboxList aria-label="Fruits">
+            <div *rdxComboboxPortal rdxComboboxPositioner [class]="c.positioner">
+                <div rdxComboboxPopup [class]="c.popup">
+                    <div rdxComboboxList aria-label="Fruits" [class]="c.list">
                         @for (fruit of fruits; track fruit) {
-                            <div [class]="c.item" [value]="fruit" rdxComboboxItem>
-                                <span [class]="c.itemIndicator" rdxComboboxItemIndicator>
+                            <div rdxComboboxItem [class]="c.item" [value]="fruit">
+                                <span rdxComboboxItemIndicator [class]="c.itemIndicator">
                                     <svg lucideCheck size="14"></svg>
                                 </span>
                                 {{ fruit }}
                             </div>
                         }
                     </div>
-                    <div [class]="c.empty" rdxComboboxEmpty>No fruit found.</div>
+                    <div rdxComboboxEmpty [class]="c.empty">No fruit found.</div>
                 </div>
             </div>
         </div>
@@ -446,10 +446,10 @@ Nothing loads until the user types — `RdxComboboxStatus` shows the "start typi
 loading / counts, while the just-selected item is kept available so it survives new result streams.
 
 ```typescript
-import { ChangeDetectionStrategy, Component, computed, signal } from '@angular/core';
-import { LucideCheck, LucideChevronDown, LucideX } from '@lucide/angular';
 import { cn, demoCombobox } from '../../storybook/styles';
 import { _importsCombobox } from '../index';
+import { ChangeDetectionStrategy, Component, computed, signal } from '@angular/core';
+import { LucideCheck, LucideChevronDown, LucideX } from '@lucide/angular';
 
 interface DirectoryUser {
     id: string;
@@ -471,33 +471,33 @@ interface DirectoryUser {
     imports: [_importsCombobox, LucideChevronDown, LucideCheck, LucideX],
     template: `
         <div
-            [(value)]="value"
+            isItemEqualToValue="id"
+            rdxComboboxRoot
             [items]="items()"
             [itemToStringLabel]="labelOf"
             [filter]="null"
+            [(value)]="value"
             (onValueChange)="onValueChange()"
             (onInputValueChange)="search($event.value)"
             (onOpenChangeComplete)="onOpenChangeComplete($event)"
-            isItemEqualToValue="id"
-            rdxComboboxRoot
         >
             <div class="flex flex-col gap-1">
                 <label class="text-foreground text-sm font-medium" for="async-reviewer">Assign reviewer</label>
                 <div [class]="c.control">
-                    <input id="async-reviewer" [class]="input" rdxComboboxInput placeholder="e.g. Michael" />
+                    <input id="async-reviewer" rdxComboboxInput placeholder="e.g. Michael" [class]="input" />
                     @if (value()) {
-                        <button [class]="c.clear" rdxComboboxClear aria-label="Clear selection">
+                        <button rdxComboboxClear aria-label="Clear selection" [class]="c.clear">
                             <svg lucideX size="14"></svg>
                         </button>
                     }
-                    <button [class]="c.trigger" rdxComboboxTrigger aria-label="Open">
+                    <button rdxComboboxTrigger aria-label="Open" [class]="c.trigger">
                         <svg lucideChevronDown size="16"></svg>
                     </button>
                 </div>
             </div>
 
-            <div *rdxComboboxPortal [class]="c.positioner" rdxComboboxPositioner>
-                <div [class]="c.popup" [attr.aria-busy]="loading() ? 'true' : null" rdxComboboxPopup>
+            <div *rdxComboboxPortal rdxComboboxPositioner [class]="c.positioner">
+                <div rdxComboboxPopup [class]="c.popup" [attr.aria-busy]="loading() ? 'true' : null">
                     <div rdxComboboxStatus>
                         @if (loading()) {
                             <div class="text-muted-foreground flex items-center gap-2 px-2 py-1.5 text-sm">
@@ -513,12 +513,12 @@ interface DirectoryUser {
                     </div>
 
                     @if (emptyMessage(); as message) {
-                        <div [class]="c.empty" rdxComboboxEmpty>{{ message }}</div>
+                        <div rdxComboboxEmpty [class]="c.empty">{{ message }}</div>
                     }
 
-                    <div [class]="c.list" rdxComboboxList aria-label="People">
+                    <div rdxComboboxList aria-label="People" [class]="c.list">
                         @for (user of items(); track user.id) {
-                            <div [class]="item" [value]="user" [textValue]="user.name" rdxComboboxItem>
+                            <div rdxComboboxItem [class]="item" [value]="user" [textValue]="user.name">
                                 <span
                                     class="col-start-1 mt-0.5 flex size-3.5 items-center justify-center"
                                     rdxComboboxItemIndicator
@@ -757,10 +757,10 @@ External filtering combined with `multiple` — nothing loads until the user typ
 chips, and already-selected people stay available as new results stream in.
 
 ```typescript
-import { ChangeDetectionStrategy, Component, computed, signal } from '@angular/core';
-import { LucideCheck, LucideX } from '@lucide/angular';
 import { cn, demoCombobox } from '../../storybook/styles';
 import { _importsCombobox } from '../index';
+import { ChangeDetectionStrategy, Component, computed, signal } from '@angular/core';
+import { LucideCheck, LucideX } from '@lucide/angular';
 
 interface DirectoryUser {
     id: string;
@@ -782,25 +782,25 @@ interface DirectoryUser {
     imports: [_importsCombobox, LucideCheck, LucideX],
     template: `
         <div
-            [(value)]="value"
+            multiple
+            rdxComboboxRoot
             [items]="items()"
             [itemToStringLabel]="labelOf"
             [filter]="null"
+            [(value)]="value"
             (onValueChange)="onValueChange($event.value)"
             (onInputValueChange)="search($event.value)"
             (onOpenChangeComplete)="onOpenChangeComplete($event)"
-            multiple
-            rdxComboboxRoot
         >
             <div class="flex flex-col gap-1">
                 <label class="text-foreground text-sm font-medium" for="async-reviewers">Assign reviewers</label>
-                <div [class]="control" rdxComboboxAnchor>
+                <div rdxComboboxAnchor [class]="control">
                     @if (value().length) {
-                        <div [class]="c.chips" rdxComboboxChips>
+                        <div rdxComboboxChips [class]="c.chips">
                             @for (user of value(); track user.id) {
-                                <span [class]="c.chip" [value]="user" rdxComboboxChip>
+                                <span rdxComboboxChip [class]="c.chip" [value]="user">
                                     {{ user.name }}
-                                    <button [class]="c.chipRemove" rdxComboboxChipRemove aria-label="Remove">
+                                    <button rdxComboboxChipRemove aria-label="Remove" [class]="c.chipRemove">
                                         <svg lucideX size="12"></svg>
                                     </button>
                                 </span>
@@ -809,15 +809,15 @@ interface DirectoryUser {
                     }
                     <input
                         id="async-reviewers"
+                        rdxComboboxInput
                         [class]="c.inputInline"
                         [placeholder]="value().length ? '' : 'e.g. Michael'"
-                        rdxComboboxInput
                     />
                 </div>
             </div>
 
-            <div *rdxComboboxPortal [class]="c.positioner" rdxComboboxPositioner>
-                <div [class]="c.popup" [attr.aria-busy]="loading() ? 'true' : null" rdxComboboxPopup>
+            <div *rdxComboboxPortal rdxComboboxPositioner [class]="c.positioner">
+                <div rdxComboboxPopup [class]="c.popup" [attr.aria-busy]="loading() ? 'true' : null">
                     <div rdxComboboxStatus>
                         @if (loading()) {
                             <div class="text-muted-foreground flex items-center gap-2 px-2 py-1.5 text-sm">
@@ -833,12 +833,12 @@ interface DirectoryUser {
                     </div>
 
                     @if (emptyMessage(); as message) {
-                        <div [class]="c.empty" rdxComboboxEmpty>{{ message }}</div>
+                        <div rdxComboboxEmpty [class]="c.empty">{{ message }}</div>
                     }
 
-                    <div [class]="c.list" rdxComboboxList aria-label="People">
+                    <div rdxComboboxList aria-label="People" [class]="c.list">
                         @for (user of items(); track user.id) {
-                            <div [class]="item" [value]="user" [textValue]="user.name" rdxComboboxItem>
+                            <div rdxComboboxItem [class]="item" [value]="user" [textValue]="user.name">
                                 <span
                                     class="col-start-1 mt-0.5 flex size-3.5 items-center justify-center"
                                     rdxComboboxItemIndicator
@@ -1091,11 +1091,11 @@ appears; choosing it opens a modal dialog (prefilled with the query) to confirm
 is then added and selected — mirroring the Base UI pattern.
 
 ```typescript
+import { cn, demoButton, demoCombobox, demoDialog } from '../../storybook/styles';
+import { _importsCombobox } from '../index';
 import { ChangeDetectionStrategy, Component, computed, signal } from '@angular/core';
 import { LucideCheck, LucideChevronDown, LucidePlus, LucideX } from '@lucide/angular';
 import { dialogImports } from '@radix-ng/primitives/dialog';
-import { cn, demoButton, demoCombobox, demoDialog } from '../../storybook/styles';
-import { _importsCombobox } from '../index';
 
 /** Sentinel value for the "create" row, intercepted in `onValueChange`. */
 const CREATE = '__rdx_create__';
@@ -1111,20 +1111,20 @@ const CREATE = '__rdx_create__';
     imports: [_importsCombobox, ...dialogImports, LucideChevronDown, LucideCheck, LucidePlus, LucideX],
     template: `
         <div
+            multiple
+            rdxComboboxRoot
             [(value)]="value"
             [(open)]="open"
             (onInputValueChange)="query.set($event.value)"
             (onValueChange)="onValueChange($event.value)"
-            multiple
-            rdxComboboxRoot
         >
-            <div [class]="control" rdxComboboxAnchor>
+            <div rdxComboboxAnchor [class]="control">
                 @if (value().length) {
-                    <div [class]="c.chips" rdxComboboxChips>
+                    <div rdxComboboxChips [class]="c.chips">
                         @for (label of value(); track label) {
-                            <span [class]="c.chip" [value]="label" rdxComboboxChip>
+                            <span rdxComboboxChip [class]="c.chip" [value]="label">
                                 {{ label }}
-                                <button [class]="c.chipRemove" rdxComboboxChipRemove aria-label="Remove">
+                                <button rdxComboboxChipRemove aria-label="Remove" [class]="c.chipRemove">
                                     <svg lucideX size="12"></svg>
                                 </button>
                             </span>
@@ -1132,29 +1132,29 @@ const CREATE = '__rdx_create__';
                     </div>
                 }
                 <input
-                    [class]="c.inputInline"
-                    [placeholder]="value().length ? '' : 'e.g. bug'"
                     rdxComboboxInput
                     aria-label="Labels"
+                    [class]="c.inputInline"
+                    [placeholder]="value().length ? '' : 'e.g. bug'"
                 />
-                <button [class]="c.trigger" rdxComboboxTrigger aria-label="Open">
+                <button rdxComboboxTrigger aria-label="Open" [class]="c.trigger">
                     <svg lucideChevronDown size="16"></svg>
                 </button>
             </div>
 
-            <div *rdxComboboxPortal [class]="c.positioner" rdxComboboxPositioner>
-                <div [class]="c.popup" rdxComboboxPopup>
-                    <div [class]="c.list" rdxComboboxList aria-label="Labels">
+            <div *rdxComboboxPortal rdxComboboxPositioner [class]="c.positioner">
+                <div rdxComboboxPopup [class]="c.popup">
+                    <div rdxComboboxList aria-label="Labels" [class]="c.list">
                         @for (label of options(); track label) {
-                            <div [class]="c.item" [value]="label" rdxComboboxItem>
-                                <span [class]="c.itemIndicator" rdxComboboxItemIndicator>
+                            <div rdxComboboxItem [class]="c.item" [value]="label">
+                                <span rdxComboboxItemIndicator [class]="c.itemIndicator">
                                     <svg lucideCheck size="14"></svg>
                                 </span>
                                 {{ label }}
                             </div>
                         }
                         @if (showCreate()) {
-                            <div [class]="c.item" [value]="CREATE" [textValue]="query()" rdxComboboxItem>
+                            <div rdxComboboxItem [class]="c.item" [value]="CREATE" [textValue]="query()">
                                 <span [class]="c.itemIndicator">
                                     <svg lucidePlus size="14"></svg>
                                 </span>
@@ -1162,30 +1162,30 @@ const CREATE = '__rdx_create__';
                             </div>
                         }
                     </div>
-                    <div [class]="c.empty" rdxComboboxEmpty>No labels found.</div>
+                    <div rdxComboboxEmpty [class]="c.empty">No labels found.</div>
                 </div>
             </div>
         </div>
 
-        <div [(open)]="dialogOpen" rdxDialogRoot>
+        <div rdxDialogRoot [(open)]="dialogOpen">
             <ng-template rdxDialogPortal>
-                <div [class]="cn(d.backdrop, d.backdropAnimated)" rdxDialogBackdrop></div>
-                <div [class]="cn(d.popup, d.popupAnimated)" rdxDialogPopup>
-                    <h2 [class]="d.title" rdxDialogTitle>Create new label</h2>
-                    <p [class]="d.description" rdxDialogDescription>Add a new label to select.</p>
+                <div rdxDialogBackdrop [class]="cn(d.backdrop, d.backdropAnimated)"></div>
+                <div rdxDialogPopup [class]="cn(d.popup, d.popupAnimated)">
+                    <h2 rdxDialogTitle [class]="d.title">Create new label</h2>
+                    <p rdxDialogDescription [class]="d.description">Add a new label to select.</p>
                     <form (submit)="confirmCreate($event)">
                         <input
+                            placeholder="Label name"
+                            aria-label="Label name"
                             [class]="dialogInput"
                             [value]="newLabel()"
                             (input)="newLabel.set($any($event.target).value)"
-                            placeholder="Label name"
-                            aria-label="Label name"
                         />
                         <div [class]="d.footer">
-                            <button [class]="cn(b.base, b.outline, b.size.sm)" type="button" rdxDialogClose>
+                            <button type="button" rdxDialogClose [class]="cn(b.base, b.outline, b.size.sm)">
                                 Cancel
                             </button>
-                            <button [class]="cn(b.base, b.primary, b.size.sm)" type="submit">Create</button>
+                            <button type="submit" [class]="cn(b.base, b.primary, b.size.sm)">Create</button>
                         </div>
                     </form>
                 </div>
@@ -1254,10 +1254,10 @@ popup. Put `rdxComboboxAnchor` on the trigger so the popup anchors to it; the in
 the popup opens.
 
 ```typescript
-import { ChangeDetectionStrategy, Component, signal } from '@angular/core';
-import { LucideCheck, LucideChevronDown } from '@lucide/angular';
 import { demoCombobox } from '../../storybook/styles';
 import { _importsCombobox } from '../index';
+import { ChangeDetectionStrategy, Component, signal } from '@angular/core';
+import { LucideCheck, LucideChevronDown } from '@lucide/angular';
 
 /**
  * A select-like pattern where the trigger shows the current value and the **search input lives inside
@@ -1269,30 +1269,30 @@ import { _importsCombobox } from '../index';
     selector: 'combobox-input-in-popup',
     imports: [_importsCombobox, LucideChevronDown, LucideCheck],
     template: `
-        <div class="flex flex-col items-start gap-1" [(value)]="value" rdxComboboxRoot>
+        <div class="flex flex-col items-start gap-1" rdxComboboxRoot [(value)]="value">
             <span class="text-foreground text-sm font-medium" rdxComboboxLabel>Fruit</span>
-            <button [class]="c.selectTrigger" rdxComboboxTrigger rdxComboboxAnchor>
+            <button rdxComboboxTrigger rdxComboboxAnchor [class]="c.selectTrigger">
                 <span #selectedValue="rdxComboboxValue" rdxComboboxValue placeholder="Select a fruit">
                     {{ selectedValue.slotText() }}
                 </span>
                 <svg lucideChevronDown size="16"></svg>
             </button>
 
-            <div *rdxComboboxPortal [class]="c.positioner" rdxComboboxPositioner>
-                <div [class]="c.popup + ' p-0'" rdxComboboxPopup>
+            <div *rdxComboboxPortal rdxComboboxPositioner [class]="c.positioner">
+                <div rdxComboboxPopup [class]="c.popup + ' p-0'">
                     <div [class]="c.searchHeader">
-                        <input [class]="c.popupInput" rdxComboboxInput placeholder="Search…" aria-label="Fruit" />
+                        <input rdxComboboxInput placeholder="Search…" aria-label="Fruit" [class]="c.popupInput" />
                     </div>
-                    <div [class]="c.list + ' p-1'" rdxComboboxList aria-label="Fruits">
+                    <div rdxComboboxList aria-label="Fruits" [class]="c.list + ' p-1'">
                         @for (fruit of fruits; track fruit) {
-                            <div [class]="c.item" [value]="fruit" rdxComboboxItem>
-                                <span [class]="c.itemIndicator" rdxComboboxItemIndicator>
+                            <div rdxComboboxItem [class]="c.item" [value]="fruit">
+                                <span rdxComboboxItemIndicator [class]="c.itemIndicator">
                                     <svg lucideCheck size="14"></svg>
                                 </span>
                                 {{ fruit }}
                             </div>
                         }
-                        <div [class]="c.empty" rdxComboboxEmpty>No fruit found.</div>
+                        <div rdxComboboxEmpty [class]="c.empty">No fruit found.</div>
                     </div>
                 </div>
             </div>
@@ -1313,10 +1313,10 @@ as an activation signal and (by default) fills the input. Paired with `autoHighl
 first match is always ready for `Enter`.
 
 ```typescript
-import { ChangeDetectionStrategy, Component, signal } from '@angular/core';
-import { LucideArrowRight } from '@lucide/angular';
 import { demoCombobox } from '../../storybook/styles';
 import { _importsCombobox } from '../index';
+import { ChangeDetectionStrategy, Component, signal } from '@angular/core';
+import { LucideArrowRight } from '@lucide/angular';
 
 /**
  * A command/search palette: `selectionMode="none"` (no value is committed — it filters and runs an
@@ -1329,20 +1329,20 @@ import { _importsCombobox } from '../index';
     template: `
         <div
             class="flex w-64 flex-col gap-2"
-            (onValueChange)="run($event.value)"
             selectionMode="none"
             autoHighlight="always"
             rdxComboboxRoot
+            (onValueChange)="run($event.value)"
         >
             <div [class]="c.control">
-                <input [class]="c.input" rdxComboboxInput placeholder="Run a command…" aria-label="Command" />
+                <input rdxComboboxInput placeholder="Run a command…" aria-label="Command" [class]="c.input" />
             </div>
 
-            <div *rdxComboboxPortal [class]="c.positioner" rdxComboboxPositioner>
-                <div [class]="c.popup" rdxComboboxPopup>
-                    <div [class]="c.list" rdxComboboxList aria-label="Commands">
+            <div *rdxComboboxPortal rdxComboboxPositioner [class]="c.positioner">
+                <div rdxComboboxPopup [class]="c.popup">
+                    <div rdxComboboxList aria-label="Commands" [class]="c.list">
                         @for (command of commands; track command) {
-                            <div [class]="c.item" [value]="command" rdxComboboxItem>
+                            <div rdxComboboxItem [class]="c.item" [value]="command">
                                 <span [class]="c.itemIndicator">
                                     <svg lucideArrowRight size="14"></svg>
                                 </span>
@@ -1350,7 +1350,7 @@ import { _importsCombobox } from '../index';
                             </div>
                         }
                     </div>
-                    <div [class]="c.empty" rdxComboboxEmpty>No commands.</div>
+                    <div rdxComboboxEmpty [class]="c.empty">No commands.</div>
                 </div>
             </div>
 
@@ -1379,10 +1379,10 @@ With `modal`, page scroll is locked and content outside the popup is inert while
 clicking it dismisses.
 
 ```typescript
-import { ChangeDetectionStrategy, Component, signal } from '@angular/core';
-import { LucideCheck, LucideChevronDown } from '@lucide/angular';
 import { demoCombobox } from '../../storybook/styles';
 import { _importsCombobox } from '../index';
+import { ChangeDetectionStrategy, Component, signal } from '@angular/core';
+import { LucideCheck, LucideChevronDown } from '@lucide/angular';
 
 /**
  * Modal combobox: while open, page scroll is locked and content outside the popup is inert. A
@@ -1393,29 +1393,29 @@ import { _importsCombobox } from '../index';
     selector: 'combobox-modal',
     imports: [_importsCombobox, LucideChevronDown, LucideCheck],
     template: `
-        <div [(value)]="value" modal rdxComboboxRoot>
+        <div modal rdxComboboxRoot [(value)]="value">
             <div [class]="c.control">
-                <input [class]="c.input" rdxComboboxInput placeholder="Search a fruit…" aria-label="Fruit" />
-                <button [class]="c.trigger" rdxComboboxTrigger aria-label="Open">
+                <input rdxComboboxInput placeholder="Search a fruit…" aria-label="Fruit" [class]="c.input" />
+                <button rdxComboboxTrigger aria-label="Open" [class]="c.trigger">
                     <svg lucideChevronDown size="16"></svg>
                 </button>
             </div>
 
             <ng-template rdxComboboxPortal>
-                <div [class]="c.backdrop" rdxComboboxBackdrop></div>
-                <div [class]="c.positioner" rdxComboboxPositioner>
-                    <div [class]="c.popup" rdxComboboxPopup>
-                        <div [class]="c.list" rdxComboboxList aria-label="Fruits">
+                <div rdxComboboxBackdrop [class]="c.backdrop"></div>
+                <div rdxComboboxPositioner [class]="c.positioner">
+                    <div rdxComboboxPopup [class]="c.popup">
+                        <div rdxComboboxList aria-label="Fruits" [class]="c.list">
                             @for (fruit of fruits; track fruit) {
-                                <div [class]="c.item" [value]="fruit" rdxComboboxItem>
-                                    <span [class]="c.itemIndicator" rdxComboboxItemIndicator>
+                                <div rdxComboboxItem [class]="c.item" [value]="fruit">
+                                    <span rdxComboboxItemIndicator [class]="c.itemIndicator">
                                         <svg lucideCheck size="14"></svg>
                                     </span>
                                     {{ fruit }}
                                 </div>
                             }
                         </div>
-                        <div [class]="c.empty" rdxComboboxEmpty>No fruit found.</div>
+                        <div rdxComboboxEmpty [class]="c.empty">No fruit found.</div>
                     </div>
                 </div>
             </ng-template>
@@ -1450,10 +1450,10 @@ protected onOpenChange(change: { open: boolean; eventDetails: { cancel(): void }
 Live demo:
 
 ```typescript
-import { ChangeDetectionStrategy, Component, signal } from '@angular/core';
-import { LucideCheck, LucideChevronDown } from '@lucide/angular';
 import { demoCombobox } from '../../storybook/styles';
 import { _importsCombobox, RdxComboboxOpenChange } from '../index';
+import { ChangeDetectionStrategy, Component, signal } from '@angular/core';
+import { LucideCheck, LucideChevronDown } from '@lucide/angular';
 
 interface ComboboxOpenChangeLogEntry {
     label: string;
@@ -1472,44 +1472,44 @@ interface ComboboxOpenChangeLogEntry {
                 <div class="flex flex-col gap-3">
                     <div
                         #root="rdxComboboxRoot"
+                        rdxComboboxRoot
                         [(open)]="open"
                         [(value)]="value"
                         (onOpenChange)="handleOpenChange($event)"
-                        rdxComboboxRoot
                     >
                         <div [class]="c.control">
                             <input
-                                [class]="c.input"
                                 rdxComboboxInput
                                 placeholder="Search a framework…"
                                 aria-label="Framework"
+                                [class]="c.input"
                             />
-                            <button [class]="c.trigger" rdxComboboxTrigger aria-label="Open">
+                            <button rdxComboboxTrigger aria-label="Open" [class]="c.trigger">
                                 <svg lucideChevronDown size="16"></svg>
                             </button>
                         </div>
 
-                        <div *rdxComboboxPortal [class]="c.positioner" rdxComboboxPositioner>
-                            <div [class]="c.popup" rdxComboboxPopup>
-                                <div [class]="c.list" rdxComboboxList aria-label="Frameworks">
+                        <div *rdxComboboxPortal rdxComboboxPositioner [class]="c.positioner">
+                            <div rdxComboboxPopup [class]="c.popup">
+                                <div rdxComboboxList aria-label="Frameworks" [class]="c.list">
                                     @for (framework of frameworks; track framework) {
-                                        <div [class]="c.item" [value]="framework" rdxComboboxItem>
-                                            <span [class]="c.itemIndicator" rdxComboboxItemIndicator>
+                                        <div rdxComboboxItem [class]="c.item" [value]="framework">
+                                            <span rdxComboboxItemIndicator [class]="c.itemIndicator">
                                                 <svg lucideCheck size="14"></svg>
                                             </span>
                                             {{ framework }}
                                         </div>
                                     }
                                 </div>
-                                <div [class]="c.empty" rdxComboboxEmpty>No match found.</div>
+                                <div rdxComboboxEmpty [class]="c.empty">No match found.</div>
                             </div>
                         </div>
 
                         <div class="grid gap-2 pt-3">
                             <button
                                 class="border-border bg-background text-foreground hover:bg-muted inline-flex h-8 items-center justify-between rounded-md border px-3 text-xs"
-                                (click)="cancelClose.update((value) => !value)"
                                 type="button"
+                                (click)="cancelClose.update((value) => !value)"
                             >
                                 <span>Cancel close</span>
                                 <span class="text-muted-foreground">{{ cancelClose() ? 'on' : 'off' }}</span>
@@ -1517,8 +1517,8 @@ interface ComboboxOpenChangeLogEntry {
 
                             <button
                                 class="border-border bg-background text-foreground hover:bg-muted inline-flex h-8 items-center justify-between rounded-md border px-3 text-xs"
-                                (click)="keepMountedOnClose.update((value) => !value)"
                                 type="button"
+                                (click)="keepMountedOnClose.update((value) => !value)"
                             >
                                 <span>Keep mounted on close</span>
                                 <span class="text-muted-foreground">{{ keepMountedOnClose() ? 'on' : 'off' }}</span>
@@ -1550,8 +1550,8 @@ interface ComboboxOpenChangeLogEntry {
                         </div>
                         <button
                             class="text-muted-foreground hover:text-foreground inline-flex h-7 items-center rounded-md px-2 text-xs"
-                            (click)="logs.set([])"
                             type="button"
+                            (click)="logs.set([])"
                         >
                             Clear
                         </button>
@@ -1625,11 +1625,11 @@ export class ComboboxOpenChange {
 The root is a `ControlValueAccessor`, so it binds to a `FormControl` like any other control.
 
 ```typescript
+import { demoCombobox } from '../../storybook/styles';
+import { _importsCombobox } from '../index';
 import { ChangeDetectionStrategy, Component } from '@angular/core';
 import { FormControl, ReactiveFormsModule } from '@angular/forms';
 import { LucideCheck, LucideChevronDown } from '@lucide/angular';
-import { demoCombobox } from '../../storybook/styles';
-import { _importsCombobox } from '../index';
 
 @Component({
     changeDetection: ChangeDetectionStrategy.Eager,
@@ -1637,27 +1637,27 @@ import { _importsCombobox } from '../index';
     imports: [_importsCombobox, ReactiveFormsModule, LucideChevronDown, LucideCheck],
     template: `
         <form class="flex flex-col gap-3">
-            <div [formControl]="fruit" rdxComboboxRoot>
+            <div rdxComboboxRoot [formControl]="fruit">
                 <div [class]="c.control">
-                    <input [class]="c.input" rdxComboboxInput placeholder="Pick a fruit…" aria-label="Fruit" />
-                    <button [class]="c.trigger" rdxComboboxTrigger aria-label="Open">
+                    <input rdxComboboxInput placeholder="Pick a fruit…" aria-label="Fruit" [class]="c.input" />
+                    <button rdxComboboxTrigger aria-label="Open" [class]="c.trigger">
                         <svg lucideChevronDown size="16"></svg>
                     </button>
                 </div>
 
-                <div *rdxComboboxPortal [class]="c.positioner" rdxComboboxPositioner>
-                    <div [class]="c.popup" rdxComboboxPopup>
-                        <div [class]="c.list" rdxComboboxList aria-label="Fruits">
+                <div *rdxComboboxPortal rdxComboboxPositioner [class]="c.positioner">
+                    <div rdxComboboxPopup [class]="c.popup">
+                        <div rdxComboboxList aria-label="Fruits" [class]="c.list">
                             @for (f of fruits; track f) {
-                                <div [class]="c.item" [value]="f" rdxComboboxItem>
-                                    <span [class]="c.itemIndicator" rdxComboboxItemIndicator>
+                                <div rdxComboboxItem [class]="c.item" [value]="f">
+                                    <span rdxComboboxItemIndicator [class]="c.itemIndicator">
                                         <svg lucideCheck size="14"></svg>
                                     </span>
                                     {{ f }}
                                 </div>
                             }
                         </div>
-                        <div [class]="c.empty" rdxComboboxEmpty>No fruit found.</div>
+                        <div rdxComboboxEmpty [class]="c.empty">No fruit found.</div>
                     </div>
                 </div>
             </div>
@@ -1682,11 +1682,11 @@ Bind the control's validity to `[invalid]` so the input reflects `data-invalid`
 error message and submit guard follow the standard reactive-forms pattern.
 
 ```typescript
+import { cn, demoButton, demoCombobox } from '../../storybook/styles';
+import { _importsCombobox } from '../index';
 import { ChangeDetectionStrategy, Component, signal } from '@angular/core';
 import { FormControl, ReactiveFormsModule, Validators } from '@angular/forms';
 import { LucideCheck, LucideChevronDown } from '@lucide/angular';
-import { cn, demoButton, demoCombobox } from '../../storybook/styles';
-import { _importsCombobox } from '../index';
 
 /**
  * Reactive forms with validation. The control's validity is bound to the combobox `[invalid]` input,
@@ -1699,27 +1699,27 @@ import { _importsCombobox } from '../index';
     imports: [_importsCombobox, ReactiveFormsModule, LucideChevronDown, LucideCheck],
     template: `
         <form class="flex flex-col gap-3" (ngSubmit)="onSubmit()">
-            <div [formControl]="fruit" [invalid]="showError()" rdxComboboxRoot>
+            <div rdxComboboxRoot [formControl]="fruit" [invalid]="showError()">
                 <div [class]="cn(c.control, showError() && 'border-destructive focus-within:ring-destructive')">
-                    <input [class]="c.input" rdxComboboxInput placeholder="Pick a fruit…" aria-label="Fruit" />
-                    <button [class]="c.trigger" rdxComboboxTrigger aria-label="Open">
+                    <input rdxComboboxInput placeholder="Pick a fruit…" aria-label="Fruit" [class]="c.input" />
+                    <button rdxComboboxTrigger aria-label="Open" [class]="c.trigger">
                         <svg lucideChevronDown size="16"></svg>
                     </button>
                 </div>
 
-                <div *rdxComboboxPortal [class]="c.positioner" rdxComboboxPositioner>
-                    <div [class]="c.popup" rdxComboboxPopup>
-                        <div [class]="c.list" rdxComboboxList aria-label="Fruits">
+                <div *rdxComboboxPortal rdxComboboxPositioner [class]="c.positioner">
+                    <div rdxComboboxPopup [class]="c.popup">
+                        <div rdxComboboxList aria-label="Fruits" [class]="c.list">
                             @for (f of fruits; track f) {
-                                <div [class]="c.item" [value]="f" rdxComboboxItem>
-                                    <span [class]="c.itemIndicator" rdxComboboxItemIndicator>
+                                <div rdxComboboxItem [class]="c.item" [value]="f">
+                                    <span rdxComboboxItemIndicator [class]="c.itemIndicator">
                                         <svg lucideCheck size="14"></svg>
                                     </span>
                                     {{ f }}
                                 </div>
                             }
                         </div>
-                        <div [class]="c.empty" rdxComboboxEmpty>No fruit found.</div>
+                        <div rdxComboboxEmpty [class]="c.empty">No fruit found.</div>
                     </div>
                 </div>
             </div>
@@ -1728,7 +1728,7 @@ import { _importsCombobox } from '../index';
                 <p class="text-destructive text-sm">Please pick a fruit.</p>
             }
 
-            <button [class]="cn(b.base, b.primary, b.size.md, 'self-start')" type="submit">Submit</button>
+            <button type="submit" [class]="cn(b.base, b.primary, b.size.md, 'self-start')">Submit</button>
 
             @if (submitted()) {
                 <p class="text-muted-foreground text-sm">Submitted ✓</p>
@@ -1765,10 +1765,10 @@ export class ComboboxValidation {
 `RdxComboboxEmpty` shows only when no item matches the query.
 
 ```typescript
-import { ChangeDetectionStrategy, Component, signal } from '@angular/core';
-import { LucideCheck, LucideChevronDown } from '@lucide/angular';
 import { demoCombobox } from '../../storybook/styles';
 import { _importsCombobox } from '../index';
+import { ChangeDetectionStrategy, Component, signal } from '@angular/core';
+import { LucideCheck, LucideChevronDown } from '@lucide/angular';
 
 /**
  * `RdxComboboxEmpty` renders only when no item matches the query — type something like "zzz" to see
@@ -1779,27 +1779,27 @@ import { _importsCombobox } from '../index';
     selector: 'combobox-empty',
     imports: [_importsCombobox, LucideChevronDown, LucideCheck],
     template: `
-        <div [(value)]="value" rdxComboboxRoot>
+        <div rdxComboboxRoot [(value)]="value">
             <div [class]="c.control">
-                <input [class]="c.input" rdxComboboxInput placeholder="Try typing 'zzz'…" aria-label="Fruit" />
-                <button [class]="c.trigger" rdxComboboxTrigger aria-label="Open">
+                <input rdxComboboxInput placeholder="Try typing 'zzz'…" aria-label="Fruit" [class]="c.input" />
+                <button rdxComboboxTrigger aria-label="Open" [class]="c.trigger">
                     <svg lucideChevronDown size="16"></svg>
                 </button>
             </div>
 
-            <div *rdxComboboxPortal [class]="c.positioner" rdxComboboxPositioner>
-                <div [class]="c.popup" rdxComboboxPopup>
-                    <div [class]="c.list" rdxComboboxList aria-label="Fruits">
+            <div *rdxComboboxPortal rdxComboboxPositioner [class]="c.positioner">
+                <div rdxComboboxPopup [class]="c.popup">
+                    <div rdxComboboxList aria-label="Fruits" [class]="c.list">
                         @for (fruit of fruits; track fruit) {
-                            <div [class]="c.item" [value]="fruit" rdxComboboxItem>
-                                <span [class]="c.itemIndicator" rdxComboboxItemIndicator>
+                            <div rdxComboboxItem [class]="c.item" [value]="fruit">
+                                <span rdxComboboxItemIndicator [class]="c.itemIndicator">
                                     <svg lucideCheck size="14"></svg>
                                 </span>
                                 {{ fruit }}
                             </div>
                         }
                     </div>
-                    <div [class]="c.empty" rdxComboboxEmpty>No fruit matches your search.</div>
+                    <div rdxComboboxEmpty [class]="c.empty">No fruit matches your search.</div>
                 </div>
             </div>
         </div>
@@ -1834,12 +1834,12 @@ Then drive a scroll container with `injectVirtualizer`, render only `getVirtualI
 row's `[index]` to the virtual item's index — exactly as in the example's "Show code".
 
 ```typescript
-import { ChangeDetectionStrategy, Component, ElementRef, signal, viewChild } from '@angular/core';
-import { LucideCheck } from '@lucide/angular';
-import { injectVirtualizer } from '@tanstack/angular-virtual';
 import { cn, demoCombobox } from '../../storybook/styles';
 import { _importsCombobox } from '../index';
 import { ComboboxItemHighlightedDetails, RdxComboboxRoot } from '../src/combobox-root';
+import { ChangeDetectionStrategy, Component, ElementRef, signal, viewChild } from '@angular/core';
+import { LucideCheck } from '@lucide/angular';
+import { injectVirtualizer } from '@tanstack/angular-virtual';
 
 /**
  * Externally virtualized list of 10,000 items. The combobox owns filtering and index navigation
@@ -1854,32 +1854,32 @@ import { ComboboxItemHighlightedDetails, RdxComboboxRoot } from '../src/combobox
     template: `
         <div
             #cmb="rdxComboboxRoot"
-            [(value)]="value"
-            [items]="items"
-            (onItemHighlighted)="onHighlight($event)"
             virtualized
             rdxComboboxRoot
+            [items]="items"
+            [(value)]="value"
+            (onItemHighlighted)="onHighlight($event)"
         >
             <div [class]="c.control">
-                <input [class]="c.input" rdxComboboxInput placeholder="Search 10,000 items…" aria-label="Item" />
+                <input rdxComboboxInput placeholder="Search 10,000 items…" aria-label="Item" [class]="c.input" />
             </div>
 
-            <div *rdxComboboxPortal [class]="c.positioner" rdxComboboxPositioner>
-                <div [class]="popup" rdxComboboxPopup>
-                    <div [class]="c.empty" rdxComboboxEmpty>No items found.</div>
-                    <div [class]="c.list" rdxComboboxList aria-label="Items">
+            <div *rdxComboboxPortal rdxComboboxPositioner [class]="c.positioner">
+                <div rdxComboboxPopup [class]="popup">
+                    <div rdxComboboxEmpty [class]="c.empty">No items found.</div>
+                    <div rdxComboboxList aria-label="Items" [class]="c.list">
                         <div #scroll [class]="scroller">
                             <div [class]="spacer" [style.height.px]="virtualizer.getTotalSize()">
                                 @for (row of virtualizer.getVirtualItems(); track row.key) {
                                     <div
+                                        rdxComboboxItem
                                         [class]="item"
                                         [value]="cmb.filteredItems()[row.index]"
                                         [index]="row.index"
                                         [style.height.px]="row.size"
                                         [style.transform]="'translateY(' + row.start + 'px)'"
-                                        rdxComboboxItem
                                     >
-                                        <span [class]="c.itemIndicator" rdxComboboxItemIndicator>
+                                        <span rdxComboboxItemIndicator [class]="c.itemIndicator">
                                             <svg lucideCheck size="14"></svg>
                                         </span>
                                         {{ cmb.filteredItems()[row.index] }}
diff --git a/skills/radix-ng-examples/references/components/context-menu.md b/skills/radix-ng-examples/references/components/context-menu.md
index 5f39b606f..cfdc7289b 100644
--- a/skills/radix-ng-examples/references/components/context-menu.md
+++ b/skills/radix-ng-examples/references/components/context-menu.md
@@ -8,11 +8,11 @@ of a button that anchors the popup to itself, `rdxContextMenuTrigger` opens the
 position on a right click or long-press.
 
 ```typescript
+import { cn, demoMenu } from '../../storybook/styles';
 import { ChangeDetectionStrategy, Component, signal } from '@angular/core';
 import { LucideCheck, LucideDot } from '@lucide/angular';
 import { RdxContextMenuModule } from '@radix-ng/primitives/context-menu';
 import { RdxMenuModule } from '@radix-ng/primitives/menu';
-import { cn, demoMenu } from '../../storybook/styles';
 
 @Component({
     selector: 'rdx-context-menu-default',
@@ -21,83 +21,83 @@ import { cn, demoMenu } from '../../storybook/styles';
     template: `
         <ng-container #root="rdxContextMenuRoot" rdxContextMenuRoot>
             <div
+                rdxContextMenuTrigger
                 [class]="
                     cn(
                         'border-border text-muted-foreground flex h-[150px] w-[300px] items-center justify-center rounded-md border-2 border-dashed text-sm select-none',
                         'data-[popup-open]:bg-muted data-[popup-open]:border-solid'
                     )
                 "
-                rdxContextMenuTrigger
             >
                 Right click here
             </div>
 
-            <div *rdxMenuPortal [class]="m.positioner" rdxMenuPositioner>
-                <div [class]="m.popup" rdxMenuPopup>
-                    <button [class]="m.item" rdxMenuItem>
+            <div *rdxMenuPortal rdxMenuPositioner [class]="m.positioner">
+                <div rdxMenuPopup [class]="m.popup">
+                    <button rdxMenuItem [class]="m.item">
                         Back
                         <span [class]="shortcut">⌘ [</span>
                     </button>
-                    <button [class]="m.item" [disabled]="true" rdxMenuItem>
+                    <button rdxMenuItem [class]="m.item" [disabled]="true">
                         Forward
                         <span [class]="shortcut">⌘ ]</span>
                     </button>
-                    <button [class]="m.item" rdxMenuItem>
+                    <button rdxMenuItem [class]="m.item">
                         Reload
                         <span [class]="shortcut">⌘ R</span>
                     </button>
 
                     <!-- More Tools submenu -->
                     <ng-container #moreSub="rdxMenuRoot" rdxMenuRoot>
-                        <button [class]="cn(m.item, 'justify-between')" rdxMenuSubTrigger>
+                        <button rdxMenuSubTrigger [class]="cn(m.item, 'justify-between')">
                             More Tools
                             <span class="text-muted-foreground text-xs">›</span>
                         </button>
                         <div
                             *rdxMenuPortal
-                            [class]="m.positioner"
                             side="right"
                             align="start"
                             sideOffset="4"
                             rdxMenuPositioner
+                            [class]="m.positioner"
                         >
-                            <div [class]="m.popup" rdxMenuPopup>
-                                <button [class]="m.item" rdxMenuItem>Save Page As…</button>
-                                <button [class]="m.item" rdxMenuItem>Create Shortcut…</button>
-                                <button [class]="m.item" rdxMenuItem>Name Window…</button>
+                            <div rdxMenuPopup [class]="m.popup">
+                                <button rdxMenuItem [class]="m.item">Save Page As…</button>
+                                <button rdxMenuItem [class]="m.item">Create Shortcut…</button>
+                                <button rdxMenuItem [class]="m.item">Name Window…</button>
                             </div>
                         </div>
                     </ng-container>
 
-                    <div [class]="m.separator" rdxMenuSeparator></div>
+                    <div rdxMenuSeparator [class]="m.separator"></div>
 
-                    <label [(checked)]="showBookmarks" [class]="m.selectableItem" rdxMenuCheckboxItem>
-                        <span [class]="m.itemIndicator" rdxMenuCheckboxItemIndicator>
-                            <svg [size]="12" lucideCheck></svg>
+                    <label rdxMenuCheckboxItem [class]="m.selectableItem" [(checked)]="showBookmarks">
+                        <span rdxMenuCheckboxItemIndicator [class]="m.itemIndicator">
+                            <svg lucideCheck [size]="12"></svg>
                         </span>
                         Show Bookmarks
                         <span [class]="shortcut">⌘ B</span>
                     </label>
-                    <label [(checked)]="showFullUrls" [class]="m.selectableItem" rdxMenuCheckboxItem>
-                        <span [class]="m.itemIndicator" rdxMenuCheckboxItemIndicator>
-                            <svg [size]="12" lucideCheck></svg>
+                    <label rdxMenuCheckboxItem [class]="m.selectableItem" [(checked)]="showFullUrls">
+                        <span rdxMenuCheckboxItemIndicator [class]="m.itemIndicator">
+                            <svg lucideCheck [size]="12"></svg>
                         </span>
                         Show Full URLs
                     </label>
 
-                    <div [class]="m.separator" rdxMenuSeparator></div>
+                    <div rdxMenuSeparator [class]="m.separator"></div>
 
-                    <div [(value)]="person" rdxMenuRadioGroup>
-                        <div [class]="m.groupLabel" rdxMenuGroupLabel>People</div>
-                        <label [class]="m.selectableItem" value="pedro" rdxMenuRadioItem>
-                            <span [class]="m.itemIndicator" rdxMenuRadioItemIndicator>
-                                <svg [size]="10" strokeWidth="5" lucideDot></svg>
+                    <div rdxMenuRadioGroup [(value)]="person">
+                        <div rdxMenuGroupLabel [class]="m.groupLabel">People</div>
+                        <label value="pedro" rdxMenuRadioItem [class]="m.selectableItem">
+                            <span rdxMenuRadioItemIndicator [class]="m.itemIndicator">
+                                <svg strokeWidth="5" lucideDot [size]="10"></svg>
                             </span>
                             Pedro Duarte
                         </label>
-                        <label [class]="m.selectableItem" value="colm" rdxMenuRadioItem>
-                            <span [class]="m.itemIndicator" rdxMenuRadioItemIndicator>
-                                <svg [size]="10" strokeWidth="5" lucideDot></svg>
+                        <label value="colm" rdxMenuRadioItem [class]="m.selectableItem">
+                            <span rdxMenuRadioItemIndicator [class]="m.itemIndicator">
+                                <svg strokeWidth="5" lucideDot [size]="10"></svg>
                             </span>
                             Colm Tuite
                         </label>
@@ -179,11 +179,11 @@ A right-click area with shortcuts, a disabled item, a submenu, checkbox items, a
 Right-click the dashed area to open the menu at the pointer.
 
 ```typescript
+import { cn, demoMenu } from '../../storybook/styles';
 import { ChangeDetectionStrategy, Component, signal } from '@angular/core';
 import { LucideCheck, LucideDot } from '@lucide/angular';
 import { RdxContextMenuModule } from '@radix-ng/primitives/context-menu';
 import { RdxMenuModule } from '@radix-ng/primitives/menu';
-import { cn, demoMenu } from '../../storybook/styles';
 
 @Component({
     selector: 'rdx-context-menu-default',
@@ -192,83 +192,83 @@ import { cn, demoMenu } from '../../storybook/styles';
     template: `
         <ng-container #root="rdxContextMenuRoot" rdxContextMenuRoot>
             <div
+                rdxContextMenuTrigger
                 [class]="
                     cn(
                         'border-border text-muted-foreground flex h-[150px] w-[300px] items-center justify-center rounded-md border-2 border-dashed text-sm select-none',
                         'data-[popup-open]:bg-muted data-[popup-open]:border-solid'
                     )
                 "
-                rdxContextMenuTrigger
             >
                 Right click here
             </div>
 
-            <div *rdxMenuPortal [class]="m.positioner" rdxMenuPositioner>
-                <div [class]="m.popup" rdxMenuPopup>
-                    <button [class]="m.item" rdxMenuItem>
+            <div *rdxMenuPortal rdxMenuPositioner [class]="m.positioner">
+                <div rdxMenuPopup [class]="m.popup">
+                    <button rdxMenuItem [class]="m.item">
                         Back
                         <span [class]="shortcut">⌘ [</span>
                     </button>
-                    <button [class]="m.item" [disabled]="true" rdxMenuItem>
+                    <button rdxMenuItem [class]="m.item" [disabled]="true">
                         Forward
                         <span [class]="shortcut">⌘ ]</span>
                     </button>
-                    <button [class]="m.item" rdxMenuItem>
+                    <button rdxMenuItem [class]="m.item">
                         Reload
                         <span [class]="shortcut">⌘ R</span>
                     </button>
 
                     <!-- More Tools submenu -->
                     <ng-container #moreSub="rdxMenuRoot" rdxMenuRoot>
-                        <button [class]="cn(m.item, 'justify-between')" rdxMenuSubTrigger>
+                        <button rdxMenuSubTrigger [class]="cn(m.item, 'justify-between')">
                             More Tools
                             <span class="text-muted-foreground text-xs">›</span>
                         </button>
                         <div
                             *rdxMenuPortal
-                            [class]="m.positioner"
                             side="right"
                             align="start"
                             sideOffset="4"
                             rdxMenuPositioner
+                            [class]="m.positioner"
                         >
-                            <div [class]="m.popup" rdxMenuPopup>
-                                <button [class]="m.item" rdxMenuItem>Save Page As…</button>
-                                <button [class]="m.item" rdxMenuItem>Create Shortcut…</button>
-                                <button [class]="m.item" rdxMenuItem>Name Window…</button>
+                            <div rdxMenuPopup [class]="m.popup">
+                                <button rdxMenuItem [class]="m.item">Save Page As…</button>
+                                <button rdxMenuItem [class]="m.item">Create Shortcut…</button>
+                                <button rdxMenuItem [class]="m.item">Name Window…</button>
                             </div>
                         </div>
                     </ng-container>
 
-                    <div [class]="m.separator" rdxMenuSeparator></div>
+                    <div rdxMenuSeparator [class]="m.separator"></div>
 
-                    <label [(checked)]="showBookmarks" [class]="m.selectableItem" rdxMenuCheckboxItem>
-                        <span [class]="m.itemIndicator" rdxMenuCheckboxItemIndicator>
-                            <svg [size]="12" lucideCheck></svg>
+                    <label rdxMenuCheckboxItem [class]="m.selectableItem" [(checked)]="showBookmarks">
+                        <span rdxMenuCheckboxItemIndicator [class]="m.itemIndicator">
+                            <svg lucideCheck [size]="12"></svg>
                         </span>
                         Show Bookmarks
                         <span [class]="shortcut">⌘ B</span>
                     </label>
-                    <label [(checked)]="showFullUrls" [class]="m.selectableItem" rdxMenuCheckboxItem>
-                        <span [class]="m.itemIndicator" rdxMenuCheckboxItemIndicator>
-                            <svg [size]="12" lucideCheck></svg>
+                    <label rdxMenuCheckboxItem [class]="m.selectableItem" [(checked)]="showFullUrls">
+                        <span rdxMenuCheckboxItemIndicator [class]="m.itemIndicator">
+                            <svg lucideCheck [size]="12"></svg>
                         </span>
                         Show Full URLs
                     </label>
 
-                    <div [class]="m.separator" rdxMenuSeparator></div>
+                    <div rdxMenuSeparator [class]="m.separator"></div>
 
-                    <div [(value)]="person" rdxMenuRadioGroup>
-                        <div [class]="m.groupLabel" rdxMenuGroupLabel>People</div>
-                        <label [class]="m.selectableItem" value="pedro" rdxMenuRadioItem>
-                            <span [class]="m.itemIndicator" rdxMenuRadioItemIndicator>
-                                <svg [size]="10" strokeWidth="5" lucideDot></svg>
+                    <div rdxMenuRadioGroup [(value)]="person">
+                        <div rdxMenuGroupLabel [class]="m.groupLabel">People</div>
+                        <label value="pedro" rdxMenuRadioItem [class]="m.selectableItem">
+                            <span rdxMenuRadioItemIndicator [class]="m.itemIndicator">
+                                <svg strokeWidth="5" lucideDot [size]="10"></svg>
                             </span>
                             Pedro Duarte
                         </label>
-                        <label [class]="m.selectableItem" value="colm" rdxMenuRadioItem>
-                            <span [class]="m.itemIndicator" rdxMenuRadioItemIndicator>
-                                <svg [size]="10" strokeWidth="5" lucideDot></svg>
+                        <label value="colm" rdxMenuRadioItem [class]="m.selectableItem">
+                            <span rdxMenuRadioItemIndicator [class]="m.itemIndicator">
+                                <svg strokeWidth="5" lucideDot [size]="10"></svg>
                             </span>
                             Colm Tuite
                         </label>
diff --git a/skills/radix-ng-examples/references/components/cropper.md b/skills/radix-ng-examples/references/components/cropper.md
index aada3edcc..7702cd348 100644
--- a/skills/radix-ng-examples/references/components/cropper.md
+++ b/skills/radix-ng-examples/references/components/cropper.md
@@ -5,12 +5,12 @@
 Based on the React version [image-cropper](https://github.com/origin-space/image-cropper).
 
 ```typescript
-import { ChangeDetectionStrategy, Component } from '@angular/core';
 import { demoCropper } from '../../storybook/styles';
 import { RdxCropperCropAreaDirective } from '../src/cropper-crop-area.directive';
 import { RdxCropperDescriptionDirective } from '../src/cropper-description.directive';
 import { RdxCropperImageComponent } from '../src/cropper-image.component';
 import { RdxCropperRootDirective } from '../src/cropper-root.directive';
+import { ChangeDetectionStrategy, Component } from '@angular/core';
 
 @Component({
     changeDetection: ChangeDetectionStrategy.Eager,
@@ -22,12 +22,12 @@ import { RdxCropperRootDirective } from '../src/cropper-root.directive';
         RdxCropperDescriptionDirective
     ],
     template: `
-        <div [class]="c.root" image="https://images.unsplash.com/photo-1494790108377-be9c29b29330" rdxCropperRoot>
+        <div image="https://images.unsplash.com/photo-1494790108377-be9c29b29330" rdxCropperRoot [class]="c.root">
             <div class="sr-only" rdxCropperDescription>
                 Use the arrow keys to move the image, and plus or minus to zoom.
             </div>
-            <div [imgClass]="c.image" rdxCropperImage></div>
-            <div [class]="c.cropArea" rdxCropperCropArea></div>
+            <div rdxCropperImage [imgClass]="c.image"></div>
+            <div rdxCropperCropArea [class]="c.cropArea"></div>
         </div>
     `
 })
@@ -76,12 +76,12 @@ Set `disabled` to freeze the cropper — drag, wheel/pinch zoom, and keyboard ar
 leaves the tab order, and `data-disabled` is exposed for styling.
 
 ```typescript
-import { ChangeDetectionStrategy, Component } from '@angular/core';
 import { demoCropper } from '../../storybook/styles';
 import { RdxCropperCropAreaDirective } from '../src/cropper-crop-area.directive';
 import { RdxCropperDescriptionDirective } from '../src/cropper-description.directive';
 import { RdxCropperImageComponent } from '../src/cropper-image.component';
 import { RdxCropperRootDirective } from '../src/cropper-root.directive';
+import { ChangeDetectionStrategy, Component } from '@angular/core';
 
 @Component({
     changeDetection: ChangeDetectionStrategy.Eager,
@@ -94,16 +94,16 @@ import { RdxCropperRootDirective } from '../src/cropper-root.directive';
     ],
     template: `
         <div
-            [class]="c.root"
             disabled
             image="https://images.unsplash.com/photo-1494790108377-be9c29b29330"
             rdxCropperRoot
+            [class]="c.root"
         >
             <div class="sr-only" rdxCropperDescription>
                 Use the arrow keys to move the image, and plus or minus to zoom.
             </div>
-            <div [imgClass]="c.image" rdxCropperImage></div>
-            <div [class]="c.cropArea" rdxCropperCropArea></div>
+            <div rdxCropperImage [imgClass]="c.image"></div>
+            <div rdxCropperCropArea [class]="c.cropArea"></div>
         </div>
     `
 })
@@ -117,12 +117,12 @@ export class CropperDisabled {
 Subscribe to `onCropChange` to read the crop rectangle (in the source image's natural pixels).
 
 ```typescript
-import { ChangeDetectionStrategy, Component, signal } from '@angular/core';
 import { demoCropper } from '../../storybook/styles';
 import { RdxCropperCropAreaDirective } from '../src/cropper-crop-area.directive';
 import { RdxCropperDescriptionDirective } from '../src/cropper-description.directive';
 import { RdxCropperImageComponent } from '../src/cropper-image.component';
 import { Area, RdxCropperRootDirective } from '../src/cropper-root.directive';
+import { ChangeDetectionStrategy, Component, signal } from '@angular/core';
 
 @Component({
     changeDetection: ChangeDetectionStrategy.Eager,
@@ -136,16 +136,16 @@ import { Area, RdxCropperRootDirective } from '../src/cropper-root.directive';
     template: `
         <div class="flex flex-col items-center gap-2">
             <div
-                [class]="c.root"
-                (onCropChange)="cropData.set($event)"
                 image="https://images.unsplash.com/photo-1494790108377-be9c29b29330"
                 rdxCropperRoot
+                [class]="c.root"
+                (onCropChange)="cropData.set($event)"
             >
                 <div class="sr-only" rdxCropperDescription>
                     Use the arrow keys to move the image, and plus or minus to zoom.
                 </div>
-                <div [imgClass]="c.image" rdxCropperImage></div>
-                <div [class]="c.cropArea" rdxCropperCropArea></div>
+                <div rdxCropperImage [imgClass]="c.image"></div>
+                <div rdxCropperCropArea [class]="c.cropArea"></div>
             </div>
 
             @if (cropData(); as data) {
diff --git a/skills/radix-ng-examples/references/components/date-field.md b/skills/radix-ng-examples/references/components/date-field.md
index ef1b2f4b9..4f9f4b093 100644
--- a/skills/radix-ng-examples/references/components/date-field.md
+++ b/skills/radix-ng-examples/references/components/date-field.md
@@ -3,12 +3,12 @@
 ####  Enables users to input specific dates within a designated field.
 
 ```typescript
+import { RdxDateFieldInputDirective } from '../src/date-field-input.directive';
+import { RdxDateFieldRootDirective } from '../src/date-field-root.directive';
 import { ChangeDetectionStrategy, Component, input, model } from '@angular/core';
 import { DateValue } from '@internationalized/date';
 import { Granularity } from '@radix-ng/primitives/core';
 import { RdxVisuallyHiddenInputDirective } from '@radix-ng/primitives/visually-hidden';
-import { RdxDateFieldInputDirective } from '../src/date-field-input.directive';
-import { RdxDateFieldRootDirective } from '../src/date-field-root.directive';
 
 @Component({
     changeDetection: ChangeDetectionStrategy.Eager,
@@ -16,29 +16,29 @@ import { RdxDateFieldRootDirective } from '../src/date-field-root.directive';
     imports: [RdxDateFieldRootDirective, RdxDateFieldInputDirective, RdxVisuallyHiddenInputDirective],
     template: `
         <div
-            class="border-input bg-background text-foreground data-[invalid]:border-destructive inline-flex items-center rounded-md border px-3 py-2 text-sm shadow-xs select-none"
             #root="rdxDateFieldRoot"
-            [(value)]="value"
+            class="border-input bg-background text-foreground data-[invalid]:border-destructive inline-flex items-center rounded-md border px-3 py-2 text-sm shadow-xs select-none"
+            rdxDateFieldRoot
             [locale]="locale()"
             [granularity]="granularity()"
-            rdxDateFieldRoot
+            [(value)]="value"
         >
             @for (item of root.segmentContents(); track $index) {
                 @if (item.part === 'literal') {
-                    <div class="text-muted-foreground px-0.5" [part]="item.part" rdxDateFieldInput>
+                    <div class="text-muted-foreground px-0.5" rdxDateFieldInput [part]="item.part">
                         {{ item.value }}
                     </div>
                 } @else {
                     <div
                         class="hover:bg-muted focus:bg-accent focus:text-accent-foreground data-[placeholder]:text-muted-foreground rounded px-1 tabular-nums focus:outline-none"
-                        [part]="item.part"
                         rdxDateFieldInput
+                        [part]="item.part"
                     >
                         {{ item.value }}
                     </div>
                 }
             }
-            <input [value]="root.value()" rdxVisuallyHiddenInput feature="focusable" />
+            <input rdxVisuallyHiddenInput feature="focusable" [value]="root.value()" />
         </div>
     `
 })
@@ -149,11 +149,11 @@ Import all parts and piece them together.
 ### Invalid
 
 ```typescript
+import { RdxDateFieldInputDirective } from '../src/date-field-input.directive';
+import { RdxDateFieldRootDirective } from '../src/date-field-root.directive';
 import { ChangeDetectionStrategy, Component } from '@angular/core';
 import { DateValue } from '@internationalized/date';
 import { RdxVisuallyHiddenInputDirective } from '@radix-ng/primitives/visually-hidden';
-import { RdxDateFieldInputDirective } from '../src/date-field-input.directive';
-import { RdxDateFieldRootDirective } from '../src/date-field-root.directive';
 
 @Component({
     changeDetection: ChangeDetectionStrategy.Eager,
@@ -165,29 +165,29 @@ import { RdxDateFieldRootDirective } from '../src/date-field-root.directive';
                 Appointment (unavailable on 19th)
             </label>
             <div
+                #root="rdxDateFieldRoot"
                 class="border-input bg-background text-foreground data-[invalid]:border-destructive inline-flex items-center rounded-md border px-3 py-2 text-sm shadow-xs select-none"
                 id="date-field-invalid"
-                #root="rdxDateFieldRoot"
-                [isDateUnavailable]="isDateUnavailable"
                 granularity="day"
                 rdxDateFieldRoot
+                [isDateUnavailable]="isDateUnavailable"
             >
                 @for (item of root.segmentContents(); track $index) {
                     @if (item.part === 'literal') {
-                        <div class="text-muted-foreground px-0.5" [part]="item.part" rdxDateFieldInput>
+                        <div class="text-muted-foreground px-0.5" rdxDateFieldInput [part]="item.part">
                             {{ item.value }}
                         </div>
                     } @else {
                         <div
                             class="hover:bg-muted focus:bg-accent focus:text-accent-foreground data-[placeholder]:text-muted-foreground rounded px-1 tabular-nums focus:outline-none"
-                            [part]="item.part"
                             rdxDateFieldInput
+                            [part]="item.part"
                         >
                             {{ item.value }}
                         </div>
                     }
                 }
-                <input [value]="root.value()" rdxVisuallyHiddenInput feature="focusable" />
+                <input rdxVisuallyHiddenInput feature="focusable" [value]="root.value()" />
 
                 @if (root.isInvalid()) {
                     <span class="text-destructive pl-2">Invalid Day</span>
diff --git a/skills/radix-ng-examples/references/components/dialog.md b/skills/radix-ng-examples/references/components/dialog.md
index 16bc0150e..ad1a47f55 100644
--- a/skills/radix-ng-examples/references/components/dialog.md
+++ b/skills/radix-ng-examples/references/components/dialog.md
@@ -6,10 +6,10 @@ Dialog composes the shared Portal, Presence, Dismissable Layer, and Focus Scope
 It stays headless: styles and native CSS animations belong to the consumer.
 
 ```typescript
+import { cn, demoButton, demoDialog, demoInput } from '../../storybook/styles';
 import { ChangeDetectionStrategy, Component } from '@angular/core';
 import { LucideX } from '@lucide/angular';
 import { dialogImports } from '@radix-ng/primitives/dialog';
-import { cn, demoButton, demoDialog, demoInput } from '../../storybook/styles';
 
 @Component({
     changeDetection: ChangeDetectionStrategy.Eager,
@@ -17,32 +17,32 @@ import { cn, demoButton, demoDialog, demoInput } from '../../storybook/styles';
     imports: [...dialogImports, LucideX],
     template: `
         <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" />
                     </button>
                 </div>
@@ -129,10 +129,10 @@ custom portal target).
 A modal dialog with an accessible title and description, form fields, and close buttons.
 
 ```typescript
+import { cn, demoButton, demoDialog, demoInput } from '../../storybook/styles';
 import { ChangeDetectionStrategy, Component } from '@angular/core';
 import { LucideX } from '@lucide/angular';
 import { dialogImports } from '@radix-ng/primitives/dialog';
-import { cn, demoButton, demoDialog, demoInput } from '../../storybook/styles';
 
 @Component({
     changeDetection: ChangeDetectionStrategy.Eager,
@@ -140,32 +140,32 @@ import { cn, demoButton, demoDialog, demoInput } from '../../storybook/styles';
     imports: [...dialogImports, LucideX],
     template: `
         <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" />
                     </button>
                 </div>
@@ -186,10 +186,10 @@ export class RdxDialogDefaultComponent {
 Bind `[(open)]` when application state should open or close the dialog programmatically.
 
 ```typescript
+import { cn, demoButton, demoDialog } from '../../storybook/styles';
 import { ChangeDetectionStrategy, Component, signal } from '@angular/core';
 import { LucideX } from '@lucide/angular';
 import { dialogImports } from '@radix-ng/primitives/dialog';
-import { cn, demoButton, demoDialog } from '../../storybook/styles';
 
 @Component({
     changeDetection: ChangeDetectionStrategy.Eager,
@@ -203,15 +203,15 @@ import { cn, demoButton, demoDialog } from '../../storybook/styles';
                 <button [class]="cn(b.base, b.outline, b.size.sm)" (click)="open.set(true)">Open from outside</button>
             </div>
 
-            <div [(open)]="open" rdxDialogRoot>
-                <button [class]="cn(b.base, b.primary, b.size.md)" rdxDialogTrigger>Open dialog</button>
+            <div rdxDialogRoot [(open)]="open">
+                <button rdxDialogTrigger [class]="cn(b.base, b.primary, b.size.md)">Open dialog</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>Controlled dialog</h2>
-                        <p [class]="d.description" rdxDialogDescription>
+                    <div rdxDialogPopup [class]="cn(d.popup, d.popupAnimated)">
+                        <h2 rdxDialogTitle [class]="d.title">Controlled dialog</h2>
+                        <p rdxDialogDescription [class]="d.description">
                             The open state is owned by the component and bound with
                             <code>[(open)]</code>
                             .
@@ -223,7 +223,7 @@ import { cn, demoButton, demoDialog } from '../../storybook/styles';
                             </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" />
                         </button>
                     </div>
@@ -246,10 +246,10 @@ Set `[modal]="false"` to keep document scrolling and outside pointer interaction
 no backdrop in this mode.
 
 ```typescript
+import { cn, demoButton, demoDialog } from '../../storybook/styles';
 import { ChangeDetectionStrategy, Component, signal } from '@angular/core';
 import { LucideX } from '@lucide/angular';
 import { dialogImports } from '@radix-ng/primitives/dialog';
-import { cn, demoButton, demoDialog } from '../../storybook/styles';
 
 @Component({
     changeDetection: ChangeDetectionStrategy.Eager,
@@ -261,17 +261,17 @@ import { cn, demoButton, demoDialog } from '../../storybook/styles';
                 Non-modal: page scrolling and outside pointer interactions stay enabled while the dialog is open.
             </p>
 
-            <div [modal]="false" rdxDialogRoot>
-                <button [class]="cn(b.base, b.primary, b.size.md)" rdxDialogTrigger>Open non-modal dialog</button>
+            <div rdxDialogRoot [modal]="false">
+                <button rdxDialogTrigger [class]="cn(b.base, b.primary, b.size.md)">Open non-modal dialog</button>
 
                 <ng-template rdxDialogPortal>
-                    <div [class]="cn(d.popup, d.popupAnimated)" rdxDialogPopup>
-                        <h2 [class]="d.title" rdxDialogTitle>Non-modal dialog</h2>
-                        <p [class]="d.description" rdxDialogDescription>
+                    <div rdxDialogPopup [class]="cn(d.popup, d.popupAnimated)">
+                        <h2 rdxDialogTitle [class]="d.title">Non-modal dialog</h2>
+                        <p rdxDialogDescription [class]="d.description">
                             There is no backdrop, so you can keep interacting with the rest of the page.
                         </p>
 
-                        <button [class]="d.close" aria-label="Close" rdxDialogClose>
+                        <button aria-label="Close" rdxDialogClose [class]="d.close">
                             <svg aria-hidden="true" lucideX size="16" />
                         </button>
                     </div>
@@ -298,10 +298,10 @@ Use `modal="trap-focus"` to keep keyboard focus inside the dialog while leaving
 outside pointer interactions enabled.
 
 ```typescript
+import { cn, demoButton, demoDialog, demoInput } from '../../storybook/styles';
 import { ChangeDetectionStrategy, Component, signal } from '@angular/core';
 import { LucideX } from '@lucide/angular';
 import { dialogImports } from '@radix-ng/primitives/dialog';
-import { cn, demoButton, demoDialog, demoInput } from '../../storybook/styles';
 
 @Component({
     changeDetection: ChangeDetectionStrategy.Eager,
@@ -315,29 +315,29 @@ import { cn, demoButton, demoDialog, demoInput } from '../../storybook/styles';
             </p>
 
             <div modal="trap-focus" rdxDialogRoot>
-                <button [class]="cn(b.base, b.primary, b.size.md)" rdxDialogTrigger>Open dialog</button>
+                <button rdxDialogTrigger [class]="cn(b.base, b.primary, b.size.md)">Open dialog</button>
 
                 <ng-template rdxDialogPortal>
-                    <div [class]="cn(d.popup, d.popupAnimated)" rdxDialogPopup>
-                        <h2 [class]="d.title" rdxDialogTitle>Focus is trapped</h2>
-                        <p [class]="d.description" rdxDialogDescription>
+                    <div rdxDialogPopup [class]="cn(d.popup, d.popupAnimated)">
+                        <h2 rdxDialogTitle [class]="d.title">Focus is trapped</h2>
+                        <p rdxDialogDescription [class]="d.description">
                             Press Tab and notice focus never leaves the dialog.
                         </p>
 
                         <label [class]="d.field">
                             First field
-                            <input [class]="input" placeholder="Focused when opened" />
+                            <input placeholder="Focused when opened" [class]="input" />
                         </label>
                         <label [class]="d.field">
                             Second field
-                            <input [class]="input" placeholder="Tab to reach me" />
+                            <input placeholder="Tab to reach me" [class]="input" />
                         </label>
 
                         <div [class]="d.footer">
-                            <button [class]="cn(b.base, b.primary, b.size.sm)" rdxDialogClose>Done</button>
+                            <button rdxDialogClose [class]="cn(b.base, b.primary, b.size.sm)">Done</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" />
                         </button>
                     </div>
@@ -365,34 +365,34 @@ Set `disablePointerDismissal` so clicking the backdrop no longer closes the dial
 close buttons still close it.
 
 ```typescript
+import { cn, demoButton, demoDialog } from '../../storybook/styles';
 import { ChangeDetectionStrategy, Component } from '@angular/core';
 import { LucideX } from '@lucide/angular';
 import { dialogImports } from '@radix-ng/primitives/dialog';
-import { cn, demoButton, demoDialog } from '../../storybook/styles';
 
 @Component({
     changeDetection: ChangeDetectionStrategy.Eager,
     selector: 'rdx-dialog-without-dismiss',
     imports: [...dialogImports, LucideX],
     template: `
-        <div [disablePointerDismissal]="true" rdxDialogRoot>
-            <button [class]="cn(b.base, b.primary, b.size.md)" rdxDialogTrigger>Open dialog</button>
+        <div rdxDialogRoot [disablePointerDismissal]="true">
+            <button rdxDialogTrigger [class]="cn(b.base, b.primary, b.size.md)">Open dialog</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>Confirm your choice</h2>
-                    <p [class]="d.description" rdxDialogDescription>
+                <div rdxDialogPopup [class]="cn(d.popup, d.popupAnimated)">
+                    <h2 rdxDialogTitle [class]="d.title">Confirm your choice</h2>
+                    <p rdxDialogDescription [class]="d.description">
                         Clicking the backdrop will not close this dialog. Use a button or press Escape instead.
                     </p>
 
                     <div [class]="d.footer">
-                        <button [class]="cn(b.base, b.outline, b.size.sm)" rdxDialogClose>Cancel</button>
-                        <button [class]="cn(b.base, b.destructive, b.size.sm)" rdxDialogClose>Delete</button>
+                        <button rdxDialogClose [class]="cn(b.base, b.outline, b.size.sm)">Cancel</button>
+                        <button rdxDialogClose [class]="cn(b.base, b.destructive, b.size.sm)">Delete</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" />
                     </button>
                 </div>
@@ -413,10 +413,10 @@ Several `rdxDialogTrigger` buttons can open the same dialog. The active trigger
 exposed on the root so the content can adapt.
 
 ```typescript
+import { cn, demoButton, demoDialog } from '../../storybook/styles';
 import { ChangeDetectionStrategy, Component } from '@angular/core';
 import { LucideX } from '@lucide/angular';
 import { dialogImports } from '@radix-ng/primitives/dialog';
-import { cn, demoButton, demoDialog } from '../../storybook/styles';
 
 @Component({
     changeDetection: ChangeDetectionStrategy.Eager,
@@ -425,24 +425,24 @@ import { cn, demoButton, demoDialog } from '../../storybook/styles';
     template: `
         <div #root="rdxDialogRoot" rdxDialogRoot>
             <div class="flex gap-2">
-                <button [class]="cn(b.base, b.outline, b.size.md)" payload="Lemon" rdxDialogTrigger>Lemon</button>
-                <button [class]="cn(b.base, b.outline, b.size.md)" payload="Lime" rdxDialogTrigger>Lime</button>
-                <button [class]="cn(b.base, b.outline, b.size.md)" payload="Orange" rdxDialogTrigger>Orange</button>
+                <button payload="Lemon" rdxDialogTrigger [class]="cn(b.base, b.outline, b.size.md)">Lemon</button>
+                <button payload="Lime" rdxDialogTrigger [class]="cn(b.base, b.outline, b.size.md)">Lime</button>
+                <button payload="Orange" rdxDialogTrigger [class]="cn(b.base, b.outline, b.size.md)">Orange</button>
             </div>
 
             <ng-template rdxDialogPortal>
-                <div [class]="cn(d.backdrop, d.backdropAnimated)" rdxDialogBackdrop></div>
-                <div [class]="cn(d.popup, d.popupAnimated)" rdxDialogPopup>
-                    <h2 [class]="d.title" rdxDialogTitle>{{ root.payload() || 'Fruit' }}</h2>
-                    <p [class]="d.description" rdxDialogDescription>
+                <div rdxDialogBackdrop [class]="cn(d.backdrop, d.backdropAnimated)"></div>
+                <div rdxDialogPopup [class]="cn(d.popup, d.popupAnimated)">
+                    <h2 rdxDialogTitle [class]="d.title">{{ root.payload() || 'Fruit' }}</h2>
+                    <p rdxDialogDescription [class]="d.description">
                         Every trigger opens the same dialog; the active trigger's
                         <code>payload</code>
                         is shown here.
                     </p>
                     <div [class]="d.footer">
-                        <button [class]="cn(b.base, b.primary, b.size.sm)" rdxDialogClose>Close</button>
+                        <button rdxDialogClose [class]="cn(b.base, b.primary, b.size.sm)">Close</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" />
                     </button>
                 </div>
@@ -462,10 +462,10 @@ export class RdxDialogMultipleTriggersComponent {
 Bind both `[(open)]` and `[(triggerId)]` to choose which trigger is active from component state.
 
 ```typescript
+import { cn, demoButton, demoDialog } from '../../storybook/styles';
 import { ChangeDetectionStrategy, Component, signal } from '@angular/core';
 import { LucideX } from '@lucide/angular';
 import { dialogImports } from '@radix-ng/primitives/dialog';
-import { cn, demoButton, demoDialog } from '../../storybook/styles';
 
 @Component({
     changeDetection: ChangeDetectionStrategy.Eager,
@@ -475,19 +475,19 @@ import { cn, demoButton, demoDialog } from '../../storybook/styles';
         <div class="flex flex-col items-center gap-3">
             <p class="text-muted-foreground text-xs">open: {{ open() }} · triggerId: {{ triggerId() ?? '—' }}</p>
 
-            <div #root="rdxDialogRoot" [(open)]="open" [(triggerId)]="triggerId" rdxDialogRoot>
+            <div #root="rdxDialogRoot" rdxDialogRoot [(open)]="open" [(triggerId)]="triggerId">
                 <div class="flex gap-2">
-                    <button id="account" [class]="cn(b.base, b.outline, b.size.md)" rdxDialogTrigger>Account</button>
-                    <button id="billing" [class]="cn(b.base, b.outline, b.size.md)" rdxDialogTrigger>Billing</button>
+                    <button id="account" rdxDialogTrigger [class]="cn(b.base, b.outline, b.size.md)">Account</button>
+                    <button id="billing" rdxDialogTrigger [class]="cn(b.base, b.outline, b.size.md)">Billing</button>
                 </div>
 
                 <ng-template rdxDialogPortal>
-                    <div [class]="cn(d.backdrop, d.backdropAnimated)" rdxDialogBackdrop></div>
-                    <div [class]="cn(d.popup, d.popupAnimated)" rdxDialogPopup>
-                        <h2 [class]="d.title" rdxDialogTitle>
+                    <div rdxDialogBackdrop [class]="cn(d.backdrop, d.backdropAnimated)"></div>
+                    <div rdxDialogPopup [class]="cn(d.popup, d.popupAnimated)">
+                        <h2 rdxDialogTitle [class]="d.title">
                             {{ triggerId() === 'billing' ? 'Billing' : 'Account' }}
                         </h2>
-                        <p [class]="d.description" rdxDialogDescription>
+                        <p rdxDialogDescription [class]="d.description">
                             Both
                             <code>open</code>
                             and
@@ -495,9 +495,9 @@ import { cn, demoButton, demoDialog } from '../../storybook/styles';
                             are bound, so the active panel is driven from component state.
                         </p>
                         <div [class]="d.footer">
-                            <button [class]="cn(b.base, b.primary, b.size.sm)" rdxDialogClose>Close</button>
+                            <button rdxDialogClose [class]="cn(b.base, b.primary, b.size.sm)">Close</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" />
                         </button>
                     </div>
@@ -530,10 +530,10 @@ Create a shared handle with `createRdxDialogHandle()` when triggers live outside
 handle also supports imperative `open(id)`, `toggle(id)`, and `close()`.
 
 ```typescript
+import { cn, demoButton, demoDialog } from '../../storybook/styles';
 import { ChangeDetectionStrategy, Component } from '@angular/core';
 import { LucideX } from '@lucide/angular';
 import { createRdxDialogHandle, dialogImports } from '@radix-ng/primitives/dialog';
-import { cn, demoButton, demoDialog } from '../../storybook/styles';
 
 @Component({
     changeDetection: ChangeDetectionStrategy.Eager,
@@ -543,10 +543,10 @@ import { cn, demoButton, demoDialog } from '../../storybook/styles';
         <div class="flex flex-col items-center gap-3">
             <!-- Triggers live outside the root and are linked through a shared handle. -->
             <div class="flex gap-2">
-                <button id="settings" [class]="cn(b.base, b.outline, b.size.md)" [handle]="handle" rdxDialogTrigger>
+                <button id="settings" rdxDialogTrigger [class]="cn(b.base, b.outline, b.size.md)" [handle]="handle">
                     Settings
                 </button>
-                <button id="profile" [class]="cn(b.base, b.outline, b.size.md)" [handle]="handle" rdxDialogTrigger>
+                <button id="profile" rdxDialogTrigger [class]="cn(b.base, b.outline, b.size.md)" [handle]="handle">
                     Profile
                 </button>
             </div>
@@ -555,20 +555,20 @@ import { cn, demoButton, demoDialog } from '../../storybook/styles';
                 Open profile imperatively
             </button>
 
-            <div [handle]="handle" rdxDialogRoot>
+            <div rdxDialogRoot [handle]="handle">
                 <ng-template rdxDialogPortal>
-                    <div [class]="cn(d.backdrop, d.backdropAnimated)" rdxDialogBackdrop></div>
-                    <div [class]="cn(d.popup, d.popupAnimated)" rdxDialogPopup>
-                        <h2 [class]="d.title" rdxDialogTitle>Detached triggers</h2>
-                        <p [class]="d.description" rdxDialogDescription>
+                    <div rdxDialogBackdrop [class]="cn(d.backdrop, d.backdropAnimated)"></div>
+                    <div rdxDialogPopup [class]="cn(d.popup, d.popupAnimated)">
+                        <h2 rdxDialogTitle [class]="d.title">Detached triggers</h2>
+                        <p rdxDialogDescription [class]="d.description">
                             The triggers and this dialog are connected with
                             <code>createRdxDialogHandle()</code>
                             rather than DOM nesting.
                         </p>
                         <div [class]="d.footer">
-                            <button [class]="cn(b.base, b.primary, b.size.sm)" rdxDialogClose>Close</button>
+                            <button rdxDialogClose [class]="cn(b.base, b.primary, b.size.sm)">Close</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" />
                         </button>
                     </div>
@@ -591,10 +591,10 @@ Dialogs can be nested. The parent popup gains `data-nested-dialog-open` and the
 `data-nested`, which the demo uses to scale the parent back.
 
 ```typescript
+import { cn, demoButton, demoDialog } from '../../storybook/styles';
 import { ChangeDetectionStrategy, Component } from '@angular/core';
 import { LucideX } from '@lucide/angular';
 import { dialogImports } from '@radix-ng/primitives/dialog';
-import { cn, demoButton, demoDialog } from '../../storybook/styles';
 
 @Component({
     changeDetection: ChangeDetectionStrategy.Eager,
@@ -602,36 +602,36 @@ import { cn, demoButton, demoDialog } from '../../storybook/styles';
     imports: [...dialogImports, LucideX],
     template: `
         <div rdxDialogRoot>
-            <button [class]="cn(b.base, b.primary, b.size.md)" rdxDialogTrigger>Open dialog</button>
+            <button rdxDialogTrigger [class]="cn(b.base, b.primary, b.size.md)">Open dialog</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>Parent dialog</h2>
-                    <p [class]="d.description" rdxDialogDescription>
+                <div rdxDialogPopup [class]="cn(d.popup, d.popupAnimated)">
+                    <h2 rdxDialogTitle [class]="d.title">Parent dialog</h2>
+                    <p rdxDialogDescription [class]="d.description">
                         Opening the nested dialog scales this popup back via
                         <code>[data-nested-dialog-open]</code>
                         .
                     </p>
 
                     <div [class]="d.footer">
-                        <button [class]="cn(b.base, b.outline, b.size.sm)" rdxDialogClose>Close</button>
+                        <button rdxDialogClose [class]="cn(b.base, b.outline, b.size.sm)">Close</button>
 
                         <div rdxDialogRoot>
-                            <button [class]="cn(b.base, b.primary, b.size.sm)" rdxDialogTrigger>Open nested</button>
+                            <button rdxDialogTrigger [class]="cn(b.base, b.primary, b.size.sm)">Open nested</button>
 
                             <ng-template rdxDialogPortal>
-                                <div [class]="cn(d.backdrop, d.backdropAnimated)" rdxDialogBackdrop></div>
-                                <div [class]="cn(d.popup, d.popupAnimated)" rdxDialogPopup>
-                                    <h2 [class]="d.title" rdxDialogTitle>Nested dialog</h2>
-                                    <p [class]="d.description" rdxDialogDescription>
+                                <div rdxDialogBackdrop [class]="cn(d.backdrop, d.backdropAnimated)"></div>
+                                <div rdxDialogPopup [class]="cn(d.popup, d.popupAnimated)">
+                                    <h2 rdxDialogTitle [class]="d.title">Nested dialog</h2>
+                                    <p rdxDialogDescription [class]="d.description">
                                         Escape or the backdrop closes this one first, then the parent.
                                     </p>
                                     <div [class]="d.footer">
-                                        <button [class]="cn(b.base, b.primary, b.size.sm)" rdxDialogClose>Done</button>
+                                        <button rdxDialogClose [class]="cn(b.base, b.primary, b.size.sm)">Done</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" />
                                     </button>
                                 </div>
@@ -639,7 +639,7 @@ import { cn, demoButton, demoDialog } from '../../storybook/styles';
                         </div>
                     </div>
 
-                    <button [class]="d.close" aria-label="Close" rdxDialogClose>
+                    <button aria-label="Close" rdxDialogClose [class]="d.close">
                         <svg aria-hidden="true" lucideX size="16" />
                     </button>
                 </div>
@@ -660,11 +660,11 @@ Drive the dialog with `[(open)]` and listen to `onOpenChange` to intercept a clo
 confirmation dialog when there are unsaved changes.
 
 ```typescript
+import { cn, demoButton, demoDialog, demoInput } from '../../storybook/styles';
 import { ChangeDetectionStrategy, Component, signal } from '@angular/core';
 import { FormsModule } from '@angular/forms';
 import { LucideX } from '@lucide/angular';
 import { dialogImports, RdxDialogOpenChange } from '@radix-ng/primitives/dialog';
-import { cn, demoButton, demoDialog, demoInput } from '../../storybook/styles';
 
 @Component({
     changeDetection: ChangeDetectionStrategy.Eager,
@@ -672,21 +672,21 @@ import { cn, demoButton, demoDialog, demoInput } from '../../storybook/styles';
     imports: [...dialogImports, FormsModule, LucideX],
     template: `
         <!-- The editor dialog is controlled so a close request can be intercepted. -->
-        <div [(open)]="editorOpen" (onOpenChange)="onEditorOpenChange($event)" rdxDialogRoot>
-            <button [class]="cn(b.base, b.primary, b.size.md)" rdxDialogTrigger>Edit description</button>
+        <div rdxDialogRoot [(open)]="editorOpen" (onOpenChange)="onEditorOpenChange($event)">
+            <button rdxDialogTrigger [class]="cn(b.base, b.primary, b.size.md)">Edit description</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 description</h2>
-                    <p [class]="d.description" rdxDialogDescription>
+                <div rdxDialogPopup [class]="cn(d.popup, d.popupAnimated)">
+                    <h2 rdxDialogTitle [class]="d.title">Edit description</h2>
+                    <p rdxDialogDescription [class]="d.description">
                         Closing with unsaved changes asks for confirmation.
                     </p>
 
                     <label [class]="d.field">
                         Description
-                        <input [(ngModel)]="text" [class]="input" placeholder="Type to create changes" />
+                        <input placeholder="Type to create changes" [class]="input" [(ngModel)]="text" />
                     </label>
 
                     <div [class]="d.footer">
@@ -694,7 +694,7 @@ import { cn, demoButton, demoDialog, demoInput } from '../../storybook/styles';
                         <button [class]="cn(b.base, b.primary, b.size.sm)" (click)="save()">Save</button>
                     </div>
 
-                    <button [class]="d.close" (click)="requestClose()" aria-label="Close">
+                    <button aria-label="Close" [class]="d.close" (click)="requestClose()">
                         <svg aria-hidden="true" lucideX size="16" />
                     </button>
                 </div>
@@ -702,12 +702,12 @@ import { cn, demoButton, demoDialog, demoInput } from '../../storybook/styles';
         </div>
 
         <!-- Confirmation dialog, controlled separately. -->
-        <div [(open)]="confirmOpen" rdxDialogRoot>
+        <div rdxDialogRoot [(open)]="confirmOpen">
             <ng-template rdxDialogPortal>
-                <div [class]="cn(d.backdrop, d.backdropAnimated)" rdxDialogBackdrop></div>
-                <div [class]="cn(d.popup, d.popupAnimated)" rdxDialogPopup>
-                    <h2 [class]="d.title" rdxDialogTitle>Discard changes?</h2>
-                    <p [class]="d.description" rdxDialogDescription>Your edits will be lost.</p>
+                <div rdxDialogBackdrop [class]="cn(d.backdrop, d.backdropAnimated)"></div>
+                <div rdxDialogPopup [class]="cn(d.popup, d.popupAnimated)">
+                    <h2 rdxDialogTitle [class]="d.title">Discard changes?</h2>
+                    <p rdxDialogDescription [class]="d.description">Your edits will be lost.</p>
                     <div [class]="d.footer">
                         <button [class]="cn(b.base, b.outline, b.size.sm)" (click)="confirmOpen.set(false)">
                             Keep editing
@@ -770,6 +770,7 @@ screen. Center the popup with the scroll-area content's `min-h-full items-center
 vertical margin so it can grow past the bottom edge.
 
 ```typescript
+import { cn, demoButton, demoCard, demoDialog } from '../../storybook/styles';
 import { ChangeDetectionStrategy, Component } from '@angular/core';
 import { LucideX } from '@lucide/angular';
 import { dialogImports } from '@radix-ng/primitives/dialog';
@@ -780,7 +781,6 @@ import {
     RdxScrollAreaThumb,
     RdxScrollAreaViewport
 } from '@radix-ng/primitives/scroll-area';
-import { cn, demoButton, demoCard, demoDialog } from '../../storybook/styles';
 
 /**
  * Outside-scroll dialog — a 1-1 port of the Base UI example.
@@ -805,10 +805,10 @@ import { cn, demoButton, demoCard, demoDialog } from '../../storybook/styles';
     ],
     template: `
         <div rdxDialogRoot>
-            <button [class]="cn(b.base, b.primary, b.size.md)" rdxDialogTrigger>Open dialog</button>
+            <button rdxDialogTrigger [class]="cn(b.base, b.primary, b.size.md)">Open dialog</button>
 
             <ng-template rdxDialogPortal>
-                <div [class]="cn(d.backdrop, d.backdropAnimated)" rdxDialogBackdrop></div>
+                <div rdxDialogBackdrop [class]="cn(d.backdrop, d.backdropAnimated)"></div>
 
                 <!-- Full-screen viewport hosting a custom scroll area (not native overflow). -->
                 <div class="group/dialog fixed inset-0 z-50" rdxDialogViewport>
@@ -824,6 +824,7 @@ import { cn, demoButton, demoCard, demoDialog } from '../../storybook/styles';
                         <div class="h-full overscroll-contain" rdxScrollAreaViewport>
                             <div class="flex min-h-full items-center justify-center" rdxScrollAreaContent>
                                 <div
+                                    rdxDialogPopup
                                     [class]="
                                         cn(
                                             card,
@@ -831,15 +832,14 @@ import { cn, demoButton, demoCard, demoDialog } from '../../storybook/styles';
                                             d.popupAnimated
                                         )
                                     "
-                                    rdxDialogPopup
                                 >
                                     <div class="relative flex flex-col gap-1 pr-8">
-                                        <h2 [class]="d.title" rdxDialogTitle>Dialog</h2>
-                                        <p [class]="d.description" rdxDialogDescription>
+                                        <h2 rdxDialogTitle [class]="d.title">Dialog</h2>
+                                        <p rdxDialogDescription [class]="d.description">
                                             This layout keeps an outer container scrollable while the dialog can extend
                                             past the bottom edge.
                                         </p>
-                                        <button [class]="d.close" aria-label="Close" rdxDialogClose>
+                                        <button aria-label="Close" rdxDialogClose [class]="d.close">
                                             <svg aria-hidden="true" lucideX size="16" />
                                         </button>
                                     </div>
@@ -982,10 +982,10 @@ export class RdxDialogOutsideScrollComponent {
 Keep the popup fixed on screen and scroll an inner region instead.
 
 ```typescript
+import { cn, demoButton, demoDialog } from '../../storybook/styles';
 import { ChangeDetectionStrategy, Component } from '@angular/core';
 import { LucideX } from '@lucide/angular';
 import { dialogImports } from '@radix-ng/primitives/dialog';
-import { cn, demoButton, demoDialog } from '../../storybook/styles';
 
 @Component({
     changeDetection: ChangeDetectionStrategy.Eager,
@@ -993,15 +993,15 @@ import { cn, demoButton, demoDialog } from '../../storybook/styles';
     imports: [...dialogImports, LucideX],
     template: `
         <div rdxDialogRoot>
-            <button [class]="cn(b.base, b.primary, b.size.md)" rdxDialogTrigger>Open dialog</button>
+            <button rdxDialogTrigger [class]="cn(b.base, b.primary, b.size.md)">Open dialog</button>
 
             <ng-template rdxDialogPortal>
-                <div [class]="cn(d.backdrop, d.backdropAnimated)" rdxDialogBackdrop></div>
+                <div rdxDialogBackdrop [class]="cn(d.backdrop, d.backdropAnimated)"></div>
 
                 <!-- The popup stays fixed on screen; only its body scrolls. -->
-                <div [class]="cn(d.popup, d.popupAnimated, 'flex max-h-[85vh] flex-col')" rdxDialogPopup>
-                    <h2 [class]="d.title" rdxDialogTitle>Release notes</h2>
-                    <p [class]="d.description" rdxDialogDescription>
+                <div rdxDialogPopup [class]="cn(d.popup, d.popupAnimated, 'flex max-h-[85vh] flex-col')">
+                    <h2 rdxDialogTitle [class]="d.title">Release notes</h2>
+                    <p rdxDialogDescription [class]="d.description">
                         Header and footer stay put while the body scrolls.
                     </p>
 
@@ -1012,10 +1012,10 @@ import { cn, demoButton, demoDialog } from '../../storybook/styles';
                     </div>
 
                     <div [class]="d.footer">
-                        <button [class]="cn(b.base, b.primary, b.size.sm)" rdxDialogClose>Got it</button>
+                        <button rdxDialogClose [class]="cn(b.base, b.primary, b.size.sm)">Got it</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" />
                     </button>
                 </div>
@@ -1041,10 +1041,10 @@ individually, so elements such as a close button can sit outside the visible con
 around it stay dismissable.
 
 ```typescript
+import { cn, demoButton, demoDialog } from '../../storybook/styles';
 import { ChangeDetectionStrategy, Component } from '@angular/core';
 import { LucideX } from '@lucide/angular';
 import { dialogImports } from '@radix-ng/primitives/dialog';
-import { cn, demoButton, demoDialog } from '../../storybook/styles';
 
 /**
  * Placing elements outside the popup — a 1-1 port of the Base UI "uncontained" dialog.
@@ -1061,10 +1061,10 @@ import { cn, demoButton, demoDialog } from '../../storybook/styles';
     imports: [...dialogImports, LucideX],
     template: `
         <div rdxDialogRoot>
-            <button [class]="cn(b.base, b.primary, b.size.md)" rdxDialogTrigger>Open dialog</button>
+            <button rdxDialogTrigger [class]="cn(b.base, b.primary, b.size.md)">Open dialog</button>
 
             <ng-template rdxDialogPortal>
-                <div [class]="cn(d.backdrop, d.backdropAnimated)" rdxDialogBackdrop></div>
+                <div rdxDialogBackdrop [class]="cn(d.backdrop, d.backdropAnimated)"></div>
 
                 <div class="fixed inset-0 z-50 grid place-items-center px-4 py-12 xl:py-6" rdxDialogViewport>
                     <!-- Transparent frame: pointer-events-none so the gaps around the card stay dismissable. -->
@@ -1084,8 +1084,8 @@ import { cn, demoButton, demoDialog } from '../../storybook/styles';
                         <div
                             class="border-border bg-card text-card-foreground pointer-events-auto h-full w-full max-w-[70rem] rounded-md border p-6 shadow-sm transition-[scale] duration-500 ease-[cubic-bezier(0.22,1,0.36,1)] group-data-[starting-style]/popup:scale-105"
                         >
-                            <h2 [class]="d.title" rdxDialogTitle>Uncontained dialog</h2>
-                            <p [class]="d.description" rdxDialogDescription>
+                            <h2 rdxDialogTitle [class]="d.title">Uncontained dialog</h2>
+                            <p rdxDialogDescription [class]="d.description">
                                 The close button lives in the popup but is rendered outside this card, above its
                                 top-right corner.
                             </p>
@@ -1108,11 +1108,11 @@ export class RdxDialogUncontainedComponent {
 Control the dialog's `open` state from a menu item to launch it from a `Menu`.
 
 ```typescript
+import { cn, demoButton, demoDialog, demoMenu } from '../../storybook/styles';
 import { ChangeDetectionStrategy, Component, signal } from '@angular/core';
 import { LucideX } from '@lucide/angular';
 import { dialogImports } from '@radix-ng/primitives/dialog';
 import { RdxMenuModule } from '@radix-ng/primitives/menu';
-import { cn, demoButton, demoDialog, demoMenu } from '../../storybook/styles';
 
 @Component({
     changeDetection: ChangeDetectionStrategy.Eager,
@@ -1120,34 +1120,34 @@ import { cn, demoButton, demoDialog, demoMenu } from '../../storybook/styles';
     imports: [...dialogImports, RdxMenuModule, LucideX],
     template: `
         <ng-container #menu="rdxMenuRoot" rdxMenuRoot>
-            <button [class]="cn(b.base, b.outline, b.size.md)" rdxMenuTrigger>Actions</button>
+            <button rdxMenuTrigger [class]="cn(b.base, b.outline, b.size.md)">Actions</button>
 
             @if (menu.open()) {
-                <div [class]="m.positioner" sideOffset="4" rdxMenuPositioner>
-                    <div [class]="m.popup" rdxMenuPopup>
-                        <button [class]="m.item" rdxMenuItem>Duplicate</button>
-                        <button [class]="m.item" (click)="renameOpen.set(true)" rdxMenuItem>Rename…</button>
-                        <div [class]="m.separator" rdxMenuSeparator></div>
-                        <button [class]="m.item" rdxMenuItem>Archive</button>
+                <div sideOffset="4" rdxMenuPositioner [class]="m.positioner">
+                    <div rdxMenuPopup [class]="m.popup">
+                        <button rdxMenuItem [class]="m.item">Duplicate</button>
+                        <button rdxMenuItem [class]="m.item" (click)="renameOpen.set(true)">Rename…</button>
+                        <div rdxMenuSeparator [class]="m.separator"></div>
+                        <button rdxMenuItem [class]="m.item">Archive</button>
                     </div>
                 </div>
             }
         </ng-container>
 
         <!-- Controlled dialog opened from the menu item. -->
-        <div [(open)]="renameOpen" rdxDialogRoot>
+        <div rdxDialogRoot [(open)]="renameOpen">
             <ng-template rdxDialogPortal>
-                <div [class]="cn(d.backdrop, d.backdropAnimated)" rdxDialogBackdrop></div>
-                <div [class]="cn(d.popup, d.popupAnimated)" rdxDialogPopup>
-                    <h2 [class]="d.title" rdxDialogTitle>Rename item</h2>
-                    <p [class]="d.description" rdxDialogDescription>
+                <div rdxDialogBackdrop [class]="cn(d.backdrop, d.backdropAnimated)"></div>
+                <div rdxDialogPopup [class]="cn(d.popup, d.popupAnimated)">
+                    <h2 rdxDialogTitle [class]="d.title">Rename item</h2>
+                    <p rdxDialogDescription [class]="d.description">
                         Opened by controlling the dialog from a menu item.
                     </p>
                     <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>Rename</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)">Rename</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" />
                     </button>
                 </div>
diff --git a/skills/radix-ng-examples/references/components/drawer.md b/skills/radix-ng-examples/references/components/drawer.md
index a0376623e..927ab84ba 100644
--- a/skills/radix-ng-examples/references/components/drawer.md
+++ b/skills/radix-ng-examples/references/components/drawer.md
@@ -8,10 +8,10 @@ modal by default but, unlike Alert Dialog, leaves modality and dismissal fully c
 and native CSS animations belong to the consumer.
 
 ```typescript
+import { cn, demoButton, demoDrawer } from '../../storybook/styles';
 import { ChangeDetectionStrategy, Component } from '@angular/core';
 import { LucideX } from '@lucide/angular';
 import { drawerImports } from '@radix-ng/primitives/drawer';
-import { cn, demoButton, demoDrawer } from '../../storybook/styles';
 
 @Component({
     changeDetection: ChangeDetectionStrategy.Eager,
@@ -19,17 +19,17 @@ import { cn, demoButton, demoDrawer } from '../../storybook/styles';
     imports: [...drawerImports, LucideX],
     template: `
         <div rdxDrawerRoot>
-            <button [class]="cn(b.base, b.primary, b.size.md)" rdxDrawerTrigger>Open drawer</button>
+            <button rdxDrawerTrigger [class]="cn(b.base, b.primary, b.size.md)">Open drawer</button>
 
             <ng-template rdxDrawerPortal>
-                <div [class]="cn(d.backdrop, d.overlayAnimated)" rdxDrawerBackdrop></div>
+                <div rdxDrawerBackdrop [class]="cn(d.backdrop, d.overlayAnimated)"></div>
 
-                <div [class]="cn(d.popup, d.side.bottom)" rdxDrawerPopup>
-                    <div [class]="d.grip" aria-hidden="true"></div>
+                <div rdxDrawerPopup [class]="cn(d.popup, d.side.bottom)">
+                    <div aria-hidden="true" [class]="d.grip"></div>
 
-                    <div [class]="d.body" rdxDrawerContent>
-                        <h2 [class]="d.title" rdxDrawerTitle>Drag me down</h2>
-                        <p [class]="d.description" rdxDrawerDescription>
+                    <div rdxDrawerContent [class]="d.body">
+                        <h2 rdxDrawerTitle [class]="d.title">Drag me down</h2>
+                        <p rdxDrawerDescription [class]="d.description">
                             Swipe the sheet downwards or press Escape to dismiss it. Releasing before the halfway point
                             snaps it back.
                         </p>
@@ -40,12 +40,12 @@ import { cn, demoButton, demoDrawer } from '../../storybook/styles';
                         </p>
 
                         <div [class]="d.footer">
-                            <button [class]="cn(b.base, b.outline, b.size.sm)" rdxDrawerClose>Cancel</button>
-                            <button [class]="cn(b.base, b.primary, b.size.sm)" rdxDrawerClose>Confirm</button>
+                            <button rdxDrawerClose [class]="cn(b.base, b.outline, b.size.sm)">Cancel</button>
+                            <button rdxDrawerClose [class]="cn(b.base, b.primary, b.size.sm)">Confirm</button>
                         </div>
                     </div>
 
-                    <button [class]="d.close" aria-label="Close" rdxDrawerClose>
+                    <button aria-label="Close" rdxDrawerClose [class]="d.close">
                         <svg aria-hidden="true" lucideX size="16"></svg>
                     </button>
                 </div>
@@ -172,10 +172,10 @@ and its slide-out keyframe should hold the closed position with `forwards`:
 A bottom sheet you can swipe down to dismiss, with an accessible title, description, and close buttons.
 
 ```typescript
+import { cn, demoButton, demoDrawer } from '../../storybook/styles';
 import { ChangeDetectionStrategy, Component } from '@angular/core';
 import { LucideX } from '@lucide/angular';
 import { drawerImports } from '@radix-ng/primitives/drawer';
-import { cn, demoButton, demoDrawer } from '../../storybook/styles';
 
 @Component({
     changeDetection: ChangeDetectionStrategy.Eager,
@@ -183,17 +183,17 @@ import { cn, demoButton, demoDrawer } from '../../storybook/styles';
     imports: [...drawerImports, LucideX],
     template: `
         <div rdxDrawerRoot>
-            <button [class]="cn(b.base, b.primary, b.size.md)" rdxDrawerTrigger>Open drawer</button>
+            <button rdxDrawerTrigger [class]="cn(b.base, b.primary, b.size.md)">Open drawer</button>
 
             <ng-template rdxDrawerPortal>
-                <div [class]="cn(d.backdrop, d.overlayAnimated)" rdxDrawerBackdrop></div>
+                <div rdxDrawerBackdrop [class]="cn(d.backdrop, d.overlayAnimated)"></div>
 
-                <div [class]="cn(d.popup, d.side.bottom)" rdxDrawerPopup>
-                    <div [class]="d.grip" aria-hidden="true"></div>
+                <div rdxDrawerPopup [class]="cn(d.popup, d.side.bottom)">
+                    <div aria-hidden="true" [class]="d.grip"></div>
 
-                    <div [class]="d.body" rdxDrawerContent>
-                        <h2 [class]="d.title" rdxDrawerTitle>Drag me down</h2>
-                        <p [class]="d.description" rdxDrawerDescription>
+                    <div rdxDrawerContent [class]="d.body">
+                        <h2 rdxDrawerTitle [class]="d.title">Drag me down</h2>
+                        <p rdxDrawerDescription [class]="d.description">
                             Swipe the sheet downwards or press Escape to dismiss it. Releasing before the halfway point
                             snaps it back.
                         </p>
@@ -204,12 +204,12 @@ import { cn, demoButton, demoDrawer } from '../../storybook/styles';
                         </p>
 
                         <div [class]="d.footer">
-                            <button [class]="cn(b.base, b.outline, b.size.sm)" rdxDrawerClose>Cancel</button>
-                            <button [class]="cn(b.base, b.primary, b.size.sm)" rdxDrawerClose>Confirm</button>
+                            <button rdxDrawerClose [class]="cn(b.base, b.outline, b.size.sm)">Cancel</button>
+                            <button rdxDrawerClose [class]="cn(b.base, b.primary, b.size.sm)">Confirm</button>
                         </div>
                     </div>
 
-                    <button [class]="d.close" aria-label="Close" rdxDrawerClose>
+                    <button aria-label="Close" rdxDrawerClose [class]="d.close">
                         <svg aria-hidden="true" lucideX size="16"></svg>
                     </button>
                 </div>
@@ -230,9 +230,9 @@ Own the open state with `[(open)]` and drive it from anywhere — buttons outsid
 close it alongside the trigger.
 
 ```typescript
+import { cn, demoButton, demoDrawer } from '../../storybook/styles';
 import { ChangeDetectionStrategy, Component, signal } from '@angular/core';
 import { drawerImports } from '@radix-ng/primitives/drawer';
-import { cn, demoButton, demoDrawer } from '../../storybook/styles';
 
 @Component({
     changeDetection: ChangeDetectionStrategy.Eager,
@@ -244,18 +244,18 @@ import { cn, demoButton, demoDrawer } from '../../storybook/styles';
 
             <button [class]="cn(b.base, b.outline, b.size.sm)" (click)="open.set(true)">Open from outside</button>
 
-            <div [(open)]="open" rdxDrawerRoot>
-                <button [class]="cn(b.base, b.primary, b.size.md)" rdxDrawerTrigger>Open drawer</button>
+            <div rdxDrawerRoot [(open)]="open">
+                <button rdxDrawerTrigger [class]="cn(b.base, b.primary, b.size.md)">Open drawer</button>
 
                 <ng-template rdxDrawerPortal>
-                    <div [class]="cn(d.backdrop, d.overlayAnimated)" rdxDrawerBackdrop></div>
+                    <div rdxDrawerBackdrop [class]="cn(d.backdrop, d.overlayAnimated)"></div>
 
-                    <div [class]="cn(d.popup, d.side.bottom)" rdxDrawerPopup>
-                        <div [class]="d.grip" aria-hidden="true"></div>
+                    <div rdxDrawerPopup [class]="cn(d.popup, d.side.bottom)">
+                        <div aria-hidden="true" [class]="d.grip"></div>
 
-                        <div [class]="d.body" rdxDrawerContent>
-                            <h2 [class]="d.title" rdxDrawerTitle>Controlled drawer</h2>
-                            <p [class]="d.description" rdxDrawerDescription>
+                        <div rdxDrawerContent [class]="d.body">
+                            <h2 rdxDrawerTitle [class]="d.title">Controlled drawer</h2>
+                            <p rdxDrawerDescription [class]="d.description">
                                 The open state is owned by the component and bound with
                                 <code>[(open)]</code>
                                 .
@@ -287,9 +287,9 @@ Set `[swipeDirection]` and position the popup with CSS to anchor the drawer to a
 controls the dismiss gesture; the visual side is consumer CSS.
 
 ```typescript
+import { cn, demoButton, demoDrawer } from '../../storybook/styles';
 import { ChangeDetectionStrategy, Component } from '@angular/core';
 import { drawerImports, RdxDrawerSwipeDirection } from '@radix-ng/primitives/drawer';
-import { cn, demoButton, demoDrawer } from '../../storybook/styles';
 
 type DrawerSide = 'top' | 'right' | 'bottom' | 'left';
 
@@ -307,23 +307,23 @@ const SIDES: { side: DrawerSide; swipeDirection: RdxDrawerSwipeDirection }[] = [
     template: `
         <div class="flex flex-wrap gap-3">
             @for (item of sides; track item.side) {
-                <div [swipeDirection]="item.swipeDirection" rdxDrawerRoot>
-                    <button [class]="cn(b.base, b.outline, b.size.md, 'capitalize')" rdxDrawerTrigger>
+                <div rdxDrawerRoot [swipeDirection]="item.swipeDirection">
+                    <button rdxDrawerTrigger [class]="cn(b.base, b.outline, b.size.md, 'capitalize')">
                         {{ item.side }}
                     </button>
 
                     <ng-template rdxDrawerPortal>
-                        <div [class]="cn(d.backdrop, d.overlayAnimated)" rdxDrawerBackdrop></div>
+                        <div rdxDrawerBackdrop [class]="cn(d.backdrop, d.overlayAnimated)"></div>
 
-                        <div [class]="cn(d.popup, d.side[item.side])" rdxDrawerPopup>
-                            <div [class]="d.body" rdxDrawerContent>
-                                <h2 [class]="cn(d.title, 'capitalize')" rdxDrawerTitle>{{ item.side }} drawer</h2>
-                                <p [class]="d.description" rdxDrawerDescription>
+                        <div rdxDrawerPopup [class]="cn(d.popup, d.side[item.side])">
+                            <div rdxDrawerContent [class]="d.body">
+                                <h2 rdxDrawerTitle [class]="cn(d.title, 'capitalize')">{{ item.side }} drawer</h2>
+                                <p rdxDrawerDescription [class]="d.description">
                                     Swipe {{ item.swipeDirection }} to dismiss.
                                 </p>
 
                                 <div [class]="d.footer">
-                                    <button [class]="cn(b.base, b.primary, b.size.sm)" rdxDrawerClose>Done</button>
+                                    <button rdxDrawerClose [class]="cn(b.base, b.primary, b.size.sm)">Done</button>
                                 </div>
                             </div>
                         </div>
@@ -352,9 +352,9 @@ points, with a fixed drag header and independently scrollable content. Add `[sna
 to step one point per release instead of skipping.
 
 ```typescript
+import { cn, demoButton, demoDrawer } from '../../storybook/styles';
 import { ChangeDetectionStrategy, Component } from '@angular/core';
 import { drawerImports, RdxDrawerSnapPoint } from '@radix-ng/primitives/drawer';
-import { cn, demoButton, demoDrawer } from '../../storybook/styles';
 
 const TOP_MARGIN_REM = 1;
 const VISIBLE_SNAP_POINTS_REM = [30];
@@ -368,11 +368,12 @@ function toViewportSnapPoint(heightRem: number): RdxDrawerSnapPoint {
     selector: 'rdx-drawer-snap-points',
     imports: [...drawerImports],
     template: `
-        <div [snapPoints]="snapPoints" rdxDrawerRoot>
-            <button [class]="cn(b.base, b.outline, b.size.sm)" rdxDrawerTrigger>Open snap drawer</button>
+        <div rdxDrawerRoot [snapPoints]="snapPoints">
+            <button rdxDrawerTrigger [class]="cn(b.base, b.outline, b.size.sm)">Open snap drawer</button>
 
             <ng-template rdxDrawerPortal>
                 <div
+                    rdxDrawerBackdrop
                     [class]="
                         cn(
                             'bg-foreground/20 fixed inset-0 min-h-dvh opacity-[calc(1-var(--drawer-swipe-progress))]',
@@ -382,7 +383,6 @@ function toViewportSnapPoint(heightRem: number): RdxDrawerSnapPoint {
                             'data-[ending-style]:opacity-0 data-[starting-style]:opacity-0 data-[swiping]:duration-0'
                         )
                     "
-                    rdxDrawerBackdrop
                 ></div>
 
                 <div class="fixed inset-0 flex touch-none items-end justify-center" rdxDrawerViewport>
@@ -411,7 +411,7 @@ function toViewportSnapPoint(heightRem: number): RdxDrawerSnapPoint {
                                 </div>
 
                                 <div class="flex items-center justify-end gap-3">
-                                    <button [class]="cn(b.base, b.outline, b.size.sm)" rdxDrawerClose>Close</button>
+                                    <button rdxDrawerClose [class]="cn(b.base, b.outline, b.size.sm)">Close</button>
                                 </div>
                             </div>
                         </div>
@@ -438,9 +438,9 @@ Base UI's right-edge swipe-area demo: the non-modal drawer portals back into a l
 `overflow-hidden` container and uses `rdxDrawerViewport` to position the popup inside it.
 
 ```typescript
+import { cn, demoButton, demoDrawer } from '../../storybook/styles';
 import { ChangeDetectionStrategy, Component } from '@angular/core';
 import { drawerImports } from '@radix-ng/primitives/drawer';
-import { cn, demoButton, demoDrawer } from '../../storybook/styles';
 
 @Component({
     changeDetection: ChangeDetectionStrategy.Eager,
@@ -448,10 +448,10 @@ import { cn, demoButton, demoDrawer } from '../../storybook/styles';
     imports: [...drawerImports],
     template: `
         <div
-            class="border-border bg-background text-foreground relative min-h-80 w-full max-w-2xl overflow-hidden border"
             #portalContainer
+            class="border-border bg-background text-foreground relative min-h-80 w-full max-w-2xl overflow-hidden border"
         >
-            <div [modal]="false" swipeDirection="right" rdxDrawerRoot>
+            <div swipeDirection="right" rdxDrawerRoot [modal]="false">
                 <div
                     class="border-primary bg-primary/10 absolute inset-y-0 right-0 z-[1] w-10 cursor-grab border-l-2 border-dashed data-[swiping]:cursor-grabbing"
                     rdxDrawerSwipeArea
@@ -467,8 +467,9 @@ import { cn, demoButton, demoDrawer } from '../../storybook/styles';
                     <p class="text-muted-foreground text-sm">Swipe from the right edge to open the drawer.</p>
                 </div>
 
-                <ng-template [container]="portalContainer" rdxDrawerPortal>
+                <ng-template rdxDrawerPortal [container]="portalContainer">
                     <div
+                        rdxDrawerBackdrop
                         [class]="
                             cn(
                                 'bg-foreground/20 absolute inset-0 opacity-[calc(1-var(--drawer-swipe-progress))]',
@@ -478,7 +479,6 @@ import { cn, demoButton, demoDrawer } from '../../storybook/styles';
                                 'data-[ending-style]:opacity-0 data-[starting-style]:opacity-0 data-[swiping]:duration-0'
                             )
                         "
-                        rdxDrawerBackdrop
                     ></div>
 
                     <div class="absolute inset-0 z-20 flex items-stretch justify-end" rdxDrawerViewport>
@@ -487,12 +487,12 @@ import { cn, demoButton, demoDrawer } from '../../storybook/styles';
                             rdxDrawerPopup
                         >
                             <div class="mx-auto w-full max-w-lg" rdxDrawerContent>
-                                <h2 [class]="d.title" rdxDrawerTitle>Library</h2>
-                                <p [class]="d.description" rdxDrawerDescription>
+                                <h2 rdxDrawerTitle [class]="d.title">Library</h2>
+                                <p rdxDrawerDescription [class]="d.description">
                                     Swipe from the edge whenever you want to jump back into your playlists.
                                 </p>
                                 <div [class]="d.footer">
-                                    <button [class]="cn(b.base, b.outline, b.size.sm)" rdxDrawerClose>Close</button>
+                                    <button rdxDrawerClose [class]="cn(b.base, b.outline, b.size.sm)">Close</button>
                                 </div>
                             </div>
                         </div>
@@ -515,6 +515,7 @@ A taller sheet whose body scrolls. The swipe gesture yields to scrolling inside
 until the scroll reaches its edge, so the drawer only swipes away from the top of the list.
 
 ```typescript
+import { cn, demoButton, demoCard, demoDrawer, demoFocusRing } from '../../storybook/styles';
 import { ChangeDetectionStrategy, Component } from '@angular/core';
 import { drawerImports } from '@radix-ng/primitives/drawer';
 import {
@@ -524,7 +525,6 @@ import {
     RdxScrollAreaThumb,
     RdxScrollAreaViewport
 } from '@radix-ng/primitives/scroll-area';
-import { cn, demoButton, demoCard, demoDrawer, demoFocusRing } from '../../storybook/styles';
 
 const ITEMS = [
     { href: '/react/overview', label: 'Overview' },
@@ -586,14 +586,14 @@ const LONG_LIST = [
     ],
     template: `
         <div rdxDrawerRoot>
-            <button [class]="cn(b.base, b.primary, 'h-8 px-3 text-sm leading-none font-normal')" rdxDrawerTrigger>
+            <button rdxDrawerTrigger [class]="cn(b.base, b.primary, 'h-8 px-3 text-sm leading-none font-normal')">
                 Open mobile menu
             </button>
 
             <ng-template rdxDrawerPortal>
                 <div
-                    [class]="cn(d.backdrop, d.overlayAnimated, 'opacity-[calc(1-var(--drawer-swipe-progress))]')"
                     rdxDrawerBackdrop
+                    [class]="cn(d.backdrop, d.overlayAnimated, 'opacity-[calc(1-var(--drawer-swipe-progress))]')"
                 ></div>
 
                 <div class="group fixed inset-0 z-50" rdxDrawerViewport>
@@ -604,6 +604,7 @@ const LONG_LIST = [
                                 rdxScrollAreaContent
                             >
                                 <div
+                                    rdxDrawerPopup
                                     [class]="
                                         cn(
                                             card,
@@ -615,16 +616,15 @@ const LONG_LIST = [
                                             'min-[42rem]:rounded-2xl min-[42rem]:border'
                                         )
                                     "
-                                    rdxDrawerPopup
                                 >
                                     <nav class="relative flex flex-col px-6 pt-4 pb-6" aria-label="Navigation">
                                         <div class="grid grid-cols-[1fr_auto_1fr] items-start">
                                             <svg class="h-9 w-9" aria-hidden="true" />
                                             <div class="bg-muted h-1.5 w-12 justify-self-center rounded-full"></div>
                                             <button
-                                                [class]="cn(b.base, b.ghost, 'h-8 w-8 justify-self-end p-0')"
                                                 aria-label="Close menu"
                                                 rdxDrawerClose
+                                                [class]="cn(b.base, b.ghost, 'h-8 w-8 justify-self-end p-0')"
                                             >
                                                 <svg
                                                     class="block"
@@ -643,8 +643,8 @@ const LONG_LIST = [
                                         </div>
 
                                         <div class="w-full" rdxDrawerContent>
-                                            <h2 [class]="cn(d.title, 'm-0 mb-1')" rdxDrawerTitle>Menu</h2>
-                                            <p [class]="cn(d.description, 'm-0 mb-5')" rdxDrawerDescription>
+                                            <h2 rdxDrawerTitle [class]="cn(d.title, 'm-0 mb-1')">Menu</h2>
+                                            <p rdxDrawerDescription [class]="cn(d.description, 'm-0 mb-5')">
                                                 Scroll the long list. Flick down from the top to dismiss.
                                             </p>
 
@@ -712,9 +712,9 @@ Set `[modal]="false"` to keep page scrolling and outside pointer interactions av
 drawer is open; there is no backdrop in this mode.
 
 ```typescript
+import { cn, demoButton, demoDrawer } from '../../storybook/styles';
 import { ChangeDetectionStrategy, Component, signal } from '@angular/core';
 import { drawerImports } from '@radix-ng/primitives/drawer';
-import { cn, demoButton, demoDrawer } from '../../storybook/styles';
 
 @Component({
     changeDetection: ChangeDetectionStrategy.Eager,
@@ -727,21 +727,21 @@ import { cn, demoButton, demoDrawer } from '../../storybook/styles';
                 there is no backdrop.
             </p>
 
-            <div [modal]="false" rdxDrawerRoot>
-                <button [class]="cn(b.base, b.primary, b.size.md)" rdxDrawerTrigger>Open non-modal drawer</button>
+            <div rdxDrawerRoot [modal]="false">
+                <button rdxDrawerTrigger [class]="cn(b.base, b.primary, b.size.md)">Open non-modal drawer</button>
 
                 <ng-template rdxDrawerPortal>
-                    <div [class]="cn(d.popup, d.side.bottom, d.overlayAnimated)" rdxDrawerPopup>
-                        <div [class]="d.grip" aria-hidden="true"></div>
+                    <div rdxDrawerPopup [class]="cn(d.popup, d.side.bottom, d.overlayAnimated)">
+                        <div aria-hidden="true" [class]="d.grip"></div>
 
-                        <div [class]="d.body" rdxDrawerContent>
-                            <h2 [class]="d.title" rdxDrawerTitle>Non-modal drawer</h2>
-                            <p [class]="d.description" rdxDrawerDescription>
+                        <div rdxDrawerContent [class]="d.body">
+                            <h2 rdxDrawerTitle [class]="d.title">Non-modal drawer</h2>
+                            <p rdxDrawerDescription [class]="d.description">
                                 Keep interacting with the rest of the page; the counter below still works.
                             </p>
 
                             <div [class]="d.footer">
-                                <button [class]="cn(b.base, b.primary, b.size.sm)" rdxDrawerClose>Close</button>
+                                <button rdxDrawerClose [class]="cn(b.base, b.primary, b.size.sm)">Close</button>
                             </div>
                         </div>
                     </div>
@@ -768,9 +768,9 @@ An iOS-style action sheet: grouped actions with a separated destructive action a
 each closing the drawer.
 
 ```typescript
+import { cn, demoButton, demoDrawer } from '../../storybook/styles';
 import { ChangeDetectionStrategy, Component } from '@angular/core';
 import { drawerImports } from '@radix-ng/primitives/drawer';
-import { cn, demoButton, demoDrawer } from '../../storybook/styles';
 
 /** A full-width action-sheet row. */
 const action = cn(
@@ -784,13 +784,13 @@ const action = cn(
     imports: [...drawerImports],
     template: `
         <div rdxDrawerRoot>
-            <button [class]="cn(b.base, b.primary, b.size.md)" rdxDrawerTrigger>Photo options</button>
+            <button rdxDrawerTrigger [class]="cn(b.base, b.primary, b.size.md)">Photo options</button>
 
             <ng-template rdxDrawerPortal>
-                <div [class]="cn(d.backdrop, d.overlayAnimated)" rdxDrawerBackdrop></div>
+                <div rdxDrawerBackdrop [class]="cn(d.backdrop, d.overlayAnimated)"></div>
 
-                <div [class]="cn(d.popup, d.side.bottom)" rdxDrawerPopup>
-                    <div [class]="d.grip" aria-hidden="true"></div>
+                <div rdxDrawerPopup [class]="cn(d.popup, d.side.bottom)">
+                    <div aria-hidden="true" [class]="d.grip"></div>
 
                     <div class="overflow-y-auto pb-2" rdxDrawerContent>
                         <h2 class="sr-only" rdxDrawerTitle>Photo options</h2>
@@ -800,22 +800,22 @@ const action = cn(
 
                         <!-- Primary group of actions. -->
                         <div class="divide-border border-border flex flex-col divide-y border-y">
-                            <button [class]="action" rdxDrawerClose>Save to Photos</button>
-                            <button [class]="action" rdxDrawerClose>Copy Link</button>
-                            <button [class]="action" rdxDrawerClose>Add to Album</button>
+                            <button rdxDrawerClose [class]="action">Save to Photos</button>
+                            <button rdxDrawerClose [class]="action">Copy Link</button>
+                            <button rdxDrawerClose [class]="action">Add to Album</button>
                         </div>
 
                         <!-- Destructive action, set apart by a full-bleed spacer. -->
                         <div class="bg-muted h-2" aria-hidden="true"></div>
                         <button
-                            [class]="cn(action, 'border-border text-destructive border-b font-medium')"
                             rdxDrawerClose
+                            [class]="cn(action, 'border-border text-destructive border-b font-medium')"
                         >
                             Delete Photo
                         </button>
 
                         <div class="bg-muted h-2" aria-hidden="true"></div>
-                        <button [class]="cn(action, 'font-semibold')" rdxDrawerClose>Cancel</button>
+                        <button rdxDrawerClose [class]="cn(action, 'font-semibold')">Cancel</button>
                     </div>
                 </div>
             </ng-template>
@@ -839,9 +839,9 @@ handling the parent drawer while a nested drawer is open. Use the CSS variable i
 popup max-height.
 
 ```typescript
+import { cn, demoButton, demoDrawer, demoInput } from '../../storybook/styles';
 import { ChangeDetectionStrategy, Component } from '@angular/core';
 import { drawerImports } from '@radix-ng/primitives/drawer';
-import { cn, demoButton, demoDrawer, demoInput } from '../../storybook/styles';
 
 @Component({
     changeDetection: ChangeDetectionStrategy.Eager,
@@ -849,10 +849,10 @@ import { cn, demoButton, demoDrawer, demoInput } from '../../storybook/styles';
     imports: [...drawerImports],
     template: `
         <div rdxDrawerRoot>
-            <button [class]="cn(b.base, b.primary, b.size.md)" rdxDrawerTrigger>Edit delivery</button>
+            <button rdxDrawerTrigger [class]="cn(b.base, b.primary, b.size.md)">Edit delivery</button>
 
             <ng-template rdxDrawerPortal>
-                <div [class]="cn(d.backdrop, d.overlayAnimated)" rdxDrawerBackdrop></div>
+                <div rdxDrawerBackdrop [class]="cn(d.backdrop, d.overlayAnimated)"></div>
 
                 <div
                     class="fixed inset-0 z-50 flex items-end justify-center px-4 pb-[calc(env(safe-area-inset-bottom,0px)+var(--drawer-keyboard-inset,0px))] transition-[padding-bottom] duration-200"
@@ -869,8 +869,8 @@ import { cn, demoButton, demoDrawer, demoInput } from '../../storybook/styles';
                             class="max-h-[inherit] [scroll-padding-bottom:calc(var(--drawer-keyboard-inset,0px)+4rem)] overflow-y-auto px-6 pb-6"
                         >
                             <div class="mb-5">
-                                <h2 [class]="d.title" rdxDrawerTitle>Delivery details</h2>
-                                <p [class]="d.description" rdxDrawerDescription>
+                                <h2 rdxDrawerTitle [class]="d.title">Delivery details</h2>
+                                <p rdxDrawerDescription [class]="d.description">
                                     Confirm the address and contact fields before placing the order.
                                 </p>
                             </div>
@@ -878,22 +878,22 @@ import { cn, demoButton, demoDrawer, demoInput } from '../../storybook/styles';
                             <div class="grid gap-4">
                                 <label class="grid gap-1.5">
                                     <span class="text-foreground text-sm font-medium">Name</span>
-                                    <input [class]="i.base" value="Ada Lovelace" />
+                                    <input value="Ada Lovelace" [class]="i.base" />
                                 </label>
 
                                 <label class="grid gap-1.5">
                                     <span class="text-foreground text-sm font-medium">Phone</span>
-                                    <input [class]="i.base" inputmode="tel" value="+1 415 555 0142" />
+                                    <input inputmode="tel" value="+1 415 555 0142" [class]="i.base" />
                                 </label>
 
                                 <label class="grid gap-1.5">
                                     <span class="text-foreground text-sm font-medium">Street address</span>
-                                    <input [class]="i.base" value="12 Market Street" />
+                                    <input value="12 Market Street" [class]="i.base" />
                                 </label>
 
                                 <label class="grid gap-1.5">
                                     <span class="text-foreground text-sm font-medium">Apartment</span>
-                                    <input [class]="i.base" placeholder="Optional" />
+                                    <input placeholder="Optional" [class]="i.base" />
                                 </label>
 
                                 <label class="grid gap-1.5">
@@ -907,10 +907,10 @@ Leave at reception if nobody answers.</textarea
                             </div>
 
                             <div class="bg-card sticky bottom-0 mt-6 flex justify-end gap-2 border-t py-4">
-                                <button [class]="cn(b.base, b.outline, b.size.sm)" type="button" rdxDrawerClose>
+                                <button type="button" rdxDrawerClose [class]="cn(b.base, b.outline, b.size.sm)">
                                     Cancel
                                 </button>
-                                <button [class]="cn(b.base, b.primary, b.size.sm)" type="button" rdxDrawerClose>
+                                <button type="button" rdxDrawerClose [class]="cn(b.base, b.primary, b.size.sm)">
                                     Save
                                 </button>
                             </div>
@@ -936,9 +936,9 @@ detected through the dialog hierarchy, so every parent gains `data-nested-drawer
 `--nested-drawers`) and recedes behind the one in front.
 
 ```typescript
+import { cn, demoButton, demoDrawer } from '../../storybook/styles';
 import { ChangeDetectionStrategy, Component, input } from '@angular/core';
 import { drawerImports } from '@radix-ng/primitives/drawer';
-import { cn, demoButton, demoDrawer } from '../../storybook/styles';
 
 /**
  * A self-recursive drawer: each level's content hosts the trigger for the next level, so drawers
@@ -951,19 +951,19 @@ import { cn, demoButton, demoDrawer } from '../../storybook/styles';
     imports: [...drawerImports],
     template: `
         <div rdxDrawerRoot>
-            <button [class]="cn(b.base, level() === 1 ? b.primary : b.outline, b.size.md)" rdxDrawerTrigger>
+            <button rdxDrawerTrigger [class]="cn(b.base, level() === 1 ? b.primary : b.outline, b.size.md)">
                 {{ level() === 1 ? 'Open drawer' : 'Open drawer ' + level() }}
             </button>
 
             <ng-template rdxDrawerPortal>
-                <div [class]="cn(d.backdrop, d.overlayAnimated)" rdxDrawerBackdrop></div>
+                <div rdxDrawerBackdrop [class]="cn(d.backdrop, d.overlayAnimated)"></div>
 
-                <div [class]="cn(d.popup, d.side.bottom)" rdxDrawerPopup>
-                    <div [class]="d.grip" aria-hidden="true"></div>
+                <div rdxDrawerPopup [class]="cn(d.popup, d.side.bottom)">
+                    <div aria-hidden="true" [class]="d.grip"></div>
 
-                    <div [class]="d.body" rdxDrawerContent>
-                        <h2 [class]="d.title" rdxDrawerTitle>Drawer level {{ level() }}</h2>
-                        <p [class]="d.description" rdxDrawerDescription>
+                    <div rdxDrawerContent [class]="d.body">
+                        <h2 rdxDrawerTitle [class]="d.title">Drawer level {{ level() }}</h2>
+                        <p rdxDrawerDescription [class]="d.description">
                             @if (level() < max()) {
                                 Open another to stack it on top — this one scales back and peeks behind it.
                             } @else {
@@ -975,7 +975,7 @@ import { cn, demoButton, demoDrawer } from '../../storybook/styles';
                             @if (level() < max()) {
                                 <rdx-drawer-nested [level]="level() + 1" [max]="max()" />
                             }
-                            <button [class]="cn(b.base, b.outline, b.size.sm)" rdxDrawerClose>Close</button>
+                            <button rdxDrawerClose [class]="cn(b.base, b.outline, b.size.sm)">Close</button>
                         </div>
                     </div>
                 </div>
@@ -1004,9 +1004,9 @@ Both gain `[data-active]`, `--drawer-swipe-progress`, `--nested-drawers`, and
 gesture.
 
 ```typescript
+import { cn, demoButton, demoDrawer } from '../../storybook/styles';
 import { ChangeDetectionStrategy, Component } from '@angular/core';
 import { drawerImports } from '@radix-ng/primitives/drawer';
-import { cn, demoButton, demoDrawer } from '../../storybook/styles';
 
 @Component({
     changeDetection: ChangeDetectionStrategy.Eager,
@@ -1014,7 +1014,7 @@ import { cn, demoButton, demoDrawer } from '../../storybook/styles';
     imports: [...drawerImports],
     template: `
         <div class="w-full" rdxDrawerProvider>
-            <div class="relative w-full overflow-hidden [--bleed:3rem]" #portalContainer>
+            <div #portalContainer class="relative w-full overflow-hidden [--bleed:3rem]">
                 <div class="bg-foreground absolute inset-0" rdxDrawerIndentBackground></div>
 
                 <div
@@ -1022,10 +1022,10 @@ import { cn, demoButton, demoDrawer } from '../../storybook/styles';
                     rdxDrawerIndent
                 >
                     <div class="flex min-h-80 items-center justify-center">
-                        <div [modal]="false" rdxDrawerRoot>
-                            <button [class]="cn(b.base, b.outline, b.size.sm)" rdxDrawerTrigger>Open drawer</button>
+                        <div rdxDrawerRoot [modal]="false">
+                            <button rdxDrawerTrigger [class]="cn(b.base, b.outline, b.size.sm)">Open drawer</button>
 
-                            <ng-template [container]="portalContainer" rdxDrawerPortal>
+                            <ng-template rdxDrawerPortal [container]="portalContainer">
                                 <div
                                     class="bg-foreground/20 absolute inset-0 opacity-[calc(1-var(--drawer-swipe-progress))] transition-opacity duration-[450ms] ease-[cubic-bezier(0.32,0.72,0,1)] data-[ending-style]:opacity-0 data-[starting-style]:opacity-0 data-[swiping]:duration-0"
                                     rdxDrawerBackdrop
@@ -1038,14 +1038,14 @@ import { cn, demoButton, demoDrawer } from '../../storybook/styles';
                                     >
                                         <div class="bg-muted mx-auto mb-4 h-1 w-12"></div>
                                         <div class="mx-auto w-full max-w-lg" rdxDrawerContent>
-                                            <h2 class="text-center" [class]="cn(d.title, 'text-center')" rdxDrawerTitle>
+                                            <h2 class="text-center" rdxDrawerTitle [class]="cn(d.title, 'text-center')">
                                                 Notifications
                                             </h2>
-                                            <p [class]="cn(d.description, 'mb-6 text-center')" rdxDrawerDescription>
+                                            <p rdxDrawerDescription [class]="cn(d.description, 'mb-6 text-center')">
                                                 You are all caught up. Good job!
                                             </p>
                                             <div class="flex justify-center gap-3">
-                                                <button [class]="cn(b.base, b.outline, b.size.sm)" rdxDrawerClose>
+                                                <button rdxDrawerClose [class]="cn(b.base, b.outline, b.size.sm)">
                                                     Close
                                                 </button>
                                             </div>
@@ -1073,9 +1073,9 @@ Create a shared handle with `createRdxDrawerHandle()` when triggers live outside
 handle also supports imperative `open(id)`, `toggle(id)`, and `close()`.
 
 ```typescript
+import { cn, demoButton, demoDrawer } from '../../storybook/styles';
 import { ChangeDetectionStrategy, Component } from '@angular/core';
 import { createRdxDrawerHandle, drawerImports } from '@radix-ng/primitives/drawer';
-import { cn, demoButton, demoDrawer } from '../../storybook/styles';
 
 @Component({
     changeDetection: ChangeDetectionStrategy.Eager,
@@ -1085,10 +1085,10 @@ import { cn, demoButton, demoDrawer } from '../../storybook/styles';
         <div class="flex flex-col items-center gap-3">
             <!-- Triggers live outside the root and are linked through a shared handle. -->
             <div class="flex gap-2">
-                <button id="cart" [class]="cn(b.base, b.outline, b.size.md)" [handle]="handle" rdxDrawerTrigger>
+                <button id="cart" rdxDrawerTrigger [class]="cn(b.base, b.outline, b.size.md)" [handle]="handle">
                     Cart
                 </button>
-                <button id="account" [class]="cn(b.base, b.outline, b.size.md)" [handle]="handle" rdxDrawerTrigger>
+                <button id="account" rdxDrawerTrigger [class]="cn(b.base, b.outline, b.size.md)" [handle]="handle">
                     Account
                 </button>
             </div>
@@ -1097,21 +1097,21 @@ import { cn, demoButton, demoDrawer } from '../../storybook/styles';
                 Open account imperatively
             </button>
 
-            <div [handle]="handle" rdxDrawerRoot>
+            <div rdxDrawerRoot [handle]="handle">
                 <ng-template rdxDrawerPortal>
-                    <div [class]="cn(d.backdrop, d.overlayAnimated)" rdxDrawerBackdrop></div>
+                    <div rdxDrawerBackdrop [class]="cn(d.backdrop, d.overlayAnimated)"></div>
 
-                    <div [class]="cn(d.popup, d.side.right)" rdxDrawerPopup>
-                        <div [class]="d.body" rdxDrawerContent>
-                            <h2 [class]="d.title" rdxDrawerTitle>Detached triggers</h2>
-                            <p [class]="d.description" rdxDrawerDescription>
+                    <div rdxDrawerPopup [class]="cn(d.popup, d.side.right)">
+                        <div rdxDrawerContent [class]="d.body">
+                            <h2 rdxDrawerTitle [class]="d.title">Detached triggers</h2>
+                            <p rdxDrawerDescription [class]="d.description">
                                 The triggers and this drawer are connected with
                                 <code>createRdxDrawerHandle()</code>
                                 rather than DOM nesting.
                             </p>
 
                             <div [class]="d.footer">
-                                <button [class]="cn(b.base, b.primary, b.size.sm)" rdxDrawerClose>Close</button>
+                                <button rdxDrawerClose [class]="cn(b.base, b.primary, b.size.sm)">Close</button>
                             </div>
                         </div>
                     </div>
diff --git a/skills/radix-ng-examples/references/components/editable.md b/skills/radix-ng-examples/references/components/editable.md
index 816685890..c45f1e0b4 100644
--- a/skills/radix-ng-examples/references/components/editable.md
+++ b/skills/radix-ng-examples/references/components/editable.md
@@ -3,6 +3,7 @@
 #### An inline text field that swaps a read-only preview for an editable input.
 
 ```typescript
+import { cn, demoButton, demoEditable } from '../../storybook/styles';
 import { ChangeDetectionStrategy, Component } from '@angular/core';
 import {
     RdxEditableArea,
@@ -13,7 +14,6 @@ import {
     RdxEditableRoot,
     RdxEditableSubmitTrigger
 } from '@radix-ng/primitives/editable';
-import { cn, demoButton, demoEditable } from '../../storybook/styles';
 
 @Component({
     changeDetection: ChangeDetectionStrategy.Eager,
@@ -30,25 +30,25 @@ import { cn, demoButton, demoEditable } from '../../storybook/styles';
     template: `
         <div
             #root="rdxEditableRoot"
-            [class]="e.root"
             rdxEditableRoot
             value="Click to edit"
             placeholder="Enter text…"
             submitMode="both"
+            [class]="e.root"
         >
             <div rdxEditableArea>
-                <span #preview="rdxEditablePreview" [class]="e.preview" rdxEditablePreview>
+                <span #preview="rdxEditablePreview" rdxEditablePreview [class]="e.preview">
                     {{ root.value() || preview.placeholder() }}
                 </span>
-                <input [class]="e.input" rdxEditableInput aria-label="Inline value" />
+                <input rdxEditableInput aria-label="Inline value" [class]="e.input" />
             </div>
 
             @if (!root.isEditing()) {
-                <button [class]="cn(b.base, b.outline, b.size.sm)" rdxEditableEditTrigger>Edit</button>
+                <button rdxEditableEditTrigger [class]="cn(b.base, b.outline, b.size.sm)">Edit</button>
             } @else {
                 <div [class]="e.controls">
-                    <button [class]="cn(b.base, b.primary, b.size.sm)" rdxEditableSubmitTrigger>Save</button>
-                    <button [class]="cn(b.base, b.ghost, b.size.sm)" rdxEditableCancelTrigger>Cancel</button>
+                    <button rdxEditableSubmitTrigger [class]="cn(b.base, b.primary, b.size.sm)">Save</button>
+                    <button rdxEditableCancelTrigger [class]="cn(b.base, b.ghost, b.size.sm)">Cancel</button>
                 </div>
             }
         </div>
@@ -133,6 +133,7 @@ submitValue(change: RdxEditableValueChangeEvent) {
 Set `activationMode="dblclick"` so the preview only enters edit mode on double-click instead of on focus.
 
 ```typescript
+import { cn, demoButton, demoEditable } from '../../storybook/styles';
 import { ChangeDetectionStrategy, Component } from '@angular/core';
 import {
     RdxEditableArea,
@@ -142,7 +143,6 @@ import {
     RdxEditableRoot,
     RdxEditableSubmitTrigger
 } from '@radix-ng/primitives/editable';
-import { cn, demoButton, demoEditable } from '../../storybook/styles';
 
 @Component({
     changeDetection: ChangeDetectionStrategy.Eager,
@@ -158,24 +158,24 @@ import { cn, demoButton, demoEditable } from '../../storybook/styles';
     template: `
         <div
             #root="rdxEditableRoot"
-            [class]="e.root"
             rdxEditableRoot
             value="Double-click to edit"
             placeholder="Enter text…"
             activationMode="dblclick"
             submitMode="both"
+            [class]="e.root"
         >
             <div rdxEditableArea>
-                <span #preview="rdxEditablePreview" [class]="e.preview" rdxEditablePreview>
+                <span #preview="rdxEditablePreview" rdxEditablePreview [class]="e.preview">
                     {{ root.value() || preview.placeholder() }}
                 </span>
-                <input [class]="e.input" rdxEditableInput aria-label="Inline value" />
+                <input rdxEditableInput aria-label="Inline value" [class]="e.input" />
             </div>
 
             @if (root.isEditing()) {
                 <div [class]="e.controls">
-                    <button [class]="cn(b.base, b.primary, b.size.sm)" rdxEditableSubmitTrigger>Save</button>
-                    <button [class]="cn(b.base, b.ghost, b.size.sm)" rdxEditableCancelTrigger>Cancel</button>
+                    <button rdxEditableSubmitTrigger [class]="cn(b.base, b.primary, b.size.sm)">Save</button>
+                    <button rdxEditableCancelTrigger [class]="cn(b.base, b.ghost, b.size.sm)">Cancel</button>
                 </div>
             }
         </div>
@@ -210,7 +210,7 @@ import { RdxEditableArea, RdxEditableInput, RdxEditablePreview, RdxEditableRoot
             autoResize
             submitMode="both"
         >
-            <div [class]="area" rdxEditableArea>
+            <div rdxEditableArea [class]="area">
                 <span #preview="rdxEditablePreview" rdxEditablePreview>
                     {{ root.value() || preview.placeholder() }}
                 </span>
diff --git a/skills/radix-ng-examples/references/components/field.md b/skills/radix-ng-examples/references/components/field.md
index 01bb74e30..6da035a71 100644
--- a/skills/radix-ng-examples/references/components/field.md
+++ b/skills/radix-ng-examples/references/components/field.md
@@ -6,13 +6,13 @@ Field is form-agnostic. It does not replace Angular Forms; pass validation state
 Forms, template-driven forms, or Signal Forms when using them.
 
 ```typescript
-import { ChangeDetectionStrategy, Component } from '@angular/core';
 import { RdxFieldControl } from '../src/field-control';
 import { RdxFieldDescription } from '../src/field-description';
 import { RdxFieldError } from '../src/field-error';
 import { RdxFieldLabel } from '../src/field-label';
 import { RdxFieldRoot } from '../src/field-root';
 import { fieldDescription, fieldError, fieldLabel } from './field.shared';
+import { ChangeDetectionStrategy, Component } from '@angular/core';
 
 @Component({
     changeDetection: ChangeDetectionStrategy.Eager,
@@ -20,10 +20,10 @@ import { fieldDescription, fieldError, fieldLabel } from './field.shared';
     imports: [RdxFieldRoot, RdxFieldLabel, RdxFieldControl, RdxFieldDescription, RdxFieldError],
     template: `
         <div class="flex w-80 flex-col gap-2" rdxFieldRoot required>
-            <label [class]="labelClass" rdxFieldLabel>Email</label>
-            <input [class]="inputClass" rdxFieldControl type="email" placeholder="name@example.com" />
-            <p [class]="descriptionClass" rdxFieldDescription>Used for account notifications.</p>
-            <p [class]="errorClass" rdxFieldError>Enter a valid email address.</p>
+            <label rdxFieldLabel [class]="labelClass">Email</label>
+            <input rdxFieldControl type="email" placeholder="name@example.com" [class]="inputClass" />
+            <p rdxFieldDescription [class]="descriptionClass">Used for account notifications.</p>
+            <p rdxFieldError [class]="errorClass">Enter a valid email address.</p>
         </div>
     `
 })
@@ -93,13 +93,13 @@ reflecting the field's validation state; its `disabled` is OR'd with the root's.
 The root owns the relationships between the field parts.
 
 ```typescript
-import { ChangeDetectionStrategy, Component } from '@angular/core';
 import { RdxFieldControl } from '../src/field-control';
 import { RdxFieldDescription } from '../src/field-description';
 import { RdxFieldError } from '../src/field-error';
 import { RdxFieldLabel } from '../src/field-label';
 import { RdxFieldRoot } from '../src/field-root';
 import { fieldDescription, fieldError, fieldLabel } from './field.shared';
+import { ChangeDetectionStrategy, Component } from '@angular/core';
 
 @Component({
     changeDetection: ChangeDetectionStrategy.Eager,
@@ -107,10 +107,10 @@ import { fieldDescription, fieldError, fieldLabel } from './field.shared';
     imports: [RdxFieldRoot, RdxFieldLabel, RdxFieldControl, RdxFieldDescription, RdxFieldError],
     template: `
         <div class="flex w-80 flex-col gap-2" rdxFieldRoot required>
-            <label [class]="labelClass" rdxFieldLabel>Email</label>
-            <input [class]="inputClass" rdxFieldControl type="email" placeholder="name@example.com" />
-            <p [class]="descriptionClass" rdxFieldDescription>Used for account notifications.</p>
-            <p [class]="errorClass" rdxFieldError>Enter a valid email address.</p>
+            <label rdxFieldLabel [class]="labelClass">Email</label>
+            <input rdxFieldControl type="email" placeholder="name@example.com" [class]="inputClass" />
+            <p rdxFieldDescription [class]="descriptionClass">Used for account notifications.</p>
+            <p rdxFieldError [class]="errorClass">Enter a valid email address.</p>
         </div>
     `
 })
@@ -128,13 +128,13 @@ export class FieldDefaultExample {
 Pass invalid, dirty, and touched state from your form model.
 
 ```typescript
-import { ChangeDetectionStrategy, Component } from '@angular/core';
 import { RdxFieldControl } from '../src/field-control';
 import { RdxFieldDescription } from '../src/field-description';
 import { RdxFieldError } from '../src/field-error';
 import { RdxFieldLabel } from '../src/field-label';
 import { RdxFieldRoot } from '../src/field-root';
 import { fieldDescription, fieldError, fieldInputInvalid, fieldLabel } from './field.shared';
+import { ChangeDetectionStrategy, Component } from '@angular/core';
 
 @Component({
     changeDetection: ChangeDetectionStrategy.Eager,
@@ -142,16 +142,16 @@ import { fieldDescription, fieldError, fieldInputInvalid, fieldLabel } from './f
     imports: [RdxFieldRoot, RdxFieldLabel, RdxFieldControl, RdxFieldDescription, RdxFieldError],
     template: `
         <div class="flex w-80 flex-col gap-2" rdxFieldRoot invalid required dirty touched>
-            <label [class]="labelClass" rdxFieldLabel>Workspace name</label>
+            <label rdxFieldLabel [class]="labelClass">Workspace name</label>
             <input
-                [class]="inputClass"
                 rdxFieldControl
                 value=""
                 placeholder="acme"
                 aria-errormessage="workspace-error"
+                [class]="inputClass"
             />
-            <p [class]="descriptionClass" rdxFieldDescription>Use lowercase letters and hyphens.</p>
-            <p id="workspace-error" [class]="errorClass" rdxFieldError>Workspace name is required.</p>
+            <p rdxFieldDescription [class]="descriptionClass">Use lowercase letters and hyphens.</p>
+            <p id="workspace-error" rdxFieldError [class]="errorClass">Workspace name is required.</p>
         </div>
     `
 })
@@ -169,14 +169,14 @@ Angular Forms remains responsible for validation. Field reflects the resulting s
 relationships.
 
 ```typescript
-import { ChangeDetectionStrategy, Component, inject, signal } from '@angular/core';
-import { FormBuilder, ReactiveFormsModule, Validators } from '@angular/forms';
 import { RdxFieldControl } from '../src/field-control';
 import { RdxFieldDescription } from '../src/field-description';
 import { RdxFieldError } from '../src/field-error';
 import { RdxFieldLabel } from '../src/field-label';
 import { RdxFieldRoot } from '../src/field-root';
 import { fieldDescription, fieldError, fieldInputInvalid, fieldLabel, fieldSubmitButton } from './field.shared';
+import { ChangeDetectionStrategy, Component, inject, signal } from '@angular/core';
+import { FormBuilder, ReactiveFormsModule, Validators } from '@angular/forms';
 
 @Component({
     changeDetection: ChangeDetectionStrategy.Eager,
@@ -186,17 +186,17 @@ import { fieldDescription, fieldError, fieldInputInvalid, fieldLabel, fieldSubmi
         <form class="flex w-80 flex-col gap-3" [formGroup]="form" (ngSubmit)="submit()">
             <div
                 class="flex flex-col gap-2"
+                rdxFieldRoot
+                required
                 [invalid]="email.invalid && (email.touched || submitted())"
                 [dirty]="email.dirty"
                 [touched]="email.touched"
                 [disabled]="email.disabled"
-                rdxFieldRoot
-                required
             >
-                <label [class]="labelClass" rdxFieldLabel>Email</label>
-                <input [class]="inputClass" rdxFieldControl type="email" formControlName="email" />
-                <p [class]="descriptionClass" rdxFieldDescription>Use the email connected to your account.</p>
-                <p [class]="errorClass" rdxFieldError>
+                <label rdxFieldLabel [class]="labelClass">Email</label>
+                <input rdxFieldControl type="email" formControlName="email" [class]="inputClass" />
+                <p rdxFieldDescription [class]="descriptionClass">Use the email connected to your account.</p>
+                <p rdxFieldError [class]="errorClass">
                     @if (email.hasError('required')) {
                         Email is required.
                     } @else {
@@ -205,7 +205,7 @@ import { fieldDescription, fieldError, fieldInputInvalid, fieldLabel, fieldSubmi
                 </p>
             </div>
 
-            <button [class]="buttonClass" type="submit">Submit</button>
+            <button type="submit" [class]="buttonClass">Submit</button>
         </form>
     `
 })
@@ -240,26 +240,26 @@ For custom controls, pass `filled` and `focused` state to the root when the nati
 enough.
 
 ```typescript
-import { ChangeDetectionStrategy, Component, computed, signal } from '@angular/core';
 import { RdxFieldControl } from '../src/field-control';
 import { RdxFieldDescription } from '../src/field-description';
 import { RdxFieldError } from '../src/field-error';
 import { RdxFieldLabel } from '../src/field-label';
 import { RdxFieldRoot } from '../src/field-root';
 import { fieldCustomTrigger, fieldDescription, fieldError, fieldLabel } from './field.shared';
+import { ChangeDetectionStrategy, Component, computed, signal } from '@angular/core';
 
 @Component({
     changeDetection: ChangeDetectionStrategy.Eager,
     selector: 'field-custom-control-example',
     imports: [RdxFieldRoot, RdxFieldLabel, RdxFieldControl, RdxFieldDescription, RdxFieldError],
     template: `
-        <div class="flex w-80 flex-col gap-2" [filled]="selected()" [focused]="open()" rdxFieldRoot>
-            <label [class]="labelClass" rdxFieldLabel>Plan</label>
-            <button [class]="triggerClass" (click)="open.update((value) => !value)" type="button" rdxFieldControl>
+        <div class="flex w-80 flex-col gap-2" rdxFieldRoot [filled]="selected()" [focused]="open()">
+            <label rdxFieldLabel [class]="labelClass">Plan</label>
+            <button type="button" rdxFieldControl [class]="triggerClass" (click)="open.update((value) => !value)">
                 {{ selected() ? 'Pro' : 'Choose a plan' }}
             </button>
-            <p [class]="descriptionClass" rdxFieldDescription>Custom controls can pass state into the field root.</p>
-            <p [class]="errorClass" rdxFieldError>Choose a plan.</p>
+            <p rdxFieldDescription [class]="descriptionClass">Custom controls can pass state into the field root.</p>
+            <p rdxFieldError [class]="errorClass">Choose a plan.</p>
         </div>
     `
 })
diff --git a/skills/radix-ng-examples/references/components/fieldset.md b/skills/radix-ng-examples/references/components/fieldset.md
index f251e14d1..04500cdea 100644
--- a/skills/radix-ng-examples/references/components/fieldset.md
+++ b/skills/radix-ng-examples/references/components/fieldset.md
@@ -90,12 +90,12 @@ Disabled state is applied to the native fieldset and exposed to the legend for s
 A larger form groups account details and submits values from fields inside the fieldset.
 
 ```typescript
+import { cn, demoButton, demoInput } from '../../storybook/styles';
 import { ChangeDetectionStrategy, Component, inject } from '@angular/core';
 import { FormBuilder, ReactiveFormsModule, Validators } from '@angular/forms';
 import { RdxFieldDescription, RdxFieldError, RdxFieldLabel, RdxFieldRoot } from '@radix-ng/primitives/field';
 import { RdxFieldsetLegend, RdxFieldsetRoot } from '@radix-ng/primitives/fieldset';
 import { RdxInputDirective } from '@radix-ng/primitives/input';
-import { cn, demoButton, demoInput } from '../../storybook/styles';
 
 @Component({
     changeDetection: ChangeDetectionStrategy.Eager,
@@ -112,21 +112,21 @@ import { cn, demoButton, demoInput } from '../../storybook/styles';
     ],
     template: `
         <form class="w-96 space-y-5" [formGroup]="form" (ngSubmit)="submit()">
-            <fieldset class="border-border space-y-4 rounded-md border p-4" [disabled]="submitting" rdxFieldsetRoot>
+            <fieldset class="border-border space-y-4 rounded-md border p-4" rdxFieldsetRoot [disabled]="submitting">
                 <legend class="text-foreground px-1 text-sm font-semibold data-[disabled]:opacity-50" rdxFieldsetLegend>
                     Account details
                 </legend>
 
-                <div class="space-y-2" [invalid]="isInvalid('firstName')" [disabled]="submitting" rdxFieldRoot required>
+                <div class="space-y-2" rdxFieldRoot required [invalid]="isInvalid('firstName')" [disabled]="submitting">
                     <label class="text-foreground text-sm font-medium" rdxFieldLabel>First name</label>
-                    <input [class]="inputClass" rdxInput autocomplete="given-name" formControlName="firstName" />
+                    <input rdxInput autocomplete="given-name" formControlName="firstName" [class]="inputClass" />
                     <p class="text-muted-foreground text-sm" rdxFieldDescription>Used in your workspace profile.</p>
                     <p class="text-destructive text-sm" rdxFieldError>First name is required.</p>
                 </div>
 
-                <div class="space-y-2" [invalid]="isInvalid('email')" [disabled]="submitting" rdxFieldRoot required>
+                <div class="space-y-2" rdxFieldRoot required [invalid]="isInvalid('email')" [disabled]="submitting">
                     <label class="text-foreground text-sm font-medium" rdxFieldLabel>Email</label>
-                    <input [class]="inputClass" rdxInput autocomplete="email" formControlName="email" type="email" />
+                    <input rdxInput autocomplete="email" formControlName="email" type="email" [class]="inputClass" />
                     <p class="text-muted-foreground text-sm" rdxFieldDescription>
                         We'll send the invite confirmation here.
                     </p>
@@ -149,7 +149,7 @@ import { cn, demoButton, demoInput } from '../../storybook/styles';
                 </div>
             </fieldset>
 
-            <button [class]="cn(button.base, button.primary, button.size.md)" type="submit">
+            <button type="submit" [class]="cn(button.base, button.primary, button.size.md)">
                 {{ submitting ? 'Submitting...' : 'Create account' }}
             </button>
 
diff --git a/skills/radix-ng-examples/references/components/form.md b/skills/radix-ng-examples/references/components/form.md
index 453c14164..99acd9d56 100644
--- a/skills/radix-ng-examples/references/components/form.md
+++ b/skills/radix-ng-examples/references/components/form.md
@@ -8,10 +8,10 @@ systems (or Field inputs) stay the source of validity. It maps external/server e
 and resets field interaction state on native reset.
 
 ```typescript
-import { ChangeDetectionStrategy, Component, signal } from '@angular/core';
-import { RdxFieldControl, RdxFieldError, RdxFieldLabel, RdxFieldRoot } from '@radix-ng/primitives/field';
 import { RdxFormErrors, RdxFormRoot, RdxFormSubmitEvent } from '../index';
 import { formError, formField, formInput, formLabel, formSubmit } from './form.shared';
+import { ChangeDetectionStrategy, Component, signal } from '@angular/core';
+import { RdxFieldControl, RdxFieldError, RdxFieldLabel, RdxFieldRoot } from '@radix-ng/primitives/field';
 
 /**
  * Server-error mapping with clear-on-edit. The submit handler simulates a backend that rejects a
@@ -25,18 +25,18 @@ import { formError, formField, formInput, formLabel, formSubmit } from './form.s
     template: `
         <form
             class="flex w-80 flex-col gap-4"
+            rdxFormRoot
             [errors]="errors()"
             (onFormSubmit)="onSubmit($event)"
             (onClearErrors)="errors.set($event)"
-            rdxFormRoot
         >
-            <div [class]="field" name="email" rdxFieldRoot>
-                <label [class]="label" rdxFieldLabel>Email</label>
-                <input [class]="input" name="email" type="email" rdxFieldControl placeholder="name@example.com" />
-                <p #emailError="rdxFieldError" [class]="error" rdxFieldError>{{ emailError.messages().join(' ') }}</p>
+            <div name="email" rdxFieldRoot [class]="field">
+                <label rdxFieldLabel [class]="label">Email</label>
+                <input name="email" type="email" rdxFieldControl placeholder="name@example.com" [class]="input" />
+                <p #emailError="rdxFieldError" rdxFieldError [class]="error">{{ emailError.messages().join(' ') }}</p>
             </div>
 
-            <button [class]="submit" type="submit">Create account</button>
+            <button type="submit" [class]="submit">Create account</button>
             @if (success()) {
                 <p class="text-muted-foreground text-sm">Account created for {{ success() }}.</p>
             }
@@ -116,10 +116,10 @@ error maps onto the field by `name` and clears when you edit it.
 > so an always-fresh reference would resurrect cleared errors on the next change-detection pass.
 
 ```typescript
-import { ChangeDetectionStrategy, Component, signal } from '@angular/core';
-import { RdxFieldControl, RdxFieldError, RdxFieldLabel, RdxFieldRoot } from '@radix-ng/primitives/field';
 import { RdxFormErrors, RdxFormRoot, RdxFormSubmitEvent } from '../index';
 import { formError, formField, formInput, formLabel, formSubmit } from './form.shared';
+import { ChangeDetectionStrategy, Component, signal } from '@angular/core';
+import { RdxFieldControl, RdxFieldError, RdxFieldLabel, RdxFieldRoot } from '@radix-ng/primitives/field';
 
 /**
  * Server-error mapping with clear-on-edit. The submit handler simulates a backend that rejects a
@@ -133,18 +133,18 @@ import { formError, formField, formInput, formLabel, formSubmit } from './form.s
     template: `
         <form
             class="flex w-80 flex-col gap-4"
+            rdxFormRoot
             [errors]="errors()"
             (onFormSubmit)="onSubmit($event)"
             (onClearErrors)="errors.set($event)"
-            rdxFormRoot
         >
-            <div [class]="field" name="email" rdxFieldRoot>
-                <label [class]="label" rdxFieldLabel>Email</label>
-                <input [class]="input" name="email" type="email" rdxFieldControl placeholder="name@example.com" />
-                <p #emailError="rdxFieldError" [class]="error" rdxFieldError>{{ emailError.messages().join(' ') }}</p>
+            <div name="email" rdxFieldRoot [class]="field">
+                <label rdxFieldLabel [class]="label">Email</label>
+                <input name="email" type="email" rdxFieldControl placeholder="name@example.com" [class]="input" />
+                <p #emailError="rdxFieldError" rdxFieldError [class]="error">{{ emailError.messages().join(' ') }}</p>
             </div>
 
-            <button [class]="submit" type="submit">Create account</button>
+            <button type="submit" [class]="submit">Create account</button>
             @if (success()) {
                 <p class="text-muted-foreground text-sm">Account created for {{ success() }}.</p>
             }
@@ -181,10 +181,10 @@ Native `reset` clears external errors and every field's interaction state, and r
 reverted values.
 
 ```typescript
-import { ChangeDetectionStrategy, Component, signal } from '@angular/core';
-import { RdxFieldControl, RdxFieldError, RdxFieldLabel, RdxFieldRoot } from '@radix-ng/primitives/field';
 import { RdxFormErrors, RdxFormRoot, RdxFormSubmitEvent } from '../index';
 import { formError, formField, formInput, formLabel, formReset, formSubmit } from './form.shared';
+import { ChangeDetectionStrategy, Component, signal } from '@angular/core';
+import { RdxFieldControl, RdxFieldError, RdxFieldLabel, RdxFieldRoot } from '@radix-ng/primitives/field';
 
 /**
  * Native `reset` clears external errors and every field's interaction state (touched/dirty/focused),
@@ -198,21 +198,21 @@ import { formError, formField, formInput, formLabel, formReset, formSubmit } fro
     template: `
         <form
             class="flex w-80 flex-col gap-4"
+            rdxFormRoot
             [errors]="errors()"
             (onFormSubmit)="onSubmit($event)"
             (onClearErrors)="errors.set($event)"
             (reset)="verified.set(false)"
-            rdxFormRoot
         >
-            <div [class]="field" name="code" rdxFieldRoot>
-                <label [class]="label" rdxFieldLabel>Access code</label>
-                <input [class]="input" name="code" rdxFieldControl placeholder="1234" />
-                <p #codeError="rdxFieldError" [class]="error" rdxFieldError>{{ codeError.messages().join(' ') }}</p>
+            <div name="code" rdxFieldRoot [class]="field">
+                <label rdxFieldLabel [class]="label">Access code</label>
+                <input name="code" rdxFieldControl placeholder="1234" [class]="input" />
+                <p #codeError="rdxFieldError" rdxFieldError [class]="error">{{ codeError.messages().join(' ') }}</p>
             </div>
 
             <div class="flex gap-2">
-                <button [class]="submit" type="submit">Verify</button>
-                <button [class]="reset" type="reset">Reset</button>
+                <button type="submit" [class]="submit">Verify</button>
+                <button type="reset" [class]="reset">Reset</button>
             </div>
             @if (verified()) {
                 <p class="text-muted-foreground text-sm">Code accepted.</p>
@@ -249,11 +249,11 @@ Reactive Forms owns validity; Form adds the aggregate attributes and submit hand
 `<form>`. `(ngSubmit)` is the source of truth — Form never stops propagation.
 
 ```typescript
+import { RdxFormRoot } from '../index';
+import { formError, formField, formInput, formLabel, formSubmit } from './form.shared';
 import { ChangeDetectionStrategy, Component, inject, signal } from '@angular/core';
 import { FormBuilder, ReactiveFormsModule, Validators } from '@angular/forms';
 import { RdxFieldControl, RdxFieldError, RdxFieldLabel, RdxFieldRoot } from '@radix-ng/primitives/field';
-import { RdxFormRoot } from '../index';
-import { formError, formField, formInput, formLabel, formSubmit } from './form.shared';
 
 /**
  * Reactive Forms owns validity; `RdxFormRoot` adds the aggregate `data-*` attributes and submit/reset
@@ -265,19 +265,19 @@ import { formError, formField, formInput, formLabel, formSubmit } from './form.s
     selector: 'form-reactive-forms-example',
     imports: [ReactiveFormsModule, RdxFormRoot, RdxFieldRoot, RdxFieldLabel, RdxFieldControl, RdxFieldError],
     template: `
-        <form class="flex w-80 flex-col gap-4" [formGroup]="form" (ngSubmit)="submit()" rdxFormRoot>
+        <form class="flex w-80 flex-col gap-4" rdxFormRoot [formGroup]="form" (ngSubmit)="submit()">
             <div
+                name="email"
+                rdxFieldRoot
+                required
                 [class]="field"
                 [invalid]="email.invalid && (email.touched || submitted())"
                 [touched]="email.touched"
                 [dirty]="email.dirty"
-                name="email"
-                rdxFieldRoot
-                required
             >
-                <label [class]="label" rdxFieldLabel>Email</label>
-                <input [class]="input" type="email" formControlName="email" rdxFieldControl />
-                <p [class]="error" rdxFieldError>
+                <label rdxFieldLabel [class]="label">Email</label>
+                <input type="email" formControlName="email" rdxFieldControl [class]="input" />
+                <p rdxFieldError [class]="error">
                     @if (email.hasError('required')) {
                         Email is required.
                     } @else {
@@ -286,7 +286,7 @@ import { formError, formField, formInput, formLabel, formSubmit } from './form.s
                 </p>
             </div>
 
-            <button [class]="submitButton" type="submit">Submit</button>
+            <button type="submit" [class]="submitButton">Submit</button>
         </form>
     `
 })
@@ -321,10 +321,10 @@ No `@angular/forms` at all — a valid submit serializes the form's `FormData` i
 (repeated names collapse into arrays).
 
 ```typescript
-import { ChangeDetectionStrategy, Component, signal } from '@angular/core';
-import { RdxFieldControl, RdxFieldLabel, RdxFieldRoot } from '@radix-ng/primitives/field';
 import { RdxFormRoot, RdxFormSubmitEvent } from '../index';
 import { formField, formInput, formLabel, formSubmit } from './form.shared';
+import { ChangeDetectionStrategy, Component, signal } from '@angular/core';
+import { RdxFieldControl, RdxFieldLabel, RdxFieldRoot } from '@radix-ng/primitives/field';
 
 /**
  * No `@angular/forms` at all — just native controls. On a valid submit the Form serializes the form's
@@ -335,17 +335,17 @@ import { formField, formInput, formLabel, formSubmit } from './form.shared';
     selector: 'form-native-controls-example',
     imports: [RdxFormRoot, RdxFieldRoot, RdxFieldLabel, RdxFieldControl],
     template: `
-        <form class="flex w-80 flex-col gap-4" (onFormSubmit)="onSubmit($event)" rdxFormRoot>
-            <div [class]="field" name="name" rdxFieldRoot>
-                <label [class]="label" rdxFieldLabel>Name</label>
-                <input [class]="input" name="name" rdxFieldControl value="Ada" />
+        <form class="flex w-80 flex-col gap-4" rdxFormRoot (onFormSubmit)="onSubmit($event)">
+            <div name="name" rdxFieldRoot [class]="field">
+                <label rdxFieldLabel [class]="label">Name</label>
+                <input name="name" rdxFieldControl value="Ada" [class]="input" />
             </div>
-            <div [class]="field" name="role" rdxFieldRoot>
-                <label [class]="label" rdxFieldLabel>Role</label>
-                <input [class]="input" name="role" rdxFieldControl value="Engineer" />
+            <div name="role" rdxFieldRoot [class]="field">
+                <label rdxFieldLabel [class]="label">Role</label>
+                <input name="role" rdxFieldControl value="Engineer" [class]="input" />
             </div>
 
-            <button [class]="submit" type="submit">Submit</button>
+            <button type="submit" [class]="submit">Submit</button>
             @if (values()) {
                 <pre class="bg-muted text-foreground rounded-md p-3 text-xs">{{ values() }}</pre>
             }
diff --git a/skills/radix-ng-examples/references/components/input.md b/skills/radix-ng-examples/references/components/input.md
index a2cd27d0b..fe41928cb 100644
--- a/skills/radix-ng-examples/references/components/input.md
+++ b/skills/radix-ng-examples/references/components/input.md
@@ -47,10 +47,10 @@ Disables the native input and exposes `data-disabled`.
 Connects the input to Field label, description, and validation state.
 
 ```typescript
-import { ChangeDetectionStrategy, Component } from '@angular/core';
-import { RdxFieldDescription, RdxFieldError, RdxFieldLabel, RdxFieldRoot } from '@radix-ng/primitives/field';
 import { demoInput } from '../../storybook/styles';
 import { RdxInputDirective } from '../src/input.directive';
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { RdxFieldDescription, RdxFieldError, RdxFieldLabel, RdxFieldRoot } from '@radix-ng/primitives/field';
 
 @Component({
     changeDetection: ChangeDetectionStrategy.Eager,
@@ -59,7 +59,7 @@ import { RdxInputDirective } from '../src/input.directive';
     template: `
         <div class="flex w-80 flex-col gap-2" rdxFieldRoot required>
             <label class="text-foreground text-sm font-medium" rdxFieldLabel>Email</label>
-            <input [class]="inputClass" rdxInput type="email" placeholder="name@example.com" />
+            <input rdxInput type="email" placeholder="name@example.com" [class]="inputClass" />
             <p class="text-muted-foreground text-sm" rdxFieldDescription>Used for account notifications.</p>
             <p class="text-destructive text-sm" rdxFieldError>Enter a valid email address.</p>
         </div>
@@ -75,11 +75,11 @@ export class InputFieldExample {
 Uses Angular reactive forms while Field reflects validation state.
 
 ```typescript
+import { demoInput } from '../../storybook/styles';
+import { RdxInputDirective } from '../src/input.directive';
 import { ChangeDetectionStrategy, Component } from '@angular/core';
 import { FormControl, ReactiveFormsModule, Validators } from '@angular/forms';
 import { RdxFieldDescription, RdxFieldError, RdxFieldLabel, RdxFieldRoot } from '@radix-ng/primitives/field';
-import { demoInput } from '../../storybook/styles';
-import { RdxInputDirective } from '../src/input.directive';
 
 @Component({
     changeDetection: ChangeDetectionStrategy.Eager,
@@ -88,14 +88,14 @@ import { RdxInputDirective } from '../src/input.directive';
     template: `
         <div
             class="flex w-80 flex-col gap-2"
+            rdxFieldRoot
+            required
             [invalid]="email.invalid && (email.dirty || email.touched)"
             [dirty]="email.dirty"
             [touched]="email.touched"
-            rdxFieldRoot
-            required
         >
             <label class="text-foreground text-sm font-medium" rdxFieldLabel>Email</label>
-            <input [class]="inputClass" [formControl]="email" rdxInput type="email" placeholder="name@example.com" />
+            <input rdxInput type="email" placeholder="name@example.com" [class]="inputClass" [formControl]="email" />
             <p class="text-muted-foreground text-sm" rdxFieldDescription>Use the email connected to your account.</p>
             <p class="text-destructive text-sm" rdxFieldError>Email must be valid.</p>
         </div>
@@ -112,6 +112,8 @@ export class InputReactiveFormsExample {
 Combines multiple inputs, Field state, a checkbox, and a submit button in a larger form.
 
 ```typescript
+import { cn, demoButton, demoCheckbox, demoInput } from '../../storybook/styles';
+import { RdxInputDirective } from '../src/input.directive';
 import { ChangeDetectionStrategy, Component } from '@angular/core';
 import { FormControl, FormGroup, ReactiveFormsModule, Validators } from '@angular/forms';
 import { LucideCheck } from '@lucide/angular';
@@ -123,8 +125,6 @@ import {
     RdxCheckboxRootDirective
 } from '@radix-ng/primitives/checkbox';
 import { RdxFieldDescription, RdxFieldError, RdxFieldLabel, RdxFieldRoot } from '@radix-ng/primitives/field';
-import { cn, demoButton, demoCheckbox, demoInput } from '../../storybook/styles';
-import { RdxInputDirective } from '../src/input.directive';
 
 @Component({
     changeDetection: ChangeDetectionStrategy.Eager,
@@ -148,47 +148,47 @@ import { RdxInputDirective } from '../src/input.directive';
             <div class="grid grid-cols-2 gap-3">
                 <div
                     class="flex flex-col gap-2"
+                    rdxFieldRoot
+                    required
                     [invalid]="firstName.invalid && (firstName.dirty || firstName.touched)"
                     [dirty]="firstName.dirty"
                     [touched]="firstName.touched"
-                    rdxFieldRoot
-                    required
                 >
                     <label class="text-foreground text-sm font-medium" rdxFieldLabel>First name</label>
-                    <input [class]="inputClass" rdxInput autocomplete="given-name" formControlName="firstName" />
+                    <input rdxInput autocomplete="given-name" formControlName="firstName" [class]="inputClass" />
                     <p class="text-destructive text-sm" rdxFieldError>Enter your first name.</p>
                 </div>
 
                 <div
                     class="flex flex-col gap-2"
+                    rdxFieldRoot
+                    required
                     [invalid]="lastName.invalid && (lastName.dirty || lastName.touched)"
                     [dirty]="lastName.dirty"
                     [touched]="lastName.touched"
-                    rdxFieldRoot
-                    required
                 >
                     <label class="text-foreground text-sm font-medium" rdxFieldLabel>Last name</label>
-                    <input [class]="inputClass" rdxInput autocomplete="family-name" formControlName="lastName" />
+                    <input rdxInput autocomplete="family-name" formControlName="lastName" [class]="inputClass" />
                     <p class="text-destructive text-sm" rdxFieldError>Enter your last name.</p>
                 </div>
             </div>
 
             <div
                 class="flex flex-col gap-2"
+                rdxFieldRoot
+                required
                 [invalid]="email.invalid && (email.dirty || email.touched)"
                 [dirty]="email.dirty"
                 [touched]="email.touched"
-                rdxFieldRoot
-                required
             >
                 <label class="text-foreground text-sm font-medium" rdxFieldLabel>Email</label>
                 <input
-                    [class]="inputClass"
                     rdxInput
                     type="email"
                     autocomplete="email"
                     placeholder="name@example.com"
                     formControlName="email"
+                    [class]="inputClass"
                 />
                 <p class="text-muted-foreground text-sm" rdxFieldDescription>
                     Used for product updates and account recovery.
@@ -198,19 +198,19 @@ import { RdxInputDirective } from '../src/input.directive';
 
             <div
                 class="flex flex-col gap-2"
+                rdxFieldRoot
+                required
                 [invalid]="password.invalid && (password.dirty || password.touched)"
                 [dirty]="password.dirty"
                 [touched]="password.touched"
-                rdxFieldRoot
-                required
             >
                 <label class="text-foreground text-sm font-medium" rdxFieldLabel>Password</label>
                 <input
-                    [class]="inputClass"
                     rdxInput
                     type="password"
                     autocomplete="new-password"
                     formControlName="password"
+                    [class]="inputClass"
                 />
                 <p class="text-muted-foreground text-sm" rdxFieldDescription>Use at least 8 characters.</p>
                 <p class="text-destructive text-sm" rdxFieldError>Password must be at least 8 characters.</p>
@@ -218,8 +218,8 @@ import { RdxInputDirective } from '../src/input.directive';
 
             <div class="flex items-start gap-3">
                 <div rdxCheckboxRoot required formControlName="terms">
-                    <button id="signup-terms" [class]="checkbox.button" type="button" rdxCheckboxButton>
-                        <svg [class]="checkbox.indicator" rdxCheckboxIndicator size="16" lucideCheck />
+                    <button id="signup-terms" type="button" rdxCheckboxButton [class]="checkbox.button">
+                        <svg rdxCheckboxIndicator size="16" lucideCheck [class]="checkbox.indicator" />
                     </button>
                     <input rdxCheckboxInput />
                 </div>
@@ -229,7 +229,7 @@ import { RdxInputDirective } from '../src/input.directive';
                 </label>
             </div>
 
-            <button [class]="submitClass" rdxButton type="submit">Create workspace</button>
+            <button rdxButton type="submit" [class]="submitClass">Create workspace</button>
         </form>
     `
 })
diff --git a/skills/radix-ng-examples/references/components/menu.md b/skills/radix-ng-examples/references/components/menu.md
index 72939f9a2..a854b2986 100644
--- a/skills/radix-ng-examples/references/components/menu.md
+++ b/skills/radix-ng-examples/references/components/menu.md
@@ -6,9 +6,9 @@ Menu composes the shared Popper, Dismissable Layer, and Focus Scope primitives.
 headless — state is exposed through `data-*` attributes and the consumer provides all visual styles.
 
 ```typescript
+import { cn, demoButton, demoMenu } from '../../storybook/styles';
 import { ChangeDetectionStrategy, Component } from '@angular/core';
 import { RdxMenuModule } from '@radix-ng/primitives/menu';
-import { cn, demoButton, demoMenu } from '../../storybook/styles';
 
 @Component({
     selector: 'rdx-menu-default',
@@ -16,16 +16,16 @@ import { cn, demoButton, demoMenu } from '../../storybook/styles';
     changeDetection: ChangeDetectionStrategy.OnPush,
     template: `
         <ng-container #root="rdxMenuRoot" rdxMenuRoot>
-            <button [class]="cn(b.base, b.outline, b.size.md)" rdxMenuTrigger>File</button>
-
-            <div *rdxMenuPortal [class]="m.positioner" sideOffset="4" rdxMenuPositioner>
-                <div [class]="m.popup" rdxMenuPopup>
-                    <button [class]="m.item" rdxMenuItem>New Tab</button>
-                    <button [class]="m.item" rdxMenuItem>New Window</button>
-                    <button [class]="m.item" [disabled]="true" rdxMenuItem>New Private Window</button>
-                    <div [class]="m.separator" rdxMenuSeparator></div>
-                    <button [class]="m.item" rdxMenuItem>Save Page As…</button>
-                    <button [class]="m.item" rdxMenuItem>Print…</button>
+            <button rdxMenuTrigger [class]="cn(b.base, b.outline, b.size.md)">File</button>
+
+            <div *rdxMenuPortal sideOffset="4" rdxMenuPositioner [class]="m.positioner">
+                <div rdxMenuPopup [class]="m.popup">
+                    <button rdxMenuItem [class]="m.item">New Tab</button>
+                    <button rdxMenuItem [class]="m.item">New Window</button>
+                    <button rdxMenuItem [class]="m.item" [disabled]="true">New Private Window</button>
+                    <div rdxMenuSeparator [class]="m.separator"></div>
+                    <button rdxMenuItem [class]="m.item">Save Page As…</button>
+                    <button rdxMenuItem [class]="m.item">Print…</button>
                 </div>
             </div>
         </ng-container>
@@ -170,9 +170,9 @@ content multi-root.
 A basic dropdown with regular items, a disabled item, and a separator.
 
 ```typescript
+import { cn, demoButton, demoMenu } from '../../storybook/styles';
 import { ChangeDetectionStrategy, Component } from '@angular/core';
 import { RdxMenuModule } from '@radix-ng/primitives/menu';
-import { cn, demoButton, demoMenu } from '../../storybook/styles';
 
 @Component({
     selector: 'rdx-menu-default',
@@ -180,16 +180,16 @@ import { cn, demoButton, demoMenu } from '../../storybook/styles';
     changeDetection: ChangeDetectionStrategy.OnPush,
     template: `
         <ng-container #root="rdxMenuRoot" rdxMenuRoot>
-            <button [class]="cn(b.base, b.outline, b.size.md)" rdxMenuTrigger>File</button>
-
-            <div *rdxMenuPortal [class]="m.positioner" sideOffset="4" rdxMenuPositioner>
-                <div [class]="m.popup" rdxMenuPopup>
-                    <button [class]="m.item" rdxMenuItem>New Tab</button>
-                    <button [class]="m.item" rdxMenuItem>New Window</button>
-                    <button [class]="m.item" [disabled]="true" rdxMenuItem>New Private Window</button>
-                    <div [class]="m.separator" rdxMenuSeparator></div>
-                    <button [class]="m.item" rdxMenuItem>Save Page As…</button>
-                    <button [class]="m.item" rdxMenuItem>Print…</button>
+            <button rdxMenuTrigger [class]="cn(b.base, b.outline, b.size.md)">File</button>
+
+            <div *rdxMenuPortal sideOffset="4" rdxMenuPositioner [class]="m.positioner">
+                <div rdxMenuPopup [class]="m.popup">
+                    <button rdxMenuItem [class]="m.item">New Tab</button>
+                    <button rdxMenuItem [class]="m.item">New Window</button>
+                    <button rdxMenuItem [class]="m.item" [disabled]="true">New Private Window</button>
+                    <div rdxMenuSeparator [class]="m.separator"></div>
+                    <button rdxMenuItem [class]="m.item">Save Page As…</button>
+                    <button rdxMenuItem [class]="m.item">Print…</button>
                 </div>
             </div>
         </ng-container>
@@ -247,9 +247,9 @@ to add a grace period).
 ![Submenu safe polygon — a triangular safe zone spans from the pointer to the popup, so the pointer can cut diagonally across the sibling row below without closing the submenu.](/menu-safe-polygon.svg)
 
 ```typescript
+import { cn, demoButton, demoMenu } from '../../storybook/styles';
 import { ChangeDetectionStrategy, Component } from '@angular/core';
 import { RdxMenuModule } from '@radix-ng/primitives/menu';
-import { cn, demoButton, demoMenu } from '../../storybook/styles';
 
 @Component({
     selector: 'rdx-menu-nested',
@@ -257,67 +257,67 @@ import { cn, demoButton, demoMenu } from '../../storybook/styles';
     changeDetection: ChangeDetectionStrategy.OnPush,
     template: `
         <ng-container #root="rdxMenuRoot" rdxMenuRoot>
-            <button [class]="cn(b.base, b.outline, b.size.md)" rdxMenuTrigger>Edit</button>
+            <button rdxMenuTrigger [class]="cn(b.base, b.outline, b.size.md)">Edit</button>
 
-            <div *rdxMenuPortal [class]="m.positioner" sideOffset="4" rdxMenuPositioner>
-                <div [class]="m.popup" rdxMenuPopup>
-                    <button [class]="m.item" rdxMenuItem>Undo</button>
-                    <button [class]="m.item" rdxMenuItem>Redo</button>
-                    <div [class]="m.separator" rdxMenuSeparator></div>
+            <div *rdxMenuPortal sideOffset="4" rdxMenuPositioner [class]="m.positioner">
+                <div rdxMenuPopup [class]="m.popup">
+                    <button rdxMenuItem [class]="m.item">Undo</button>
+                    <button rdxMenuItem [class]="m.item">Redo</button>
+                    <div rdxMenuSeparator [class]="m.separator"></div>
 
                     <!-- Submenu: inner rdxMenuRoot provides submenu context -->
                     <ng-container #findSub="rdxMenuRoot" rdxMenuRoot>
-                        <button [class]="cn(m.item, 'justify-between')" rdxMenuSubTrigger>
+                        <button rdxMenuSubTrigger [class]="cn(m.item, 'justify-between')">
                             Find
                             <span class="text-muted-foreground text-xs">›</span>
                         </button>
 
                         <div
                             *rdxMenuPortal
-                            [class]="m.positioner"
                             side="right"
                             align="start"
                             sideOffset="4"
                             rdxMenuPositioner
+                            [class]="m.positioner"
                         >
-                            <div [class]="m.popup" rdxMenuPopup>
-                                <button [class]="m.item" rdxMenuItem>Search Web…</button>
-                                <button [class]="m.item" rdxMenuItem>Find…</button>
-                                <button [class]="m.item" rdxMenuItem>Find and Replace…</button>
-                                <button [class]="m.item" rdxMenuItem>Use Selection for Find</button>
+                            <div rdxMenuPopup [class]="m.popup">
+                                <button rdxMenuItem [class]="m.item">Search Web…</button>
+                                <button rdxMenuItem [class]="m.item">Find…</button>
+                                <button rdxMenuItem [class]="m.item">Find and Replace…</button>
+                                <button rdxMenuItem [class]="m.item">Use Selection for Find</button>
                             </div>
                         </div>
                     </ng-container>
 
                     <!-- Second submenu -->
                     <ng-container #spellSub="rdxMenuRoot" rdxMenuRoot>
-                        <button [class]="cn(m.item, 'justify-between')" rdxMenuSubTrigger>
+                        <button rdxMenuSubTrigger [class]="cn(m.item, 'justify-between')">
                             Spelling and Grammar
                             <span class="text-muted-foreground text-xs">›</span>
                         </button>
 
                         <div
                             *rdxMenuPortal
-                            [class]="m.positioner"
                             side="right"
                             align="start"
                             sideOffset="4"
                             rdxMenuPositioner
+                            [class]="m.positioner"
                         >
-                            <div [class]="m.popup" rdxMenuPopup>
-                                <button [class]="m.item" rdxMenuItem>Show Spelling and Grammar</button>
-                                <button [class]="m.item" rdxMenuItem>Check Document Now</button>
-                                <div [class]="m.separator" rdxMenuSeparator></div>
-                                <button [class]="m.item" rdxMenuItem>Check Spelling While Typing</button>
-                                <button [class]="m.item" [disabled]="true" rdxMenuItem>Check Grammar</button>
+                            <div rdxMenuPopup [class]="m.popup">
+                                <button rdxMenuItem [class]="m.item">Show Spelling and Grammar</button>
+                                <button rdxMenuItem [class]="m.item">Check Document Now</button>
+                                <div rdxMenuSeparator [class]="m.separator"></div>
+                                <button rdxMenuItem [class]="m.item">Check Spelling While Typing</button>
+                                <button rdxMenuItem [class]="m.item" [disabled]="true">Check Grammar</button>
                             </div>
                         </div>
                     </ng-container>
 
-                    <div [class]="m.separator" rdxMenuSeparator></div>
-                    <button [class]="m.item" rdxMenuItem>Cut</button>
-                    <button [class]="m.item" rdxMenuItem>Copy</button>
-                    <button [class]="m.item" rdxMenuItem>Paste</button>
+                    <div rdxMenuSeparator [class]="m.separator"></div>
+                    <button rdxMenuItem [class]="m.item">Cut</button>
+                    <button rdxMenuItem [class]="m.item">Copy</button>
+                    <button rdxMenuItem [class]="m.item">Paste</button>
                 </div>
             </div>
         </ng-container>
@@ -331,9 +331,9 @@ export class RdxMenuNestedComponent {
 ```
 
 ```typescript
+import { cn, demoButton, demoMenu } from '../../storybook/styles';
 import { ChangeDetectionStrategy, Component } from '@angular/core';
 import { RdxMenuModule } from '@radix-ng/primitives/menu';
-import { cn, demoButton, demoMenu } from '../../storybook/styles';
 
 /**
  * RTL nested menu: submenus open to the *left* (`side="left"`), so the safe-polygon geometry must
@@ -346,66 +346,66 @@ import { cn, demoButton, demoMenu } from '../../storybook/styles';
     template: `
         <div dir="rtl">
             <ng-container #root="rdxMenuRoot" dir="rtl" rdxMenuRoot>
-                <button [class]="cn(b.base, b.outline, b.size.md)" rdxMenuTrigger>تحرير</button>
+                <button rdxMenuTrigger [class]="cn(b.base, b.outline, b.size.md)">تحرير</button>
 
-                <div *rdxMenuPortal [class]="m.positioner" side="bottom" align="end" sideOffset="4" rdxMenuPositioner>
-                    <div [class]="m.popup" rdxMenuPopup>
-                        <button [class]="m.item" rdxMenuItem>تراجع</button>
-                        <button [class]="m.item" rdxMenuItem>إعادة</button>
-                        <div [class]="m.separator" rdxMenuSeparator></div>
+                <div *rdxMenuPortal side="bottom" align="end" sideOffset="4" rdxMenuPositioner [class]="m.positioner">
+                    <div rdxMenuPopup [class]="m.popup">
+                        <button rdxMenuItem [class]="m.item">تراجع</button>
+                        <button rdxMenuItem [class]="m.item">إعادة</button>
+                        <div rdxMenuSeparator [class]="m.separator"></div>
 
                         <!-- Submenu opens to the left in RTL -->
                         <ng-container #findSub="rdxMenuRoot" rdxMenuRoot>
-                            <button [class]="cn(m.item, 'justify-between')" rdxMenuSubTrigger>
+                            <button rdxMenuSubTrigger [class]="cn(m.item, 'justify-between')">
                                 <span class="text-muted-foreground text-xs">‹</span>
                                 بحث
                             </button>
 
                             <div
                                 *rdxMenuPortal
-                                [class]="m.positioner"
                                 side="left"
                                 align="start"
                                 sideOffset="4"
                                 rdxMenuPositioner
+                                [class]="m.positioner"
                             >
-                                <div [class]="m.popup" rdxMenuPopup>
-                                    <button [class]="m.item" rdxMenuItem>بحث في الويب…</button>
-                                    <button [class]="m.item" rdxMenuItem>بحث…</button>
-                                    <button [class]="m.item" rdxMenuItem>بحث واستبدال…</button>
-                                    <button [class]="m.item" rdxMenuItem>استخدام التحديد للبحث</button>
+                                <div rdxMenuPopup [class]="m.popup">
+                                    <button rdxMenuItem [class]="m.item">بحث في الويب…</button>
+                                    <button rdxMenuItem [class]="m.item">بحث…</button>
+                                    <button rdxMenuItem [class]="m.item">بحث واستبدال…</button>
+                                    <button rdxMenuItem [class]="m.item">استخدام التحديد للبحث</button>
                                 </div>
                             </div>
                         </ng-container>
 
                         <ng-container #spellSub="rdxMenuRoot" rdxMenuRoot>
-                            <button [class]="cn(m.item, 'justify-between')" rdxMenuSubTrigger>
+                            <button rdxMenuSubTrigger [class]="cn(m.item, 'justify-between')">
                                 <span class="text-muted-foreground text-xs">‹</span>
                                 التدقيق الإملائي والنحوي
                             </button>
 
                             <div
                                 *rdxMenuPortal
-                                [class]="m.positioner"
                                 side="left"
                                 align="start"
                                 sideOffset="4"
                                 rdxMenuPositioner
+                                [class]="m.positioner"
                             >
-                                <div [class]="m.popup" rdxMenuPopup>
-                                    <button [class]="m.item" rdxMenuItem>عرض التدقيق الإملائي والنحوي</button>
-                                    <button [class]="m.item" rdxMenuItem>تدقيق المستند الآن</button>
-                                    <div [class]="m.separator" rdxMenuSeparator></div>
-                                    <button [class]="m.item" rdxMenuItem>التدقيق الإملائي أثناء الكتابة</button>
-                                    <button [class]="m.item" [disabled]="true" rdxMenuItem>التدقيق النحوي</button>
+                                <div rdxMenuPopup [class]="m.popup">
+                                    <button rdxMenuItem [class]="m.item">عرض التدقيق الإملائي والنحوي</button>
+                                    <button rdxMenuItem [class]="m.item">تدقيق المستند الآن</button>
+                                    <div rdxMenuSeparator [class]="m.separator"></div>
+                                    <button rdxMenuItem [class]="m.item">التدقيق الإملائي أثناء الكتابة</button>
+                                    <button rdxMenuItem [class]="m.item" [disabled]="true">التدقيق النحوي</button>
                                 </div>
                             </div>
                         </ng-container>
 
-                        <div [class]="m.separator" rdxMenuSeparator></div>
-                        <button [class]="m.item" rdxMenuItem>قص</button>
-                        <button [class]="m.item" rdxMenuItem>نسخ</button>
-                        <button [class]="m.item" rdxMenuItem>لصق</button>
+                        <div rdxMenuSeparator [class]="m.separator"></div>
+                        <button rdxMenuItem [class]="m.item">قص</button>
+                        <button rdxMenuItem [class]="m.item">نسخ</button>
+                        <button rdxMenuItem [class]="m.item">لصق</button>
                     </div>
                 </div>
             </ng-container>
@@ -427,9 +427,9 @@ The arrow SVG fills with `currentColor`, so match the popup surface with a `text
 the popup border flow into the arrow as one continuous outline.
 
 ```typescript
+import { cn, demoButton, demoMenu } from '../../storybook/styles';
 import { ChangeDetectionStrategy, Component } from '@angular/core';
 import { RdxMenuModule } from '@radix-ng/primitives/menu';
-import { cn, demoButton, demoMenu } from '../../storybook/styles';
 
 @Component({
     selector: 'rdx-menu-arrow',
@@ -437,15 +437,15 @@ import { cn, demoButton, demoMenu } from '../../storybook/styles';
     changeDetection: ChangeDetectionStrategy.OnPush,
     template: `
         <ng-container #root="rdxMenuRoot" rdxMenuRoot>
-            <button [class]="cn(b.base, b.outline, b.size.md)" rdxMenuTrigger>With Arrow</button>
-
-            <div *rdxMenuPortal [class]="m.positioner" sideOffset="8" rdxMenuPositioner>
-                <div [class]="cn(m.popup, 'relative')" rdxMenuPopup>
-                    <span [class]="m.arrow" rdxMenuArrow></span>
-                    <button [class]="m.item" rdxMenuItem>New Tab</button>
-                    <button [class]="m.item" rdxMenuItem>New Window</button>
-                    <div [class]="m.separator" rdxMenuSeparator></div>
-                    <button [class]="m.item" rdxMenuItem>Print…</button>
+            <button rdxMenuTrigger [class]="cn(b.base, b.outline, b.size.md)">With Arrow</button>
+
+            <div *rdxMenuPortal sideOffset="8" rdxMenuPositioner [class]="m.positioner">
+                <div rdxMenuPopup [class]="cn(m.popup, 'relative')">
+                    <span rdxMenuArrow [class]="m.arrow"></span>
+                    <button rdxMenuItem [class]="m.item">New Tab</button>
+                    <button rdxMenuItem [class]="m.item">New Window</button>
+                    <div rdxMenuSeparator [class]="m.separator"></div>
+                    <button rdxMenuItem [class]="m.item">Print…</button>
                 </div>
             </div>
         </ng-container>
@@ -465,28 +465,28 @@ Add `rdxMenuBackdrop` as a sibling root before the positioner inside an explicit
 blocking outside pointer events and page scrolling; set `[modal]="false"` to opt out.
 
 ```typescript
+import { cn, demoButton, demoMenu } from '../../storybook/styles';
 import { ChangeDetectionStrategy, Component } from '@angular/core';
 import { RdxMenuModule } from '@radix-ng/primitives/menu';
-import { cn, demoButton, demoMenu } from '../../storybook/styles';
 
 @Component({
     selector: 'rdx-menu-backdrop',
     imports: [RdxMenuModule],
     changeDetection: ChangeDetectionStrategy.OnPush,
     template: `
-        <ng-container #root="rdxMenuRoot" [modal]="true" rdxMenuRoot>
-            <button [class]="cn(b.base, b.outline, b.size.md)" rdxMenuTrigger>With Backdrop</button>
+        <ng-container #root="rdxMenuRoot" rdxMenuRoot [modal]="true">
+            <button rdxMenuTrigger [class]="cn(b.base, b.outline, b.size.md)">With Backdrop</button>
 
             <ng-template rdxMenuPortal>
                 <div class="bg-foreground/10 fixed inset-0" rdxMenuBackdrop></div>
-                <div [class]="m.positioner" sideOffset="4" rdxMenuPositioner>
-                    <div [class]="m.popup" rdxMenuPopup>
-                        <button [class]="m.item" rdxMenuItem>New Tab</button>
-                        <button [class]="m.item" rdxMenuItem>New Window</button>
-                        <div [class]="m.separator" rdxMenuSeparator></div>
-                        <button [class]="m.item" [disabled]="true" rdxMenuItem>New Private Window</button>
-                        <div [class]="m.separator" rdxMenuSeparator></div>
-                        <button [class]="m.item" rdxMenuItem>Print…</button>
+                <div sideOffset="4" rdxMenuPositioner [class]="m.positioner">
+                    <div rdxMenuPopup [class]="m.popup">
+                        <button rdxMenuItem [class]="m.item">New Tab</button>
+                        <button rdxMenuItem [class]="m.item">New Window</button>
+                        <div rdxMenuSeparator [class]="m.separator"></div>
+                        <button rdxMenuItem [class]="m.item" [disabled]="true">New Private Window</button>
+                        <div rdxMenuSeparator [class]="m.separator"></div>
+                        <button rdxMenuItem [class]="m.item">Print…</button>
                     </div>
                 </div>
             </ng-template>
@@ -517,9 +517,9 @@ the popup with a CSS transition (here via Tailwind arbitrary utilities, so no st
 ```
 
 ```typescript
+import { cn, demoButton, demoMenu } from '../../storybook/styles';
 import { ChangeDetectionStrategy, Component, signal } from '@angular/core';
 import { RdxMenuModule } from '@radix-ng/primitives/menu';
-import { cn, demoButton, demoMenu } from '../../storybook/styles';
 
 /**
  * Demonstrates `rdxMenuViewport`: the popup smoothly resizes as its content
@@ -533,32 +533,32 @@ import { cn, demoButton, demoMenu } from '../../storybook/styles';
     changeDetection: ChangeDetectionStrategy.OnPush,
     template: `
         <ng-container #root="rdxMenuRoot" rdxMenuRoot>
-            <button [class]="cn(b.base, b.outline, b.size.md)" rdxMenuTrigger>Settings</button>
+            <button rdxMenuTrigger [class]="cn(b.base, b.outline, b.size.md)">Settings</button>
 
-            <div *rdxMenuPortal [class]="m.positioner" sideOffset="4" rdxMenuPositioner>
+            <div *rdxMenuPortal sideOffset="4" rdxMenuPositioner [class]="m.positioner">
                 <div
+                    rdxMenuPopup
                     [class]="
                         cn(
                             m.popup,
                             '[height:var(--popup-height)] [width:var(--popup-width)] overflow-hidden transition-[width,height] duration-200 ease-out'
                         )
                     "
-                    rdxMenuPopup
                 >
                     <div rdxMenuViewport>
-                        <button [class]="m.item" [closeOnClick]="false" (onSelect)="toggle()" rdxMenuItem>
+                        <button rdxMenuItem [class]="m.item" [closeOnClick]="false" (onSelect)="toggle()">
                             {{ expanded() ? 'Hide advanced' : 'Show advanced' }}
                         </button>
-                        <div [class]="m.separator" rdxMenuSeparator></div>
-                        <button [class]="m.item" rdxMenuItem>Profile</button>
-                        <button [class]="m.item" rdxMenuItem>Billing</button>
+                        <div rdxMenuSeparator [class]="m.separator"></div>
+                        <button rdxMenuItem [class]="m.item">Profile</button>
+                        <button rdxMenuItem [class]="m.item">Billing</button>
 
                         @if (expanded()) {
-                            <div [class]="m.separator" rdxMenuSeparator></div>
-                            <button [class]="m.item" rdxMenuItem>Keyboard shortcuts</button>
-                            <button [class]="m.item" rdxMenuItem>Developer tools</button>
-                            <button [class]="m.item" rdxMenuItem>Feature flags</button>
-                            <button [class]="m.item" rdxMenuItem>API tokens</button>
+                            <div rdxMenuSeparator [class]="m.separator"></div>
+                            <button rdxMenuItem [class]="m.item">Keyboard shortcuts</button>
+                            <button rdxMenuItem [class]="m.item">Developer tools</button>
+                            <button rdxMenuItem [class]="m.item">Feature flags</button>
+                            <button rdxMenuItem [class]="m.item">API tokens</button>
                         }
                     </div>
                 </div>
@@ -589,9 +589,9 @@ positioner (the part presence watches, keyed on `data-open` / `data-closed`) and
 zoom on the popup. Use Angular `styles` on the component (or global CSS) to define the keyframes.
 
 ```typescript
+import { cn, demoButton, demoMenu } from '../../storybook/styles';
 import { ChangeDetectionStrategy, Component } from '@angular/core';
 import { RdxMenuModule } from '@radix-ng/primitives/menu';
-import { cn, demoButton, demoMenu } from '../../storybook/styles';
 
 @Component({
     selector: 'rdx-menu-animated',
@@ -658,14 +658,14 @@ import { cn, demoButton, demoMenu } from '../../storybook/styles';
     ],
     template: `
         <ng-container #root="rdxMenuRoot" rdxMenuRoot>
-            <button [class]="cn(b.base, b.outline, b.size.md)" rdxMenuTrigger>Animated</button>
-
-            <div *rdxMenuPortal [class]="cn(m.positioner, 'animated-positioner')" sideOffset="4" rdxMenuPositioner>
-                <div [class]="cn(m.popup, 'animated-popup')" rdxMenuPopup>
-                    <button [class]="m.item" rdxMenuItem>New Tab</button>
-                    <button [class]="m.item" rdxMenuItem>New Window</button>
-                    <div [class]="m.separator" rdxMenuSeparator></div>
-                    <button [class]="m.item" rdxMenuItem>Print…</button>
+            <button rdxMenuTrigger [class]="cn(b.base, b.outline, b.size.md)">Animated</button>
+
+            <div *rdxMenuPortal sideOffset="4" rdxMenuPositioner [class]="cn(m.positioner, 'animated-positioner')">
+                <div rdxMenuPopup [class]="cn(m.popup, 'animated-popup')">
+                    <button rdxMenuItem [class]="m.item">New Tab</button>
+                    <button rdxMenuItem [class]="m.item">New Window</button>
+                    <div rdxMenuSeparator [class]="m.separator"></div>
+                    <button rdxMenuItem [class]="m.item">Print…</button>
                 </div>
             </div>
         </ng-container>
diff --git a/skills/radix-ng-examples/references/components/menubar.md b/skills/radix-ng-examples/references/components/menubar.md
index 4cb5e17e3..66f53120d 100644
--- a/skills/radix-ng-examples/references/components/menubar.md
+++ b/skills/radix-ng-examples/references/components/menubar.md
@@ -7,54 +7,54 @@ menu is a `rdxMenuRoot` with a standard `rdxMenuTrigger`; the menubar manages wh
 up Base UI-style Composite focus, arrow-key navigation, and hover-to-switch behavior between them.
 
 ```typescript
+import { cn, demoMenu, demoMenubar } from '../../storybook/styles';
 import { ChangeDetectionStrategy, Component, signal } from '@angular/core';
 import { LucideCheck, LucideDot } from '@lucide/angular';
 import { RdxMenuModule } from '@radix-ng/primitives/menu';
 import { RdxMenubarRoot } from '@radix-ng/primitives/menubar';
-import { cn, demoMenu, demoMenubar } from '../../storybook/styles';
 
 @Component({
     selector: 'rdx-menubar-default',
     imports: [RdxMenuModule, RdxMenubarRoot, LucideCheck, LucideDot],
     changeDetection: ChangeDetectionStrategy.OnPush,
     template: `
-        <div [class]="mb.root" rdxMenubarRoot>
+        <div rdxMenubarRoot [class]="mb.root">
             <!-- File -->
             <ng-container #fileMenu="rdxMenuRoot" rdxMenuRoot>
-                <button [class]="mb.trigger" rdxMenuTrigger>File</button>
+                <button rdxMenuTrigger [class]="mb.trigger">File</button>
 
-                <div [class]="cn(m.positioner, 'data-[closed]:hidden')" align="start" sideOffset="4" rdxMenuPositioner>
-                    <div [class]="m.popup" rdxMenuPopup>
-                        <button [class]="m.item" rdxMenuItem>
+                <div align="start" sideOffset="4" rdxMenuPositioner [class]="cn(m.positioner, 'data-[closed]:hidden')">
+                    <div rdxMenuPopup [class]="m.popup">
+                        <button rdxMenuItem [class]="m.item">
                             New Tab
                             <span [class]="mb.shortcut">⌘ T</span>
                         </button>
-                        <button [class]="m.item" rdxMenuItem>
+                        <button rdxMenuItem [class]="m.item">
                             New Window
                             <span [class]="mb.shortcut">⌘ N</span>
                         </button>
-                        <button [class]="m.item" [disabled]="true" rdxMenuItem>New Incognito Window</button>
-                        <div [class]="m.separator" rdxMenuSeparator></div>
+                        <button rdxMenuItem [class]="m.item" [disabled]="true">New Incognito Window</button>
+                        <div rdxMenuSeparator [class]="m.separator"></div>
 
                         <!-- Share submenu -->
                         <ng-container #shareSub="rdxMenuRoot" rdxMenuRoot>
-                            <button [class]="cn(m.item, 'justify-between')" rdxMenuSubTrigger>
+                            <button rdxMenuSubTrigger [class]="cn(m.item, 'justify-between')">
                                 Share
                                 <span class="text-muted-foreground text-xs">›</span>
                             </button>
                             @if (shareSub.open()) {
-                                <div [class]="m.positioner" side="right" align="start" sideOffset="4" rdxMenuPositioner>
-                                    <div [class]="m.popup" rdxMenuPopup>
-                                        <button [class]="m.item" rdxMenuItem>Email Link</button>
-                                        <button [class]="m.item" rdxMenuItem>Messages</button>
-                                        <button [class]="m.item" rdxMenuItem>Notes</button>
+                                <div side="right" align="start" sideOffset="4" rdxMenuPositioner [class]="m.positioner">
+                                    <div rdxMenuPopup [class]="m.popup">
+                                        <button rdxMenuItem [class]="m.item">Email Link</button>
+                                        <button rdxMenuItem [class]="m.item">Messages</button>
+                                        <button rdxMenuItem [class]="m.item">Notes</button>
                                     </div>
                                 </div>
                             }
                         </ng-container>
 
-                        <div [class]="m.separator" rdxMenuSeparator></div>
-                        <button [class]="m.item" rdxMenuItem>
+                        <div rdxMenuSeparator [class]="m.separator"></div>
+                        <button rdxMenuItem [class]="m.item">
                             Print…
                             <span [class]="mb.shortcut">⌘ P</span>
                         </button>
@@ -64,28 +64,28 @@ import { cn, demoMenu, demoMenubar } from '../../storybook/styles';
 
             <!-- Edit -->
             <ng-container #editMenu="rdxMenuRoot" rdxMenuRoot>
-                <button [class]="mb.trigger" rdxMenuTrigger>Edit</button>
+                <button rdxMenuTrigger [class]="mb.trigger">Edit</button>
 
-                <div [class]="cn(m.positioner, 'data-[closed]:hidden')" align="start" sideOffset="4" rdxMenuPositioner>
-                    <div [class]="m.popup" rdxMenuPopup>
-                        <button [class]="m.item" rdxMenuItem>
+                <div align="start" sideOffset="4" rdxMenuPositioner [class]="cn(m.positioner, 'data-[closed]:hidden')">
+                    <div rdxMenuPopup [class]="m.popup">
+                        <button rdxMenuItem [class]="m.item">
                             Undo
                             <span [class]="mb.shortcut">⌘ Z</span>
                         </button>
-                        <button [class]="m.item" rdxMenuItem>
+                        <button rdxMenuItem [class]="m.item">
                             Redo
                             <span [class]="mb.shortcut">⇧ ⌘ Z</span>
                         </button>
-                        <div [class]="m.separator" rdxMenuSeparator></div>
-                        <button [class]="m.item" rdxMenuItem>
+                        <div rdxMenuSeparator [class]="m.separator"></div>
+                        <button rdxMenuItem [class]="m.item">
                             Cut
                             <span [class]="mb.shortcut">⌘ X</span>
                         </button>
-                        <button [class]="m.item" rdxMenuItem>
+                        <button rdxMenuItem [class]="m.item">
                             Copy
                             <span [class]="mb.shortcut">⌘ C</span>
                         </button>
-                        <button [class]="m.item" rdxMenuItem>
+                        <button rdxMenuItem [class]="m.item">
                             Paste
                             <span [class]="mb.shortcut">⌘ V</span>
                         </button>
@@ -95,60 +95,60 @@ import { cn, demoMenu, demoMenubar } from '../../storybook/styles';
 
             <!-- View -->
             <ng-container #viewMenu="rdxMenuRoot" rdxMenuRoot>
-                <button [class]="mb.trigger" rdxMenuTrigger>View</button>
+                <button rdxMenuTrigger [class]="mb.trigger">View</button>
 
-                <div [class]="cn(m.positioner, 'data-[closed]:hidden')" align="start" sideOffset="4" rdxMenuPositioner>
-                    <div [class]="m.popup" rdxMenuPopup>
-                        <label [(checked)]="showBookmarks" [class]="m.selectableItem" rdxMenuCheckboxItem>
-                            <span [class]="m.itemIndicator" rdxMenuCheckboxItemIndicator>
-                                <svg [size]="12" lucideCheck></svg>
+                <div align="start" sideOffset="4" rdxMenuPositioner [class]="cn(m.positioner, 'data-[closed]:hidden')">
+                    <div rdxMenuPopup [class]="m.popup">
+                        <label rdxMenuCheckboxItem [class]="m.selectableItem" [(checked)]="showBookmarks">
+                            <span rdxMenuCheckboxItemIndicator [class]="m.itemIndicator">
+                                <svg lucideCheck [size]="12"></svg>
                             </span>
                             Always Show Bookmarks Bar
                         </label>
-                        <label [(checked)]="showFullUrls" [class]="m.selectableItem" rdxMenuCheckboxItem>
-                            <span [class]="m.itemIndicator" rdxMenuCheckboxItemIndicator>
-                                <svg [size]="12" lucideCheck></svg>
+                        <label rdxMenuCheckboxItem [class]="m.selectableItem" [(checked)]="showFullUrls">
+                            <span rdxMenuCheckboxItemIndicator [class]="m.itemIndicator">
+                                <svg lucideCheck [size]="12"></svg>
                             </span>
                             Always Show Full URLs
                         </label>
-                        <div [class]="m.separator" rdxMenuSeparator></div>
-                        <button [class]="m.item" rdxMenuItem>
+                        <div rdxMenuSeparator [class]="m.separator"></div>
+                        <button rdxMenuItem [class]="m.item">
                             Reload
                             <span [class]="mb.shortcut">⌘ R</span>
                         </button>
-                        <button [class]="m.item" [disabled]="true" rdxMenuItem>
+                        <button rdxMenuItem [class]="m.item" [disabled]="true">
                             Force Reload
                             <span [class]="mb.shortcut">⇧ ⌘ R</span>
                         </button>
-                        <div [class]="m.separator" rdxMenuSeparator></div>
-                        <button [class]="m.item" rdxMenuItem>Toggle Fullscreen</button>
+                        <div rdxMenuSeparator [class]="m.separator"></div>
+                        <button rdxMenuItem [class]="m.item">Toggle Fullscreen</button>
                     </div>
                 </div>
             </ng-container>
 
             <!-- Profiles -->
             <ng-container #profilesMenu="rdxMenuRoot" rdxMenuRoot>
-                <button [class]="mb.trigger" rdxMenuTrigger>Profiles</button>
-
-                <div [class]="cn(m.positioner, 'data-[closed]:hidden')" align="start" sideOffset="4" rdxMenuPositioner>
-                    <div [class]="m.popup" rdxMenuPopup>
-                        <div [(value)]="activeProfile" rdxMenuRadioGroup>
-                            <label [class]="m.selectableItem" value="andy" rdxMenuRadioItem>
-                                <span [class]="m.itemIndicator" rdxMenuRadioItemIndicator>
-                                    <svg [size]="10" strokeWidth="5" lucideDot></svg>
+                <button rdxMenuTrigger [class]="mb.trigger">Profiles</button>
+
+                <div align="start" sideOffset="4" rdxMenuPositioner [class]="cn(m.positioner, 'data-[closed]:hidden')">
+                    <div rdxMenuPopup [class]="m.popup">
+                        <div rdxMenuRadioGroup [(value)]="activeProfile">
+                            <label value="andy" rdxMenuRadioItem [class]="m.selectableItem">
+                                <span rdxMenuRadioItemIndicator [class]="m.itemIndicator">
+                                    <svg strokeWidth="5" lucideDot [size]="10"></svg>
                                 </span>
                                 Andy
                             </label>
-                            <label [class]="m.selectableItem" value="luis" rdxMenuRadioItem>
-                                <span [class]="m.itemIndicator" rdxMenuRadioItemIndicator>
-                                    <svg [size]="10" strokeWidth="5" lucideDot></svg>
+                            <label value="luis" rdxMenuRadioItem [class]="m.selectableItem">
+                                <span rdxMenuRadioItemIndicator [class]="m.itemIndicator">
+                                    <svg strokeWidth="5" lucideDot [size]="10"></svg>
                                 </span>
                                 Luis
                             </label>
                         </div>
-                        <div [class]="m.separator" rdxMenuSeparator></div>
-                        <button [class]="cn(m.item, 'pl-8')" rdxMenuItem>Edit…</button>
-                        <button [class]="cn(m.item, 'pl-8')" rdxMenuItem>Add Profile…</button>
+                        <div rdxMenuSeparator [class]="m.separator"></div>
+                        <button rdxMenuItem [class]="cn(m.item, 'pl-8')">Edit…</button>
+                        <button rdxMenuItem [class]="cn(m.item, 'pl-8')">Add Profile…</button>
                     </div>
                 </div>
             </ng-container>
@@ -244,54 +244,54 @@ A four-menu bar (File, Edit, View, Profiles) with a submenu, checkbox items, and
 Click a trigger to open it, then hover the other triggers to switch, or use the arrow keys.
 
 ```typescript
+import { cn, demoMenu, demoMenubar } from '../../storybook/styles';
 import { ChangeDetectionStrategy, Component, signal } from '@angular/core';
 import { LucideCheck, LucideDot } from '@lucide/angular';
 import { RdxMenuModule } from '@radix-ng/primitives/menu';
 import { RdxMenubarRoot } from '@radix-ng/primitives/menubar';
-import { cn, demoMenu, demoMenubar } from '../../storybook/styles';
 
 @Component({
     selector: 'rdx-menubar-default',
     imports: [RdxMenuModule, RdxMenubarRoot, LucideCheck, LucideDot],
     changeDetection: ChangeDetectionStrategy.OnPush,
     template: `
-        <div [class]="mb.root" rdxMenubarRoot>
+        <div rdxMenubarRoot [class]="mb.root">
             <!-- File -->
             <ng-container #fileMenu="rdxMenuRoot" rdxMenuRoot>
-                <button [class]="mb.trigger" rdxMenuTrigger>File</button>
+                <button rdxMenuTrigger [class]="mb.trigger">File</button>
 
-                <div [class]="cn(m.positioner, 'data-[closed]:hidden')" align="start" sideOffset="4" rdxMenuPositioner>
-                    <div [class]="m.popup" rdxMenuPopup>
-                        <button [class]="m.item" rdxMenuItem>
+                <div align="start" sideOffset="4" rdxMenuPositioner [class]="cn(m.positioner, 'data-[closed]:hidden')">
+                    <div rdxMenuPopup [class]="m.popup">
+                        <button rdxMenuItem [class]="m.item">
                             New Tab
                             <span [class]="mb.shortcut">⌘ T</span>
                         </button>
-                        <button [class]="m.item" rdxMenuItem>
+                        <button rdxMenuItem [class]="m.item">
                             New Window
                             <span [class]="mb.shortcut">⌘ N</span>
                         </button>
-                        <button [class]="m.item" [disabled]="true" rdxMenuItem>New Incognito Window</button>
-                        <div [class]="m.separator" rdxMenuSeparator></div>
+                        <button rdxMenuItem [class]="m.item" [disabled]="true">New Incognito Window</button>
+                        <div rdxMenuSeparator [class]="m.separator"></div>
 
                         <!-- Share submenu -->
                         <ng-container #shareSub="rdxMenuRoot" rdxMenuRoot>
-                            <button [class]="cn(m.item, 'justify-between')" rdxMenuSubTrigger>
+                            <button rdxMenuSubTrigger [class]="cn(m.item, 'justify-between')">
                                 Share
                                 <span class="text-muted-foreground text-xs">›</span>
                             </button>
                             @if (shareSub.open()) {
-                                <div [class]="m.positioner" side="right" align="start" sideOffset="4" rdxMenuPositioner>
-                                    <div [class]="m.popup" rdxMenuPopup>
-                                        <button [class]="m.item" rdxMenuItem>Email Link</button>
-                                        <button [class]="m.item" rdxMenuItem>Messages</button>
-                                        <button [class]="m.item" rdxMenuItem>Notes</button>
+                                <div side="right" align="start" sideOffset="4" rdxMenuPositioner [class]="m.positioner">
+                                    <div rdxMenuPopup [class]="m.popup">
+                                        <button rdxMenuItem [class]="m.item">Email Link</button>
+                                        <button rdxMenuItem [class]="m.item">Messages</button>
+                                        <button rdxMenuItem [class]="m.item">Notes</button>
                                     </div>
                                 </div>
                             }
                         </ng-container>
 
-                        <div [class]="m.separator" rdxMenuSeparator></div>
-                        <button [class]="m.item" rdxMenuItem>
+                        <div rdxMenuSeparator [class]="m.separator"></div>
+                        <button rdxMenuItem [class]="m.item">
                             Print…
                             <span [class]="mb.shortcut">⌘ P</span>
                         </button>
@@ -301,28 +301,28 @@ import { cn, demoMenu, demoMenubar } from '../../storybook/styles';
 
             <!-- Edit -->
             <ng-container #editMenu="rdxMenuRoot" rdxMenuRoot>
-                <button [class]="mb.trigger" rdxMenuTrigger>Edit</button>
+                <button rdxMenuTrigger [class]="mb.trigger">Edit</button>
 
-                <div [class]="cn(m.positioner, 'data-[closed]:hidden')" align="start" sideOffset="4" rdxMenuPositioner>
-                    <div [class]="m.popup" rdxMenuPopup>
-                        <button [class]="m.item" rdxMenuItem>
+                <div align="start" sideOffset="4" rdxMenuPositioner [class]="cn(m.positioner, 'data-[closed]:hidden')">
+                    <div rdxMenuPopup [class]="m.popup">
+                        <button rdxMenuItem [class]="m.item">
                             Undo
                             <span [class]="mb.shortcut">⌘ Z</span>
                         </button>
-                        <button [class]="m.item" rdxMenuItem>
+                        <button rdxMenuItem [class]="m.item">
                             Redo
                             <span [class]="mb.shortcut">⇧ ⌘ Z</span>
                         </button>
-                        <div [class]="m.separator" rdxMenuSeparator></div>
-                        <button [class]="m.item" rdxMenuItem>
+                        <div rdxMenuSeparator [class]="m.separator"></div>
+                        <button rdxMenuItem [class]="m.item">
                             Cut
                             <span [class]="mb.shortcut">⌘ X</span>
                         </button>
-                        <button [class]="m.item" rdxMenuItem>
+                        <button rdxMenuItem [class]="m.item">
                             Copy
                             <span [class]="mb.shortcut">⌘ C</span>
                         </button>
-                        <button [class]="m.item" rdxMenuItem>
+                        <button rdxMenuItem [class]="m.item">
                             Paste
                             <span [class]="mb.shortcut">⌘ V</span>
                         </button>
@@ -332,60 +332,60 @@ import { cn, demoMenu, demoMenubar } from '../../storybook/styles';
 
             <!-- View -->
             <ng-container #viewMenu="rdxMenuRoot" rdxMenuRoot>
-                <button [class]="mb.trigger" rdxMenuTrigger>View</button>
+                <button rdxMenuTrigger [class]="mb.trigger">View</button>
 
-                <div [class]="cn(m.positioner, 'data-[closed]:hidden')" align="start" sideOffset="4" rdxMenuPositioner>
-                    <div [class]="m.popup" rdxMenuPopup>
-                        <label [(checked)]="showBookmarks" [class]="m.selectableItem" rdxMenuCheckboxItem>
-                            <span [class]="m.itemIndicator" rdxMenuCheckboxItemIndicator>
-                                <svg [size]="12" lucideCheck></svg>
+                <div align="start" sideOffset="4" rdxMenuPositioner [class]="cn(m.positioner, 'data-[closed]:hidden')">
+                    <div rdxMenuPopup [class]="m.popup">
+                        <label rdxMenuCheckboxItem [class]="m.selectableItem" [(checked)]="showBookmarks">
+                            <span rdxMenuCheckboxItemIndicator [class]="m.itemIndicator">
+                                <svg lucideCheck [size]="12"></svg>
                             </span>
                             Always Show Bookmarks Bar
                         </label>
-                        <label [(checked)]="showFullUrls" [class]="m.selectableItem" rdxMenuCheckboxItem>
-                            <span [class]="m.itemIndicator" rdxMenuCheckboxItemIndicator>
-                                <svg [size]="12" lucideCheck></svg>
+                        <label rdxMenuCheckboxItem [class]="m.selectableItem" [(checked)]="showFullUrls">
+                            <span rdxMenuCheckboxItemIndicator [class]="m.itemIndicator">
+                                <svg lucideCheck [size]="12"></svg>
                             </span>
                             Always Show Full URLs
                         </label>
-                        <div [class]="m.separator" rdxMenuSeparator></div>
-                        <button [class]="m.item" rdxMenuItem>
+                        <div rdxMenuSeparator [class]="m.separator"></div>
+                        <button rdxMenuItem [class]="m.item">
                             Reload
                             <span [class]="mb.shortcut">⌘ R</span>
                         </button>
-                        <button [class]="m.item" [disabled]="true" rdxMenuItem>
+                        <button rdxMenuItem [class]="m.item" [disabled]="true">
                             Force Reload
                             <span [class]="mb.shortcut">⇧ ⌘ R</span>
                         </button>
-                        <div [class]="m.separator" rdxMenuSeparator></div>
-                        <button [class]="m.item" rdxMenuItem>Toggle Fullscreen</button>
+                        <div rdxMenuSeparator [class]="m.separator"></div>
+                        <button rdxMenuItem [class]="m.item">Toggle Fullscreen</button>
                     </div>
                 </div>
             </ng-container>
 
             <!-- Profiles -->
             <ng-container #profilesMenu="rdxMenuRoot" rdxMenuRoot>
-                <button [class]="mb.trigger" rdxMenuTrigger>Profiles</button>
-
-                <div [class]="cn(m.positioner, 'data-[closed]:hidden')" align="start" sideOffset="4" rdxMenuPositioner>
-                    <div [class]="m.popup" rdxMenuPopup>
-                        <div [(value)]="activeProfile" rdxMenuRadioGroup>
-                            <label [class]="m.selectableItem" value="andy" rdxMenuRadioItem>
-                                <span [class]="m.itemIndicator" rdxMenuRadioItemIndicator>
-                                    <svg [size]="10" strokeWidth="5" lucideDot></svg>
+                <button rdxMenuTrigger [class]="mb.trigger">Profiles</button>
+
+                <div align="start" sideOffset="4" rdxMenuPositioner [class]="cn(m.positioner, 'data-[closed]:hidden')">
+                    <div rdxMenuPopup [class]="m.popup">
+                        <div rdxMenuRadioGroup [(value)]="activeProfile">
+                            <label value="andy" rdxMenuRadioItem [class]="m.selectableItem">
+                                <span rdxMenuRadioItemIndicator [class]="m.itemIndicator">
+                                    <svg strokeWidth="5" lucideDot [size]="10"></svg>
                                 </span>
                                 Andy
                             </label>
-                            <label [class]="m.selectableItem" value="luis" rdxMenuRadioItem>
-                                <span [class]="m.itemIndicator" rdxMenuRadioItemIndicator>
-                                    <svg [size]="10" strokeWidth="5" lucideDot></svg>
+                            <label value="luis" rdxMenuRadioItem [class]="m.selectableItem">
+                                <span rdxMenuRadioItemIndicator [class]="m.itemIndicator">
+                                    <svg strokeWidth="5" lucideDot [size]="10"></svg>
                                 </span>
                                 Luis
                             </label>
                         </div>
-                        <div [class]="m.separator" rdxMenuSeparator></div>
-                        <button [class]="cn(m.item, 'pl-8')" rdxMenuItem>Edit…</button>
-                        <button [class]="cn(m.item, 'pl-8')" rdxMenuItem>Add Profile…</button>
+                        <div rdxMenuSeparator [class]="m.separator"></div>
+                        <button rdxMenuItem [class]="cn(m.item, 'pl-8')">Edit…</button>
+                        <button rdxMenuItem [class]="cn(m.item, 'pl-8')">Add Profile…</button>
                     </div>
                 </div>
             </ng-container>
diff --git a/skills/radix-ng-examples/references/components/meter.md b/skills/radix-ng-examples/references/components/meter.md
index 527ec65c3..a7b89a987 100644
--- a/skills/radix-ng-examples/references/components/meter.md
+++ b/skills/radix-ng-examples/references/components/meter.md
@@ -3,13 +3,13 @@
 #### A graphical display of a numeric value within a range.
 
 ```typescript
-import { ChangeDetectionStrategy, Component, computed, DestroyRef, inject, signal } from '@angular/core';
 import { cn } from '../../storybook/styles';
 import { RdxMeterIndicatorDirective } from '../src/meter-indicator.directive';
 import { RdxMeterLabelDirective } from '../src/meter-label.directive';
 import { RdxMeterRootDirective } from '../src/meter-root.directive';
 import { RdxMeterTrackDirective } from '../src/meter-track.directive';
 import { RdxMeterValueDirective } from '../src/meter-value.directive';
+import { ChangeDetectionStrategy, Component, computed, DestroyRef, inject, signal } from '@angular/core';
 
 const storageSteps = [24, 38, 52, 67, 81] as const;
 
@@ -26,10 +26,10 @@ const storageSteps = [24, 38, 52, 67, 81] as const;
     template: `
         <div
             class="flex w-80 flex-col gap-2"
+            rdxMeterRoot
             [value]="value()"
             [format]="format"
             [getAriaValueText]="getAriaValueText"
-            rdxMeterRoot
         >
             <div class="flex items-center justify-between gap-4">
                 <span class="text-foreground text-sm font-medium" rdxMeterLabel>Storage used</span>
@@ -37,7 +37,7 @@ const storageSteps = [24, 38, 52, 67, 81] as const;
             </div>
 
             <div class="bg-muted h-3 overflow-hidden rounded-full" rdxMeterTrack>
-                <div [class]="indicatorClass()" rdxMeterIndicator></div>
+                <div rdxMeterIndicator [class]="indicatorClass()"></div>
             </div>
         </div>
     `
@@ -119,13 +119,13 @@ import {
 An animated labelled meter with formatted value text.
 
 ```typescript
-import { ChangeDetectionStrategy, Component, computed, DestroyRef, inject, signal } from '@angular/core';
 import { cn } from '../../storybook/styles';
 import { RdxMeterIndicatorDirective } from '../src/meter-indicator.directive';
 import { RdxMeterLabelDirective } from '../src/meter-label.directive';
 import { RdxMeterRootDirective } from '../src/meter-root.directive';
 import { RdxMeterTrackDirective } from '../src/meter-track.directive';
 import { RdxMeterValueDirective } from '../src/meter-value.directive';
+import { ChangeDetectionStrategy, Component, computed, DestroyRef, inject, signal } from '@angular/core';
 
 const storageSteps = [24, 38, 52, 67, 81] as const;
 
@@ -142,10 +142,10 @@ const storageSteps = [24, 38, 52, 67, 81] as const;
     template: `
         <div
             class="flex w-80 flex-col gap-2"
+            rdxMeterRoot
             [value]="value()"
             [format]="format"
             [getAriaValueText]="getAriaValueText"
-            rdxMeterRoot
         >
             <div class="flex items-center justify-between gap-4">
                 <span class="text-foreground text-sm font-medium" rdxMeterLabel>Storage used</span>
@@ -153,7 +153,7 @@ const storageSteps = [24, 38, 52, 67, 81] as const;
             </div>
 
             <div class="bg-muted h-3 overflow-hidden rounded-full" rdxMeterTrack>
-                <div [class]="indicatorClass()" rdxMeterIndicator></div>
+                <div rdxMeterIndicator [class]="indicatorClass()"></div>
             </div>
         </div>
     `
diff --git a/skills/radix-ng-examples/references/components/navigation-menu.md b/skills/radix-ng-examples/references/components/navigation-menu.md
index 9de5df0dd..28281eae5 100644
--- a/skills/radix-ng-examples/references/components/navigation-menu.md
+++ b/skills/radix-ng-examples/references/components/navigation-menu.md
@@ -7,22 +7,22 @@ It composes the shared Popper, Portal, Presence, Dismissable Layer, and Composit
 remains headless: styles and native CSS animations belong to the consumer.
 
 ```typescript
+import { cn, demoNavigationMenu } from '../../storybook/styles';
 import { ChangeDetectionStrategy, Component } from '@angular/core';
 import { LucideChevronDown } from '@lucide/angular';
 import { navigationMenuImports } from '@radix-ng/primitives/navigation-menu';
-import { cn, demoNavigationMenu } from '../../storybook/styles';
 
 @Component({
     changeDetection: ChangeDetectionStrategy.Eager,
     selector: 'rdx-navigation-menu-default',
     imports: [...navigationMenuImports, LucideChevronDown],
     template: `
-        <nav [class]="m.root" rdxNavigationMenuRoot>
-            <ul [class]="m.list" rdxNavigationMenuList>
+        <nav rdxNavigationMenuRoot [class]="m.root">
+            <ul rdxNavigationMenuList [class]="m.list">
                 <li rdxNavigationMenuItem value="overview">
-                    <button [class]="m.trigger" rdxNavigationMenuTrigger>
+                    <button rdxNavigationMenuTrigger [class]="m.trigger">
                         Overview
-                        <svg [class]="m.icon" rdxNavigationMenuIcon lucideChevronDown></svg>
+                        <svg rdxNavigationMenuIcon lucideChevronDown [class]="m.icon"></svg>
                     </button>
 
                     <ng-container *rdxNavigationMenuContent>
@@ -32,7 +32,7 @@ import { cn, demoNavigationMenu } from '../../storybook/styles';
                             <ul [class]="cn(m.contentGrid, 'grid-cols-1 min-[500px]:grid-cols-2')">
                                 @for (item of overviewLinks; track item.title) {
                                     <li>
-                                        <a [class]="m.cardLink" [href]="item.href" rdxNavigationMenuLink>
+                                        <a rdxNavigationMenuLink [class]="m.cardLink" [href]="item.href">
                                             <div [class]="m.cardHeading">{{ item.title }}</div>
                                             <p [class]="m.cardText">{{ item.description }}</p>
                                         </a>
@@ -44,9 +44,9 @@ import { cn, demoNavigationMenu } from '../../storybook/styles';
                 </li>
 
                 <li rdxNavigationMenuItem value="handbook">
-                    <button [class]="m.trigger" rdxNavigationMenuTrigger>
+                    <button rdxNavigationMenuTrigger [class]="m.trigger">
                         Handbook
-                        <svg [class]="m.icon" rdxNavigationMenuIcon lucideChevronDown></svg>
+                        <svg rdxNavigationMenuIcon lucideChevronDown [class]="m.icon"></svg>
                     </button>
 
                     <ng-container *rdxNavigationMenuContent>
@@ -56,7 +56,7 @@ import { cn, demoNavigationMenu } from '../../storybook/styles';
                             <ul [class]="cn(m.contentGrid, 'max-w-[400px]')">
                                 @for (item of handbookLinks; track item.title) {
                                     <li>
-                                        <a [class]="m.cardLink" [href]="item.href" rdxNavigationMenuLink>
+                                        <a rdxNavigationMenuLink [class]="m.cardLink" [href]="item.href">
                                             <div [class]="m.cardHeading">{{ item.title }}</div>
                                             <p [class]="m.cardText">{{ item.description }}</p>
                                         </a>
@@ -68,23 +68,23 @@ import { cn, demoNavigationMenu } from '../../storybook/styles';
                 </li>
 
                 <li rdxNavigationMenuItem>
-                    <a [class]="m.link" rdxNavigationMenuLink href="https://github.com/mui/base-ui">GitHub</a>
+                    <a rdxNavigationMenuLink href="https://github.com/mui/base-ui" [class]="m.link">GitHub</a>
                 </li>
             </ul>
 
-            <div *rdxNavigationMenuPortal [class]="m.positioner" sideOffset="8" rdxNavigationMenuPositioner>
-                <div [class]="m.popup" rdxNavigationMenuPopup>
+            <div *rdxNavigationMenuPortal sideOffset="8" rdxNavigationMenuPositioner [class]="m.positioner">
+                <div rdxNavigationMenuPopup [class]="m.popup">
                     <svg
-                        [class]="m.arrow"
                         width="10"
                         height="5"
                         viewBox="0 0 30 10"
                         preserveAspectRatio="none"
                         rdxNavigationMenuArrow
+                        [class]="m.arrow"
                     >
                         <polygon points="0,0 30,0 15,10" />
                     </svg>
-                    <div [class]="m.viewport" rdxNavigationMenuViewport></div>
+                    <div rdxNavigationMenuViewport [class]="m.viewport"></div>
                 </div>
             </div>
         </nav>
@@ -227,22 +227,22 @@ A horizontal navigation list with two content panels and a standalone link. Cont
 the active item changes.
 
 ```typescript
+import { cn, demoNavigationMenu } from '../../storybook/styles';
 import { ChangeDetectionStrategy, Component } from '@angular/core';
 import { LucideChevronDown } from '@lucide/angular';
 import { navigationMenuImports } from '@radix-ng/primitives/navigation-menu';
-import { cn, demoNavigationMenu } from '../../storybook/styles';
 
 @Component({
     changeDetection: ChangeDetectionStrategy.Eager,
     selector: 'rdx-navigation-menu-default',
     imports: [...navigationMenuImports, LucideChevronDown],
     template: `
-        <nav [class]="m.root" rdxNavigationMenuRoot>
-            <ul [class]="m.list" rdxNavigationMenuList>
+        <nav rdxNavigationMenuRoot [class]="m.root">
+            <ul rdxNavigationMenuList [class]="m.list">
                 <li rdxNavigationMenuItem value="overview">
-                    <button [class]="m.trigger" rdxNavigationMenuTrigger>
+                    <button rdxNavigationMenuTrigger [class]="m.trigger">
                         Overview
-                        <svg [class]="m.icon" rdxNavigationMenuIcon lucideChevronDown></svg>
+                        <svg rdxNavigationMenuIcon lucideChevronDown [class]="m.icon"></svg>
                     </button>
 
                     <ng-container *rdxNavigationMenuContent>
@@ -252,7 +252,7 @@ import { cn, demoNavigationMenu } from '../../storybook/styles';
                             <ul [class]="cn(m.contentGrid, 'grid-cols-1 min-[500px]:grid-cols-2')">
                                 @for (item of overviewLinks; track item.title) {
                                     <li>
-                                        <a [class]="m.cardLink" [href]="item.href" rdxNavigationMenuLink>
+                                        <a rdxNavigationMenuLink [class]="m.cardLink" [href]="item.href">
                                             <div [class]="m.cardHeading">{{ item.title }}</div>
                                             <p [class]="m.cardText">{{ item.description }}</p>
                                         </a>
@@ -264,9 +264,9 @@ import { cn, demoNavigationMenu } from '../../storybook/styles';
                 </li>
 
                 <li rdxNavigationMenuItem value="handbook">
-                    <button [class]="m.trigger" rdxNavigationMenuTrigger>
+                    <button rdxNavigationMenuTrigger [class]="m.trigger">
                         Handbook
-                        <svg [class]="m.icon" rdxNavigationMenuIcon lucideChevronDown></svg>
+                        <svg rdxNavigationMenuIcon lucideChevronDown [class]="m.icon"></svg>
                     </button>
 
                     <ng-container *rdxNavigationMenuContent>
@@ -276,7 +276,7 @@ import { cn, demoNavigationMenu } from '../../storybook/styles';
                             <ul [class]="cn(m.contentGrid, 'max-w-[400px]')">
                                 @for (item of handbookLinks; track item.title) {
                                     <li>
-                                        <a [class]="m.cardLink" [href]="item.href" rdxNavigationMenuLink>
+                                        <a rdxNavigationMenuLink [class]="m.cardLink" [href]="item.href">
                                             <div [class]="m.cardHeading">{{ item.title }}</div>
                                             <p [class]="m.cardText">{{ item.description }}</p>
                                         </a>
@@ -288,23 +288,23 @@ import { cn, demoNavigationMenu } from '../../storybook/styles';
                 </li>
 
                 <li rdxNavigationMenuItem>
-                    <a [class]="m.link" rdxNavigationMenuLink href="https://github.com/mui/base-ui">GitHub</a>
+                    <a rdxNavigationMenuLink href="https://github.com/mui/base-ui" [class]="m.link">GitHub</a>
                 </li>
             </ul>
 
-            <div *rdxNavigationMenuPortal [class]="m.positioner" sideOffset="8" rdxNavigationMenuPositioner>
-                <div [class]="m.popup" rdxNavigationMenuPopup>
+            <div *rdxNavigationMenuPortal sideOffset="8" rdxNavigationMenuPositioner [class]="m.positioner">
+                <div rdxNavigationMenuPopup [class]="m.popup">
                     <svg
-                        [class]="m.arrow"
                         width="10"
                         height="5"
                         viewBox="0 0 30 10"
                         preserveAspectRatio="none"
                         rdxNavigationMenuArrow
+                        [class]="m.arrow"
                     >
                         <polygon points="0,0 30,0 15,10" />
                     </svg>
-                    <div [class]="m.viewport" rdxNavigationMenuViewport></div>
+                    <div rdxNavigationMenuViewport [class]="m.viewport"></div>
                 </div>
             </div>
         </nav>
@@ -363,23 +363,23 @@ export class RdxNavigationMenuDefaultComponent {
 Set `orientation="vertical"` on the root and position the popup to the side with `side="right"`.
 
 ```typescript
+import { cn, demoNavigationMenu } from '../../storybook/styles';
 import { ChangeDetectionStrategy, Component } from '@angular/core';
 import { LucideChevronRight } from '@lucide/angular';
 import { navigationMenuImports } from '@radix-ng/primitives/navigation-menu';
-import { cn, demoNavigationMenu } from '../../storybook/styles';
 
 @Component({
     changeDetection: ChangeDetectionStrategy.Eager,
     selector: 'rdx-navigation-menu-vertical',
     imports: [...navigationMenuImports, LucideChevronRight],
     template: `
-        <nav [class]="m.root" orientation="vertical" rdxNavigationMenuRoot>
-            <ul [class]="cn(m.list, 'w-48 flex-col items-stretch')" rdxNavigationMenuList>
+        <nav orientation="vertical" rdxNavigationMenuRoot [class]="m.root">
+            <ul rdxNavigationMenuList [class]="cn(m.list, 'w-48 flex-col items-stretch')">
                 @for (group of groups; track group.value) {
-                    <li [value]="group.value" rdxNavigationMenuItem>
-                        <button [class]="cn(m.trigger, 'justify-between')" rdxNavigationMenuTrigger>
+                    <li rdxNavigationMenuItem [value]="group.value">
+                        <button rdxNavigationMenuTrigger [class]="cn(m.trigger, 'justify-between')">
                             {{ group.label }}
-                            <svg [class]="m.icon" rdxNavigationMenuIcon lucideChevronRight></svg>
+                            <svg rdxNavigationMenuIcon lucideChevronRight [class]="m.icon"></svg>
                         </button>
 
                         <ng-container *rdxNavigationMenuContent>
@@ -387,7 +387,7 @@ import { cn, demoNavigationMenu } from '../../storybook/styles';
                                 <ul [class]="m.contentGrid">
                                     @for (link of group.links; track link) {
                                         <li>
-                                            <a [class]="m.cardLink" rdxNavigationMenuLink href="#">
+                                            <a rdxNavigationMenuLink href="#" [class]="m.cardLink">
                                                 <div [class]="m.cardHeading">{{ link }}</div>
                                             </a>
                                         </li>
@@ -401,14 +401,14 @@ import { cn, demoNavigationMenu } from '../../storybook/styles';
 
             <div
                 *rdxNavigationMenuPortal
-                [class]="m.positioner"
                 side="right"
                 sideOffset="8"
                 align="start"
                 rdxNavigationMenuPositioner
+                [class]="m.positioner"
             >
-                <div [class]="m.popup" rdxNavigationMenuPopup>
-                    <div [class]="m.viewport" rdxNavigationMenuViewport></div>
+                <div rdxNavigationMenuPopup [class]="m.popup">
+                    <div rdxNavigationMenuViewport [class]="m.viewport"></div>
                 </div>
             </div>
         </nav>
@@ -432,23 +432,23 @@ Set `dir="rtl"` on the root. Placement, alignment, and arrow-key direction follo
 direction.
 
 ```typescript
+import { cn, demoNavigationMenu } from '../../storybook/styles';
 import { ChangeDetectionStrategy, Component } from '@angular/core';
 import { LucideChevronDown } from '@lucide/angular';
 import { navigationMenuImports } from '@radix-ng/primitives/navigation-menu';
-import { cn, demoNavigationMenu } from '../../storybook/styles';
 
 @Component({
     changeDetection: ChangeDetectionStrategy.Eager,
     selector: 'rdx-navigation-menu-rtl',
     imports: [...navigationMenuImports, LucideChevronDown],
     template: `
-        <nav [class]="m.root" dir="rtl" rdxNavigationMenuRoot>
-            <ul [class]="m.list" dir="rtl" rdxNavigationMenuList>
+        <nav dir="rtl" rdxNavigationMenuRoot [class]="m.root">
+            <ul dir="rtl" rdxNavigationMenuList [class]="m.list">
                 @for (group of groups; track group.value) {
-                    <li [value]="group.value" rdxNavigationMenuItem>
-                        <button [class]="m.trigger" rdxNavigationMenuTrigger>
+                    <li rdxNavigationMenuItem [value]="group.value">
+                        <button rdxNavigationMenuTrigger [class]="m.trigger">
                             {{ group.label }}
-                            <svg [class]="m.icon" rdxNavigationMenuIcon lucideChevronDown></svg>
+                            <svg rdxNavigationMenuIcon lucideChevronDown [class]="m.icon"></svg>
                         </button>
 
                         <ng-container *rdxNavigationMenuContent>
@@ -456,7 +456,7 @@ import { cn, demoNavigationMenu } from '../../storybook/styles';
                                 <ul [class]="m.contentGrid">
                                     @for (link of group.links; track link) {
                                         <li>
-                                            <a [class]="m.cardLink" rdxNavigationMenuLink href="#">
+                                            <a rdxNavigationMenuLink href="#" [class]="m.cardLink">
                                                 <div [class]="m.cardHeading">{{ link }}</div>
                                             </a>
                                         </li>
@@ -468,9 +468,9 @@ import { cn, demoNavigationMenu } from '../../storybook/styles';
                 }
             </ul>
 
-            <div *rdxNavigationMenuPortal [class]="m.positioner" sideOffset="8" rdxNavigationMenuPositioner>
-                <div [class]="m.popup" rdxNavigationMenuPopup>
-                    <div [class]="m.viewport" rdxNavigationMenuViewport></div>
+            <div *rdxNavigationMenuPortal sideOffset="8" rdxNavigationMenuPositioner [class]="m.positioner">
+                <div rdxNavigationMenuPopup [class]="m.popup">
+                    <div rdxNavigationMenuViewport [class]="m.viewport"></div>
                 </div>
             </div>
         </nav>
@@ -492,28 +492,28 @@ export class RdxNavigationMenuRtlComponent {
 A navigation list of links without any popup. Links are plain tabbable anchors and expose `data-active`.
 
 ```typescript
+import { demoNavigationMenu } from '../../storybook/styles';
 import { ChangeDetectionStrategy, Component } from '@angular/core';
 import { navigationMenuImports } from '@radix-ng/primitives/navigation-menu';
-import { demoNavigationMenu } from '../../storybook/styles';
 
 @Component({
     changeDetection: ChangeDetectionStrategy.Eager,
     selector: 'rdx-navigation-menu-links',
     imports: [...navigationMenuImports],
     template: `
-        <nav [class]="m.root" rdxNavigationMenuRoot>
-            <ul [class]="m.list" rdxNavigationMenuList>
+        <nav rdxNavigationMenuRoot [class]="m.root">
+            <ul rdxNavigationMenuList [class]="m.list">
                 <li rdxNavigationMenuItem>
-                    <a [class]="m.link" rdxNavigationMenuLink active href="#">Home</a>
+                    <a rdxNavigationMenuLink active href="#" [class]="m.link">Home</a>
                 </li>
                 <li rdxNavigationMenuItem>
-                    <a [class]="m.link" rdxNavigationMenuLink href="#">Docs</a>
+                    <a rdxNavigationMenuLink href="#" [class]="m.link">Docs</a>
                 </li>
                 <li rdxNavigationMenuItem>
-                    <a [class]="m.link" rdxNavigationMenuLink href="#">Pricing</a>
+                    <a rdxNavigationMenuLink href="#" [class]="m.link">Pricing</a>
                 </li>
                 <li rdxNavigationMenuItem>
-                    <a [class]="m.link" rdxNavigationMenuLink href="#">Blog</a>
+                    <a rdxNavigationMenuLink href="#" [class]="m.link">Blog</a>
                 </li>
             </ul>
         </nav>
@@ -532,10 +532,10 @@ and an "action" link that runs a handler via `(onSelect)` without closing the me
 on a router link.
 
 ```typescript
+import { cn, demoNavigationMenu } from '../../storybook/styles';
 import { ChangeDetectionStrategy, Component, signal } from '@angular/core';
 import { LucideArrowUpRight, LucideBookOpen, LucideChevronDown, LucideCode, LucideLifeBuoy } from '@lucide/angular';
 import { navigationMenuImports } from '@radix-ng/primitives/navigation-menu';
-import { cn, demoNavigationMenu } from '../../storybook/styles';
 
 /**
  * Custom links: `rdxNavigationMenuLink` composes onto your own anchor markup — rich rows with icons,
@@ -555,18 +555,18 @@ import { cn, demoNavigationMenu } from '../../storybook/styles';
         LucideLifeBuoy
     ],
     template: `
-        <nav [class]="m.root" rdxNavigationMenuRoot>
-            <ul [class]="m.list" rdxNavigationMenuList>
+        <nav rdxNavigationMenuRoot [class]="m.root">
+            <ul rdxNavigationMenuList [class]="m.list">
                 <li rdxNavigationMenuItem value="resources">
-                    <button [class]="m.trigger" rdxNavigationMenuTrigger>
+                    <button rdxNavigationMenuTrigger [class]="m.trigger">
                         Resources
-                        <svg [class]="m.icon" rdxNavigationMenuIcon lucideChevronDown></svg>
+                        <svg rdxNavigationMenuIcon lucideChevronDown [class]="m.icon"></svg>
                     </button>
 
                     <ng-container *rdxNavigationMenuContent>
                         <ul class="grid w-[420px] gap-1 p-2">
                             <li>
-                                <a [class]="row" rdxNavigationMenuLink href="#">
+                                <a rdxNavigationMenuLink href="#" [class]="row">
                                     <span [class]="iconBox"><svg lucideBookOpen size="18"></svg></span>
                                     <span class="flex min-w-0 flex-1 flex-col">
                                         <span [class]="m.cardHeading">Documentation</span>
@@ -575,7 +575,7 @@ import { cn, demoNavigationMenu } from '../../storybook/styles';
                                 </a>
                             </li>
                             <li>
-                                <a [class]="row" rdxNavigationMenuLink href="#">
+                                <a rdxNavigationMenuLink href="#" [class]="row">
                                     <span [class]="iconBox"><svg lucideLifeBuoy size="18"></svg></span>
                                     <span class="flex min-w-0 flex-1 flex-col">
                                         <span [class]="m.cardHeading">Support</span>
@@ -586,11 +586,11 @@ import { cn, demoNavigationMenu } from '../../storybook/styles';
                             <li>
                                 <!-- An external link — the directive sits on a normal anchor. -->
                                 <a
-                                    [class]="row"
                                     rel="noreferrer noopener"
                                     target="_blank"
                                     rdxNavigationMenuLink
                                     href="https://github.com/radix-ng/primitives"
+                                    [class]="row"
                                 >
                                     <span [class]="iconBox"><svg lucideCode size="18"></svg></span>
                                     <span class="flex min-w-0 flex-1 flex-col">
@@ -604,7 +604,7 @@ import { cn, demoNavigationMenu } from '../../storybook/styles';
                             </li>
                             <li>
                                 <!-- Action link: keeps the menu open and runs a handler instead of navigating. -->
-                                <a [class]="row" (onSelect)="copy($event)" rdxNavigationMenuLink href="#">
+                                <a rdxNavigationMenuLink href="#" [class]="row" (onSelect)="copy($event)">
                                     <span [class]="iconBox"><svg lucideCode size="18"></svg></span>
                                     <span class="flex min-w-0 flex-1 flex-col">
                                         <span [class]="m.cardHeading">
@@ -621,9 +621,9 @@ import { cn, demoNavigationMenu } from '../../storybook/styles';
                 </li>
             </ul>
 
-            <div *rdxNavigationMenuPortal [class]="m.positioner" sideOffset="8" rdxNavigationMenuPositioner>
-                <div [class]="m.popup" rdxNavigationMenuPopup>
-                    <div [class]="m.viewport" rdxNavigationMenuViewport></div>
+            <div *rdxNavigationMenuPortal sideOffset="8" rdxNavigationMenuPositioner [class]="m.positioner">
+                <div rdxNavigationMenuPopup [class]="m.popup">
+                    <div rdxNavigationMenuViewport [class]="m.viewport"></div>
                 </div>
             </div>
         </nav>
@@ -653,10 +653,10 @@ When the content exceeds the available space, constrain it with a `max-height` a
 viewport measures the capped height, so the popup stays a fixed size and the list scrolls inside it.
 
 ```typescript
+import { cn, demoNavigationMenu } from '../../storybook/styles';
 import { ChangeDetectionStrategy, Component } from '@angular/core';
 import { LucideChevronDown } from '@lucide/angular';
 import { navigationMenuImports } from '@radix-ng/primitives/navigation-menu';
-import { cn, demoNavigationMenu } from '../../storybook/styles';
 
 /**
  * Large menus: when the content exceeds the available space, constrain the content with a
@@ -668,12 +668,12 @@ import { cn, demoNavigationMenu } from '../../storybook/styles';
     selector: 'rdx-navigation-menu-large',
     imports: [...navigationMenuImports, LucideChevronDown],
     template: `
-        <nav [class]="m.root" rdxNavigationMenuRoot>
-            <ul [class]="m.list" rdxNavigationMenuList>
+        <nav rdxNavigationMenuRoot [class]="m.root">
+            <ul rdxNavigationMenuList [class]="m.list">
                 <li rdxNavigationMenuItem value="components">
-                    <button [class]="m.trigger" rdxNavigationMenuTrigger>
+                    <button rdxNavigationMenuTrigger [class]="m.trigger">
                         Components
-                        <svg [class]="m.icon" rdxNavigationMenuIcon lucideChevronDown></svg>
+                        <svg rdxNavigationMenuIcon lucideChevronDown [class]="m.icon"></svg>
                     </button>
 
                     <ng-container *rdxNavigationMenuContent>
@@ -681,7 +681,7 @@ import { cn, demoNavigationMenu } from '../../storybook/styles';
                             <ul class="grid max-h-[320px] gap-1 overflow-y-auto p-2">
                                 @for (item of components; track item.title) {
                                     <li>
-                                        <a [class]="cn(m.cardLink, 'p-2.5')" rdxNavigationMenuLink href="#">
+                                        <a rdxNavigationMenuLink href="#" [class]="cn(m.cardLink, 'p-2.5')">
                                             <div [class]="m.cardHeading">{{ item.title }}</div>
                                             <p [class]="m.cardText">{{ item.text }}</p>
                                         </a>
@@ -693,9 +693,9 @@ import { cn, demoNavigationMenu } from '../../storybook/styles';
                 </li>
             </ul>
 
-            <div *rdxNavigationMenuPortal [class]="m.positioner" sideOffset="8" rdxNavigationMenuPositioner>
-                <div [class]="m.popup" rdxNavigationMenuPopup>
-                    <div [class]="m.viewport" rdxNavigationMenuViewport></div>
+            <div *rdxNavigationMenuPortal sideOffset="8" rdxNavigationMenuPositioner [class]="m.positioner">
+                <div rdxNavigationMenuPopup [class]="m.popup">
+                    <div rdxNavigationMenuViewport [class]="m.viewport"></div>
                 </div>
             </div>
         </nav>
@@ -731,22 +731,22 @@ Render a `rdxNavigationMenuRoot` inside content for a nested menu. The nested ro
 positions its own popup inline, and link selection closes both the nested and parent roots.
 
 ```typescript
+import { cn, demoNavigationMenu } from '../../storybook/styles';
 import { ChangeDetectionStrategy, Component } from '@angular/core';
 import { LucideChevronDown, LucideChevronRight } from '@lucide/angular';
 import { navigationMenuImports } from '@radix-ng/primitives/navigation-menu';
-import { cn, demoNavigationMenu } from '../../storybook/styles';
 
 @Component({
     changeDetection: ChangeDetectionStrategy.Eager,
     selector: 'rdx-navigation-menu-nested',
     imports: [...navigationMenuImports, LucideChevronDown, LucideChevronRight],
     template: `
-        <nav [class]="m.root" rdxNavigationMenuRoot>
-            <ul [class]="m.list" rdxNavigationMenuList>
+        <nav rdxNavigationMenuRoot [class]="m.root">
+            <ul rdxNavigationMenuList [class]="m.list">
                 <li rdxNavigationMenuItem value="overview">
-                    <button [class]="m.trigger" rdxNavigationMenuTrigger>
+                    <button rdxNavigationMenuTrigger [class]="m.trigger">
                         Overview
-                        <svg [class]="m.icon" rdxNavigationMenuIcon lucideChevronDown></svg>
+                        <svg rdxNavigationMenuIcon lucideChevronDown [class]="m.icon"></svg>
                     </button>
 
                     <ng-container *rdxNavigationMenuContent>
@@ -756,7 +756,7 @@ import { cn, demoNavigationMenu } from '../../storybook/styles';
                             <ul [class]="cn(m.contentGrid, 'grid-cols-1 min-[640px]:grid-cols-[12rem_12rem]')">
                                 @for (item of overviewLinks; track item.href) {
                                     <li>
-                                        <a [class]="m.cardLink" [href]="item.href" rdxNavigationMenuLink>
+                                        <a rdxNavigationMenuLink [class]="m.cardLink" [href]="item.href">
                                             <div [class]="m.cardHeading">{{ item.title }}</div>
                                             <p [class]="m.cardText">{{ item.description }}</p>
                                         </a>
@@ -765,28 +765,28 @@ import { cn, demoNavigationMenu } from '../../storybook/styles';
 
                                 <li>
                                     <nav orientation="vertical" rdxNavigationMenuRoot>
-                                        <ul [class]="m.contentGrid" rdxNavigationMenuList>
+                                        <ul rdxNavigationMenuList [class]="m.contentGrid">
                                             <li rdxNavigationMenuItem value="handbook">
                                                 <button
+                                                    rdxNavigationMenuTrigger
                                                     [class]="
                                                         cn(
                                                             m.cardLink,
                                                             'relative w-full border-0 bg-transparent text-left text-inherit'
                                                         )
                                                     "
-                                                    rdxNavigationMenuTrigger
                                                 >
                                                     <span [class]="m.cardHeading">Handbook</span>
                                                     <p [class]="m.cardText">How to use Base UI effectively.</p>
                                                     <svg
+                                                        rdxNavigationMenuIcon
+                                                        lucideChevronRight
                                                         [class]="
                                                             cn(
                                                                 m.icon,
                                                                 'absolute top-1/2 right-2.5 -translate-y-1/2 data-[popup-open]:rotate-0'
                                                             )
                                                         "
-                                                        rdxNavigationMenuIcon
-                                                        lucideChevronRight
                                                     ></svg>
                                                 </button>
 
@@ -800,9 +800,9 @@ import { cn, demoNavigationMenu } from '../../storybook/styles';
                                                             @for (item of handbookLinks; track item.href) {
                                                                 <li>
                                                                     <a
+                                                                        rdxNavigationMenuLink
                                                                         [class]="m.cardLink"
                                                                         [href]="item.href"
-                                                                        rdxNavigationMenuLink
                                                                     >
                                                                         <div [class]="m.cardHeading">
                                                                             {{ item.title }}
@@ -821,15 +821,15 @@ import { cn, demoNavigationMenu } from '../../storybook/styles';
 
                                         <div
                                             *rdxNavigationMenuPortal
-                                            [class]="m.positioner"
-                                            [align]="'end'"
-                                            [alignOffset]="-8"
                                             side="right"
                                             sideOffset="8"
                                             rdxNavigationMenuPositioner
+                                            [class]="m.positioner"
+                                            [align]="'end'"
+                                            [alignOffset]="-8"
                                         >
-                                            <div [class]="cn(m.popup, 'text-left')" rdxNavigationMenuPopup>
-                                                <div [class]="m.viewport" rdxNavigationMenuViewport></div>
+                                            <div rdxNavigationMenuPopup [class]="cn(m.popup, 'text-left')">
+                                                <div rdxNavigationMenuViewport [class]="m.viewport"></div>
                                             </div>
                                         </div>
                                     </nav>
@@ -840,19 +840,19 @@ import { cn, demoNavigationMenu } from '../../storybook/styles';
                 </li>
             </ul>
 
-            <div *rdxNavigationMenuPortal [class]="m.positioner" sideOffset="10" rdxNavigationMenuPositioner>
-                <div [class]="m.popup" rdxNavigationMenuPopup>
+            <div *rdxNavigationMenuPortal sideOffset="10" rdxNavigationMenuPositioner [class]="m.positioner">
+                <div rdxNavigationMenuPopup [class]="m.popup">
                     <svg
-                        [class]="m.arrow"
                         width="10"
                         height="5"
                         viewBox="0 0 30 10"
                         preserveAspectRatio="none"
                         rdxNavigationMenuArrow
+                        [class]="m.arrow"
                     >
                         <polygon points="0,0 30,0 15,10" />
                     </svg>
-                    <div [class]="m.viewport" rdxNavigationMenuViewport></div>
+                    <div rdxNavigationMenuViewport [class]="m.viewport"></div>
                 </div>
             </div>
         </nav>
@@ -908,10 +908,10 @@ A second level that stays in the same panel: inside the outer content, render an
 keeps the inline panel persistent.
 
 ```typescript
+import { cn, demoNavigationMenu } from '../../storybook/styles';
 import { ChangeDetectionStrategy, Component, signal } from '@angular/core';
 import { LucideChevronDown } from '@lucide/angular';
 import { navigationMenuImports } from '@radix-ng/primitives/navigation-menu';
-import { cn, demoNavigationMenu } from '../../storybook/styles';
 
 /**
  * Nested inline submenus: a second level that stays in the same panel. Inside the outer Content we
@@ -924,32 +924,32 @@ import { cn, demoNavigationMenu } from '../../storybook/styles';
     selector: 'rdx-navigation-menu-nested-inline',
     imports: [...navigationMenuImports, LucideChevronDown],
     template: `
-        <nav [class]="m.root" rdxNavigationMenuRoot>
-            <ul [class]="m.list" rdxNavigationMenuList>
+        <nav rdxNavigationMenuRoot [class]="m.root">
+            <ul rdxNavigationMenuList [class]="m.list">
                 <li rdxNavigationMenuItem value="browse">
-                    <button [class]="m.trigger" rdxNavigationMenuTrigger>
+                    <button rdxNavigationMenuTrigger [class]="m.trigger">
                         Browse
-                        <svg [class]="m.icon" rdxNavigationMenuIcon lucideChevronDown></svg>
+                        <svg rdxNavigationMenuIcon lucideChevronDown [class]="m.icon"></svg>
                     </button>
 
                     <ng-container *rdxNavigationMenuContent>
                         <!-- Inline second-level menu (flex row): categories left, viewport right. -->
                         <nav
                             class="flex w-[560px]"
-                            [value]="active()"
-                            (onValueChange)="onActive($event)"
                             orientation="vertical"
                             rdxNavigationMenuRoot
+                            [value]="active()"
+                            (onValueChange)="onActive($event)"
                         >
                             <ul
                                 class="border-border flex w-44 shrink-0 flex-col gap-1 border-r p-2"
                                 rdxNavigationMenuList
                             >
                                 @for (cat of categories; track cat.value) {
-                                    <li [value]="cat.value" rdxNavigationMenuItem>
+                                    <li rdxNavigationMenuItem [value]="cat.value">
                                         <button
-                                            [class]="cn(m.trigger, 'w-full justify-start')"
                                             rdxNavigationMenuTrigger
+                                            [class]="cn(m.trigger, 'w-full justify-start')"
                                         >
                                             {{ cat.label }}
                                         </button>
@@ -958,7 +958,7 @@ import { cn, demoNavigationMenu } from '../../storybook/styles';
                                             <ul class="grid gap-1">
                                                 @for (link of cat.links; track link.title) {
                                                     <li>
-                                                        <a [class]="m.cardLink" rdxNavigationMenuLink href="#">
+                                                        <a rdxNavigationMenuLink href="#" [class]="m.cardLink">
                                                             <div [class]="m.cardHeading">{{ link.title }}</div>
                                                             <p [class]="m.cardText">{{ link.text }}</p>
                                                         </a>
@@ -970,19 +970,19 @@ import { cn, demoNavigationMenu } from '../../storybook/styles';
                                 }
                             </ul>
 
-                            <div [class]="inlineViewport" rdxNavigationMenuViewport></div>
+                            <div rdxNavigationMenuViewport [class]="inlineViewport"></div>
                         </nav>
                     </ng-container>
                 </li>
 
                 <li rdxNavigationMenuItem>
-                    <a [class]="m.link" rdxNavigationMenuLink href="#">Pricing</a>
+                    <a rdxNavigationMenuLink href="#" [class]="m.link">Pricing</a>
                 </li>
             </ul>
 
-            <div *rdxNavigationMenuPortal [class]="m.positioner" sideOffset="8" rdxNavigationMenuPositioner>
-                <div [class]="m.popup" rdxNavigationMenuPopup>
-                    <div [class]="m.viewport" rdxNavigationMenuViewport></div>
+            <div *rdxNavigationMenuPortal sideOffset="8" rdxNavigationMenuPositioner [class]="m.positioner">
+                <div rdxNavigationMenuPopup [class]="m.popup">
+                    <div rdxNavigationMenuViewport [class]="m.viewport"></div>
                 </div>
             </div>
         </nav>
diff --git a/skills/radix-ng-examples/references/components/number-field.md b/skills/radix-ng-examples/references/components/number-field.md
index 799a3d295..b6164a9e0 100644
--- a/skills/radix-ng-examples/references/components/number-field.md
+++ b/skills/radix-ng-examples/references/components/number-field.md
@@ -25,7 +25,7 @@ import {
         RdxNumberFieldDecrement
     ],
     template: `
-        <div class="flex flex-col gap-1.5" [id]="'quantity'" [defaultValue]="100" [min]="0" rdxNumberFieldRoot>
+        <div class="flex flex-col gap-1.5" rdxNumberFieldRoot [id]="'quantity'" [defaultValue]="100" [min]="0">
             <label class="text-foreground text-sm font-medium" for="quantity">Quantity</label>
             <div
                 class="border-border bg-background focus-within:ring-ring flex h-9 w-fit items-center rounded-md border shadow-sm focus-within:ring-2"
@@ -35,7 +35,7 @@ import {
                     class="text-foreground hover:bg-muted flex size-9 items-center justify-center rounded-l-md outline-none select-none disabled:pointer-events-none disabled:opacity-40"
                     rdxNumberFieldDecrement
                 >
-                    <svg class="flex" [lucideIcon]="Minus" size="16" />
+                    <svg class="flex" size="16" [lucideIcon]="Minus" />
                 </button>
                 <input
                     class="text-foreground h-9 w-16 bg-transparent text-center tabular-nums outline-none"
@@ -45,7 +45,7 @@ import {
                     class="text-foreground hover:bg-muted flex size-9 items-center justify-center rounded-r-md outline-none select-none disabled:pointer-events-none disabled:opacity-40"
                     rdxNumberFieldIncrement
                 >
-                    <svg class="flex" [lucideIcon]="Plus" size="16" />
+                    <svg class="flex" size="16" [lucideIcon]="Plus" />
                 </button>
             </div>
         </div>
@@ -158,7 +158,7 @@ import {
         RdxNumberFieldDecrement
     ],
     template: `
-        <div class="flex flex-col gap-1.5" [id]="'quantity'" [defaultValue]="100" [min]="0" rdxNumberFieldRoot>
+        <div class="flex flex-col gap-1.5" rdxNumberFieldRoot [id]="'quantity'" [defaultValue]="100" [min]="0">
             <label class="text-foreground text-sm font-medium" for="quantity">Quantity</label>
             <div
                 class="border-border bg-background focus-within:ring-ring flex h-9 w-fit items-center rounded-md border shadow-sm focus-within:ring-2"
@@ -168,7 +168,7 @@ import {
                     class="text-foreground hover:bg-muted flex size-9 items-center justify-center rounded-l-md outline-none select-none disabled:pointer-events-none disabled:opacity-40"
                     rdxNumberFieldDecrement
                 >
-                    <svg class="flex" [lucideIcon]="Minus" size="16" />
+                    <svg class="flex" size="16" [lucideIcon]="Minus" />
                 </button>
                 <input
                     class="text-foreground h-9 w-16 bg-transparent text-center tabular-nums outline-none"
@@ -178,7 +178,7 @@ import {
                     class="text-foreground hover:bg-muted flex size-9 items-center justify-center rounded-r-md outline-none select-none disabled:pointer-events-none disabled:opacity-40"
                     rdxNumberFieldIncrement
                 >
-                    <svg class="flex" [lucideIcon]="Plus" size="16" />
+                    <svg class="flex" size="16" [lucideIcon]="Plus" />
                 </button>
             </div>
         </div>
@@ -220,10 +220,10 @@ import {
         <div
             class="flex flex-col gap-1.5"
             id="decimal"
+            rdxNumberFieldRoot
             [defaultValue]="0"
             [format]="format"
             [step]="0.1"
-            rdxNumberFieldRoot
         >
             <label class="text-foreground text-sm font-medium" for="decimal">Decimal</label>
             <div
@@ -234,7 +234,7 @@ import {
                     class="text-foreground hover:bg-muted flex size-9 items-center justify-center rounded-l-md outline-none select-none disabled:pointer-events-none disabled:opacity-40"
                     rdxNumberFieldDecrement
                 >
-                    <svg class="flex" [lucideIcon]="Minus" size="16" />
+                    <svg class="flex" size="16" [lucideIcon]="Minus" />
                 </button>
                 <input
                     class="text-foreground h-9 w-20 bg-transparent text-center tabular-nums outline-none"
@@ -244,7 +244,7 @@ import {
                     class="text-foreground hover:bg-muted flex size-9 items-center justify-center rounded-r-md outline-none select-none disabled:pointer-events-none disabled:opacity-40"
                     rdxNumberFieldIncrement
                 >
-                    <svg class="flex" [lucideIcon]="Plus" size="16" />
+                    <svg class="flex" size="16" [lucideIcon]="Plus" />
                 </button>
             </div>
         </div>
@@ -292,10 +292,10 @@ import {
         <div
             class="flex flex-col gap-1.5"
             id="percentage"
+            rdxNumberFieldRoot
             [defaultValue]="0.05"
             [format]="format"
             [step]="0.01"
-            rdxNumberFieldRoot
         >
             <label class="text-foreground text-sm font-medium" for="percentage">Percentage</label>
             <div
@@ -306,7 +306,7 @@ import {
                     class="text-foreground hover:bg-muted flex size-9 items-center justify-center rounded-l-md outline-none select-none disabled:pointer-events-none disabled:opacity-40"
                     rdxNumberFieldDecrement
                 >
-                    <svg class="flex" [lucideIcon]="Minus" size="16" />
+                    <svg class="flex" size="16" [lucideIcon]="Minus" />
                 </button>
                 <input
                     class="text-foreground h-9 w-20 bg-transparent text-center tabular-nums outline-none"
@@ -316,7 +316,7 @@ import {
                     class="text-foreground hover:bg-muted flex size-9 items-center justify-center rounded-r-md outline-none select-none disabled:pointer-events-none disabled:opacity-40"
                     rdxNumberFieldIncrement
                 >
-                    <svg class="flex" [lucideIcon]="Plus" size="16" />
+                    <svg class="flex" size="16" [lucideIcon]="Plus" />
                 </button>
             </div>
         </div>
@@ -359,7 +359,7 @@ import {
         RdxNumberFieldDecrement
     ],
     template: `
-        <div class="flex flex-col gap-1.5" [id]="'currency'" [defaultValue]="5" [format]="format" rdxNumberFieldRoot>
+        <div class="flex flex-col gap-1.5" rdxNumberFieldRoot [id]="'currency'" [defaultValue]="5" [format]="format">
             <label class="text-foreground text-sm font-medium" for="currency">Price</label>
             <div
                 class="border-border bg-background focus-within:ring-ring flex h-9 w-fit items-center rounded-md border shadow-sm focus-within:ring-2"
@@ -369,7 +369,7 @@ import {
                     class="text-foreground hover:bg-muted flex size-9 items-center justify-center rounded-l-md outline-none select-none disabled:pointer-events-none disabled:opacity-40"
                     rdxNumberFieldDecrement
                 >
-                    <svg class="flex" [lucideIcon]="Minus" size="16" />
+                    <svg class="flex" size="16" [lucideIcon]="Minus" />
                 </button>
                 <input
                     class="text-foreground h-9 w-28 bg-transparent text-center tabular-nums outline-none"
@@ -379,7 +379,7 @@ import {
                     class="text-foreground hover:bg-muted flex size-9 items-center justify-center rounded-r-md outline-none select-none disabled:pointer-events-none disabled:opacity-40"
                     rdxNumberFieldIncrement
                 >
-                    <svg class="flex" [lucideIcon]="Plus" size="16" />
+                    <svg class="flex" size="16" [lucideIcon]="Plus" />
                 </button>
             </div>
         </div>
@@ -433,15 +433,15 @@ import {
         RdxNumberFieldScrubAreaCursor
     ],
     template: `
-        <div class="flex flex-col gap-1.5" [id]="'scrub'" [defaultValue]="0" rdxNumberFieldRoot>
+        <div class="flex flex-col gap-1.5" rdxNumberFieldRoot [id]="'scrub'" [defaultValue]="0">
             <div
                 class="text-foreground flex w-fit cursor-ew-resize items-center gap-1.5 text-sm font-medium select-none"
                 rdxNumberFieldScrubArea
             >
-                <svg class="flex" [lucideIcon]="Move" size="16" />
+                <svg class="flex" size="16" [lucideIcon]="Move" />
                 <label for="scrub">Drag to scrub</label>
                 <span class="text-popover-foreground" rdxNumberFieldScrubAreaCursor>
-                    <svg class="flex" [lucideIcon]="Move" size="20" />
+                    <svg class="flex" size="20" [lucideIcon]="Move" />
                 </span>
             </div>
             <div
@@ -452,7 +452,7 @@ import {
                     class="text-foreground hover:bg-muted flex size-9 items-center justify-center rounded-l-md outline-none select-none disabled:pointer-events-none disabled:opacity-40"
                     rdxNumberFieldDecrement
                 >
-                    <svg class="flex" [lucideIcon]="Minus" size="16" />
+                    <svg class="flex" size="16" [lucideIcon]="Minus" />
                 </button>
                 <input
                     class="text-foreground h-9 w-16 bg-transparent text-center tabular-nums outline-none"
@@ -462,7 +462,7 @@ import {
                     class="text-foreground hover:bg-muted flex size-9 items-center justify-center rounded-r-md outline-none select-none disabled:pointer-events-none disabled:opacity-40"
                     rdxNumberFieldIncrement
                 >
-                    <svg class="flex" [lucideIcon]="Plus" size="16" />
+                    <svg class="flex" size="16" [lucideIcon]="Plus" />
                 </button>
             </div>
         </div>
@@ -510,11 +510,11 @@ import {
             <div
                 class="flex flex-col gap-1.5"
                 id="guests"
-                [min]="1"
-                [max]="9"
                 name="guests"
                 formControlName="guests"
                 rdxNumberFieldRoot
+                [min]="1"
+                [max]="9"
             >
                 <label class="text-foreground text-sm font-medium" for="guests">Guests</label>
                 <input rdxNumberFieldHiddenInput />
@@ -526,7 +526,7 @@ import {
                         class="text-foreground hover:bg-muted flex size-9 items-center justify-center rounded-l-md outline-none select-none disabled:pointer-events-none disabled:opacity-40"
                         rdxNumberFieldDecrement
                     >
-                        <svg class="flex" [lucideIcon]="Minus" size="16" />
+                        <svg class="flex" size="16" [lucideIcon]="Minus" />
                     </button>
                     <input
                         class="text-foreground h-9 w-16 bg-transparent text-center tabular-nums outline-none"
@@ -536,7 +536,7 @@ import {
                         class="text-foreground hover:bg-muted flex size-9 items-center justify-center rounded-r-md outline-none select-none disabled:pointer-events-none disabled:opacity-40"
                         rdxNumberFieldIncrement
                     >
-                        <svg class="flex" [lucideIcon]="Plus" size="16" />
+                        <svg class="flex" size="16" [lucideIcon]="Plus" />
                     </button>
                 </div>
             </div>
diff --git a/skills/radix-ng-examples/references/components/popover.md b/skills/radix-ng-examples/references/components/popover.md
index 5c3c93615..f567e064c 100644
--- a/skills/radix-ng-examples/references/components/popover.md
+++ b/skills/radix-ng-examples/references/components/popover.md
@@ -6,10 +6,10 @@ Popover composes the shared Popper, structural Portal (portal + presence), Dismi
 Scope primitives. It remains headless: styles and native CSS animations belong to the consumer.
 
 ```typescript
+import { cn, demoButton, demoInput, demoPopover } from '../../storybook/styles';
 import { ChangeDetectionStrategy, Component } from '@angular/core';
 import { LucidePlus, LucideX } from '@lucide/angular';
 import { popoverImports } from '@radix-ng/primitives/popover';
-import { cn, demoButton, demoInput, demoPopover } from '../../storybook/styles';
 
 @Component({
     changeDetection: ChangeDetectionStrategy.Eager,
@@ -17,29 +17,29 @@ import { cn, demoButton, demoInput, demoPopover } from '../../storybook/styles';
     imports: [...popoverImports, LucidePlus, LucideX],
     template: `
         <ng-container rdxPopoverRoot>
-            <button [class]="cn(b.base, b.outline, b.size.md)" rdxPopoverTrigger>
+            <button rdxPopoverTrigger [class]="cn(b.base, b.outline, b.size.md)">
                 <svg aria-hidden="true" lucidePlus size="16" />
                 Add details
             </button>
 
-            <div *rdxPopoverPortal [class]="p.positioner" sideOffset="8" rdxPopoverPositioner>
-                <div [class]="p.popup" rdxPopoverPopup>
-                    <span [class]="p.arrow" rdxPopoverArrow></span>
-                    <h2 [class]="p.title" rdxPopoverTitle>Dimensions</h2>
-                    <p [class]="p.description" rdxPopoverDescription>Set the width and height for the element.</p>
+            <div *rdxPopoverPortal sideOffset="8" rdxPopoverPositioner [class]="p.positioner">
+                <div rdxPopoverPopup [class]="p.popup">
+                    <span rdxPopoverArrow [class]="p.arrow"></span>
+                    <h2 rdxPopoverTitle [class]="p.title">Dimensions</h2>
+                    <p rdxPopoverDescription [class]="p.description">Set the width and height for the element.</p>
 
                     <div class="mt-4 grid gap-3">
                         <label class="grid gap-1 text-xs font-medium">
                             Width
-                            <input [class]="input" value="100%" />
+                            <input value="100%" [class]="input" />
                         </label>
                         <label class="grid gap-1 text-xs font-medium">
                             Max width
-                            <input [class]="input" value="300px" />
+                            <input value="300px" [class]="input" />
                         </label>
                     </div>
 
-                    <button [class]="p.close" aria-label="Close" rdxPopoverClose>
+                    <button aria-label="Close" rdxPopoverClose [class]="p.close">
                         <svg aria-hidden="true" lucideX size="14" />
                     </button>
                 </div>
@@ -147,10 +147,10 @@ the positioner — use the explicit `<ng-template rdxPopoverPortal>` form (and t
 A form-like popup with an arrow, accessible title and description, and a close button.
 
 ```typescript
+import { cn, demoButton, demoInput, demoPopover } from '../../storybook/styles';
 import { ChangeDetectionStrategy, Component } from '@angular/core';
 import { LucidePlus, LucideX } from '@lucide/angular';
 import { popoverImports } from '@radix-ng/primitives/popover';
-import { cn, demoButton, demoInput, demoPopover } from '../../storybook/styles';
 
 @Component({
     changeDetection: ChangeDetectionStrategy.Eager,
@@ -158,29 +158,29 @@ import { cn, demoButton, demoInput, demoPopover } from '../../storybook/styles';
     imports: [...popoverImports, LucidePlus, LucideX],
     template: `
         <ng-container rdxPopoverRoot>
-            <button [class]="cn(b.base, b.outline, b.size.md)" rdxPopoverTrigger>
+            <button rdxPopoverTrigger [class]="cn(b.base, b.outline, b.size.md)">
                 <svg aria-hidden="true" lucidePlus size="16" />
                 Add details
             </button>
 
-            <div *rdxPopoverPortal [class]="p.positioner" sideOffset="8" rdxPopoverPositioner>
-                <div [class]="p.popup" rdxPopoverPopup>
-                    <span [class]="p.arrow" rdxPopoverArrow></span>
-                    <h2 [class]="p.title" rdxPopoverTitle>Dimensions</h2>
-                    <p [class]="p.description" rdxPopoverDescription>Set the width and height for the element.</p>
+            <div *rdxPopoverPortal sideOffset="8" rdxPopoverPositioner [class]="p.positioner">
+                <div rdxPopoverPopup [class]="p.popup">
+                    <span rdxPopoverArrow [class]="p.arrow"></span>
+                    <h2 rdxPopoverTitle [class]="p.title">Dimensions</h2>
+                    <p rdxPopoverDescription [class]="p.description">Set the width and height for the element.</p>
 
                     <div class="mt-4 grid gap-3">
                         <label class="grid gap-1 text-xs font-medium">
                             Width
-                            <input [class]="input" value="100%" />
+                            <input value="100%" [class]="input" />
                         </label>
                         <label class="grid gap-1 text-xs font-medium">
                             Max width
-                            <input [class]="input" value="300px" />
+                            <input value="300px" [class]="input" />
                         </label>
                     </div>
 
-                    <button [class]="p.close" aria-label="Close" rdxPopoverClose>
+                    <button aria-label="Close" rdxPopoverClose [class]="p.close">
                         <svg aria-hidden="true" lucideX size="14" />
                     </button>
                 </div>
@@ -202,10 +202,10 @@ Bind `[(open)]` when application state should open or close the popover programm
 example also includes the optional backdrop part.
 
 ```typescript
+import { cn, demoButton, demoPopover } from '../../storybook/styles';
 import { ChangeDetectionStrategy, Component, signal } from '@angular/core';
 import { LucideX } from '@lucide/angular';
 import { popoverImports } from '@radix-ng/primitives/popover';
-import { cn, demoButton, demoPopover } from '../../storybook/styles';
 
 @Component({
     changeDetection: ChangeDetectionStrategy.Eager,
@@ -220,19 +220,19 @@ import { cn, demoButton, demoPopover } from '../../storybook/styles';
 
             <p class="text-muted-foreground text-xs">State: {{ open() ? 'open' : 'closed' }}</p>
 
-            <ng-container [(open)]="open" rdxPopoverRoot>
-                <button [class]="cn(b.base, b.outline, b.size.md)" rdxPopoverTrigger>Toggle popover</button>
+            <ng-container rdxPopoverRoot [(open)]="open">
+                <button rdxPopoverTrigger [class]="cn(b.base, b.outline, b.size.md)">Toggle popover</button>
 
                 <ng-template rdxPopoverPortal>
-                    <div [class]="p.backdrop" rdxPopoverBackdrop></div>
-                    <div [class]="p.positioner" sideOffset="8" rdxPopoverPositioner>
-                        <div [class]="p.popup" rdxPopoverPopup>
-                            <span [class]="p.arrow" rdxPopoverArrow></span>
-                            <h2 [class]="p.title" rdxPopoverTitle>Controlled state</h2>
-                            <p [class]="p.description" rdxPopoverDescription>
+                    <div rdxPopoverBackdrop [class]="p.backdrop"></div>
+                    <div sideOffset="8" rdxPopoverPositioner [class]="p.positioner">
+                        <div rdxPopoverPopup [class]="p.popup">
+                            <span rdxPopoverArrow [class]="p.arrow"></span>
+                            <h2 rdxPopoverTitle [class]="p.title">Controlled state</h2>
+                            <p rdxPopoverDescription [class]="p.description">
                                 The root uses Angular two-way binding with a signal.
                             </p>
-                            <button [class]="p.close" aria-label="Close" rdxPopoverClose>
+                            <button aria-label="Close" rdxPopoverClose [class]="p.close">
                                 <svg aria-hidden="true" lucideX size="14" />
                             </button>
                         </div>
@@ -256,10 +256,10 @@ Bind both `[(open)]` and `[(triggerId)]` when application state should choose th
 `onOpenChange` reports the trigger element, trigger id, source event, and change reason.
 
 ```typescript
+import { cn, demoButton, demoPopover } from '../../storybook/styles';
 import { ChangeDetectionStrategy, Component, signal } from '@angular/core';
 import { LucideX } from '@lucide/angular';
 import { popoverImports, RdxPopoverOpenChange } from '@radix-ng/primitives/popover';
-import { cn, demoButton, demoPopover } from '../../storybook/styles';
 
 @Component({
     changeDetection: ChangeDetectionStrategy.Eager,
@@ -268,18 +268,18 @@ import { cn, demoButton, demoPopover } from '../../storybook/styles';
     template: `
         <div class="flex flex-col items-center gap-4">
             <ng-container
+                rdxPopoverRoot
                 [(open)]="open"
                 [(triggerId)]="triggerId"
                 (onOpenChange)="handleOpenChange($event)"
-                rdxPopoverRoot
             >
                 <div class="flex flex-wrap justify-center gap-2">
                     @for (item of items; track item.id) {
                         <button
+                            rdxPopoverTrigger
                             [class]="cn(b.base, b.outline, b.size.sm)"
                             [id]="item.id"
                             [payload]="item"
-                            rdxPopoverTrigger
                         >
                             {{ item.label }}
                         </button>
@@ -290,14 +290,14 @@ import { cn, demoButton, demoPopover } from '../../storybook/styles';
                     </button>
                 </div>
 
-                <div *rdxPopoverPortal [class]="p.positioner" sideOffset="8" rdxPopoverPositioner>
-                    <div [class]="p.popup" rdxPopoverPopup>
-                        <span [class]="p.arrow" rdxPopoverArrow></span>
-                        <h2 [class]="p.title" rdxPopoverTitle>{{ activeItem()?.label }}</h2>
-                        <p [class]="p.description" rdxPopoverDescription>
+                <div *rdxPopoverPortal sideOffset="8" rdxPopoverPositioner [class]="p.positioner">
+                    <div rdxPopoverPopup [class]="p.popup">
+                        <span rdxPopoverArrow [class]="p.arrow"></span>
+                        <h2 rdxPopoverTitle [class]="p.title">{{ activeItem()?.label }}</h2>
+                        <p rdxPopoverDescription [class]="p.description">
                             The externally controlled trigger id is {{ triggerId() }}.
                         </p>
-                        <button [class]="p.close" aria-label="Close" rdxPopoverClose>
+                        <button aria-label="Close" rdxPopoverClose [class]="p.close">
                             <svg aria-hidden="true" lucideX size="14" />
                         </button>
                     </div>
@@ -345,11 +345,11 @@ Configure `side`, `sideOffset`, `align`, and collision behavior on `rdxPopoverPo
 shared Popper primitive updates `data-side` and `data-align` after collision handling.
 
 ```typescript
+import { cn, demoButton, demoPopover } from '../../storybook/styles';
 import { ChangeDetectionStrategy, Component, signal } from '@angular/core';
 import { LucideX } from '@lucide/angular';
 import { popoverImports } from '@radix-ng/primitives/popover';
 import { Side } from '@radix-ng/primitives/popper';
-import { cn, demoButton, demoPopover } from '../../storybook/styles';
 
 @Component({
     changeDetection: ChangeDetectionStrategy.Eager,
@@ -369,22 +369,22 @@ import { cn, demoButton, demoPopover } from '../../storybook/styles';
             </div>
 
             <ng-container rdxPopoverRoot>
-                <button [class]="cn(b.base, b.outline, b.size.md)" rdxPopoverTrigger>Open {{ selectedSide() }}</button>
+                <button rdxPopoverTrigger [class]="cn(b.base, b.outline, b.size.md)">Open {{ selectedSide() }}</button>
 
                 <div
                     *rdxPopoverPortal
-                    [class]="p.positioner"
-                    [side]="selectedSide()"
                     sideOffset="8"
                     rdxPopoverPositioner
+                    [class]="p.positioner"
+                    [side]="selectedSide()"
                 >
-                    <div [class]="p.popup" rdxPopoverPopup>
-                        <span [class]="p.arrow" rdxPopoverArrow></span>
-                        <h2 [class]="p.title" rdxPopoverTitle>Positioned popup</h2>
-                        <p [class]="p.description" rdxPopoverDescription>
+                    <div rdxPopoverPopup [class]="p.popup">
+                        <span rdxPopoverArrow [class]="p.arrow"></span>
+                        <h2 rdxPopoverTitle [class]="p.title">Positioned popup</h2>
+                        <p rdxPopoverDescription [class]="p.description">
                             The positioner delegates collision handling to the shared Popper primitive.
                         </p>
-                        <button [class]="p.close" aria-label="Close" rdxPopoverClose>
+                        <button aria-label="Close" rdxPopoverClose [class]="p.close">
                             <svg aria-hidden="true" lucideX size="14" />
                         </button>
                     </div>
@@ -409,10 +409,10 @@ fade — the closed-state keyframes keep the content mounted until `animationend
 zoom/slide belongs on the popup, so it never fights the positioner's placement transform.
 
 ```typescript
+import { cn, demoButton, demoPopover } from '../../storybook/styles';
 import { ChangeDetectionStrategy, Component } from '@angular/core';
 import { LucideX } from '@lucide/angular';
 import { popoverImports } from '@radix-ng/primitives/popover';
-import { cn, demoButton, demoPopover } from '../../storybook/styles';
 
 @Component({
     changeDetection: ChangeDetectionStrategy.Eager,
@@ -420,16 +420,16 @@ import { cn, demoButton, demoPopover } from '../../storybook/styles';
     imports: [...popoverImports, LucideX],
     template: `
         <ng-container rdxPopoverRoot>
-            <button [class]="cn(b.base, b.outline, b.size.md)" rdxPopoverTrigger>Animated popover</button>
+            <button rdxPopoverTrigger [class]="cn(b.base, b.outline, b.size.md)">Animated popover</button>
 
-            <div *rdxPopoverPortal [class]="p.positioner" sideOffset="8" rdxPopoverPositioner>
-                <div [class]="cn(p.popup, p.popupAnimated)" rdxPopoverPopup>
-                    <span [class]="p.arrow" rdxPopoverArrow></span>
-                    <h2 [class]="p.title" rdxPopoverTitle>Native CSS keyframes</h2>
-                    <p [class]="p.description" rdxPopoverDescription>
+            <div *rdxPopoverPortal sideOffset="8" rdxPopoverPositioner [class]="p.positioner">
+                <div rdxPopoverPopup [class]="cn(p.popup, p.popupAnimated)">
+                    <span rdxPopoverArrow [class]="p.arrow"></span>
+                    <h2 rdxPopoverTitle [class]="p.title">Native CSS keyframes</h2>
+                    <p rdxPopoverDescription [class]="p.description">
                         Presence keeps this content mounted until the exit animation finishes.
                     </p>
-                    <button [class]="p.close" aria-label="Close" rdxPopoverClose>
+                    <button aria-label="Close" rdxPopoverClose [class]="p.close">
                         <svg aria-hidden="true" lucideX size="14" />
                     </button>
                 </div>
@@ -450,10 +450,10 @@ Set `modal` on `rdxPopoverRoot` to block outside interaction, or use `"trap-focu
 inside while leaving document scrolling and outside pointer interactions available.
 
 ```typescript
+import { cn, demoButton, demoInput, demoPopover } from '../../storybook/styles';
 import { ChangeDetectionStrategy, Component, signal } from '@angular/core';
 import { LucideX } from '@lucide/angular';
 import { popoverImports, RdxPopoverModal } from '@radix-ng/primitives/popover';
-import { cn, demoButton, demoInput, demoPopover } from '../../storybook/styles';
 
 @Component({
     changeDetection: ChangeDetectionStrategy.Eager,
@@ -476,31 +476,31 @@ import { cn, demoButton, demoInput, demoPopover } from '../../storybook/styles';
                 {{ description() }}
             </p>
 
-            <ng-container [modal]="modal()" rdxPopoverRoot>
-                <button [class]="cn(b.base, b.outline, b.size.md)" rdxPopoverTrigger>Open popover</button>
+            <ng-container rdxPopoverRoot [modal]="modal()">
+                <button rdxPopoverTrigger [class]="cn(b.base, b.outline, b.size.md)">Open popover</button>
 
                 <ng-template rdxPopoverPortal>
                     @if (modal() === true) {
-                        <div [class]="p.backdrop" rdxPopoverBackdrop></div>
+                        <div rdxPopoverBackdrop [class]="p.backdrop"></div>
                     }
-                    <div [class]="p.positioner" sideOffset="8" rdxPopoverPositioner>
-                        <div [class]="p.popup" rdxPopoverPopup>
-                            <span [class]="p.arrow" rdxPopoverArrow></span>
-                            <h2 [class]="p.title" rdxPopoverTitle>Modal behavior</h2>
-                            <p [class]="p.description" rdxPopoverDescription>
+                    <div sideOffset="8" rdxPopoverPositioner [class]="p.positioner">
+                        <div rdxPopoverPopup [class]="p.popup">
+                            <span rdxPopoverArrow [class]="p.arrow"></span>
+                            <h2 rdxPopoverTitle [class]="p.title">Modal behavior</h2>
+                            <p rdxPopoverDescription [class]="p.description">
                                 Switch modes, use Tab to move between controls, then try the outside button.
                             </p>
 
                             <label class="mt-4 grid gap-1 text-xs font-medium">
                                 Name
-                                <input [class]="input" placeholder="Focused when opened" />
+                                <input placeholder="Focused when opened" [class]="input" />
                             </label>
 
-                            <button [class]="cn(b.base, b.primary, b.size.sm, 'mt-3')" type="button">
+                            <button type="button" [class]="cn(b.base, b.primary, b.size.sm, 'mt-3')">
                                 Save changes
                             </button>
 
-                            <button [class]="p.close" aria-label="Close" rdxPopoverClose>
+                            <button aria-label="Close" rdxPopoverClose [class]="p.close">
                                 <svg aria-hidden="true" lucideX size="14" />
                             </button>
                         </div>
@@ -546,10 +546,10 @@ Pass `[anchor]` to `rdxPopoverPositioner` when the popup should open from a trig
 itself against a different element.
 
 ```typescript
+import { cn, demoButton, demoPopover } from '../../storybook/styles';
 import { ChangeDetectionStrategy, Component } from '@angular/core';
 import { LucideX } from '@lucide/angular';
 import { popoverImports } from '@radix-ng/primitives/popover';
-import { cn, demoButton, demoPopover } from '../../storybook/styles';
 
 @Component({
     changeDetection: ChangeDetectionStrategy.Eager,
@@ -558,29 +558,29 @@ import { cn, demoButton, demoPopover } from '../../storybook/styles';
     template: `
         <div class="flex w-[min(640px,80vw)] flex-col items-center gap-8">
             <ng-container rdxPopoverRoot>
-                <button [class]="cn(b.base, b.outline, b.size.md)" rdxPopoverTrigger>Open from this button</button>
+                <button rdxPopoverTrigger [class]="cn(b.base, b.outline, b.size.md)">Open from this button</button>
 
                 <div
-                    class="border-primary bg-primary/10 text-foreground flex h-24 w-56 items-center justify-center rounded-lg border border-dashed text-center text-sm font-medium"
                     #customAnchor
+                    class="border-primary bg-primary/10 text-foreground flex h-24 w-56 items-center justify-center rounded-lg border border-dashed text-center text-sm font-medium"
                 >
                     Popup anchor
                 </div>
 
                 <div
                     *rdxPopoverPortal
-                    [class]="p.positioner"
-                    [anchor]="customAnchor"
                     sideOffset="8"
                     rdxPopoverPositioner
+                    [class]="p.positioner"
+                    [anchor]="customAnchor"
                 >
-                    <div [class]="p.popup" rdxPopoverPopup>
-                        <span [class]="p.arrow" rdxPopoverArrow></span>
-                        <h2 [class]="p.title" rdxPopoverTitle>Custom anchor</h2>
-                        <p [class]="p.description" rdxPopoverDescription>
+                    <div rdxPopoverPopup [class]="p.popup">
+                        <span rdxPopoverArrow [class]="p.arrow"></span>
+                        <h2 rdxPopoverTitle [class]="p.title">Custom anchor</h2>
+                        <p rdxPopoverDescription [class]="p.description">
                             The trigger controls open state, but the positioner is anchored to the dashed box.
                         </p>
-                        <button [class]="p.close" aria-label="Close" rdxPopoverClose>
+                        <button aria-label="Close" rdxPopoverClose [class]="p.close">
                             <svg aria-hidden="true" lucideX size="14" />
                         </button>
                     </div>
@@ -602,10 +602,10 @@ Create a shared handle when triggers live outside the root or multiple triggers
 same popup. The handle also supports imperative `open(id)`, `toggle(id)`, and `close()` calls.
 
 ```typescript
+import { cn, demoButton, demoPopover } from '../../storybook/styles';
 import { ChangeDetectionStrategy, Component } from '@angular/core';
 import { LucideX } from '@lucide/angular';
 import { createRdxPopoverHandle, popoverImports } from '@radix-ng/primitives/popover';
-import { cn, demoButton, demoPopover } from '../../storybook/styles';
 
 @Component({
     changeDetection: ChangeDetectionStrategy.Eager,
@@ -614,11 +614,11 @@ import { cn, demoButton, demoPopover } from '../../storybook/styles';
     template: `
         <div class="flex w-[min(640px,80vw)] flex-col items-center gap-8">
             <div class="flex w-full justify-between gap-4">
-                <button id="account" [class]="cn(b.base, b.outline, b.size.md)" [handle]="popover" rdxPopoverTrigger>
+                <button id="account" rdxPopoverTrigger [class]="cn(b.base, b.outline, b.size.md)" [handle]="popover">
                     Account trigger
                 </button>
 
-                <button id="billing" [class]="cn(b.base, b.outline, b.size.md)" [handle]="popover" rdxPopoverTrigger>
+                <button id="billing" rdxPopoverTrigger [class]="cn(b.base, b.outline, b.size.md)" [handle]="popover">
                     Billing trigger
                 </button>
             </div>
@@ -633,16 +633,16 @@ import { cn, demoButton, demoPopover } from '../../storybook/styles';
                 <button [class]="cn(b.base, b.ghost, b.size.sm)" (click)="popover.close()">Close</button>
             </div>
 
-            <ng-container [handle]="popover" rdxPopoverRoot>
-                <div *rdxPopoverPortal [class]="p.positioner" sideOffset="8" rdxPopoverPositioner>
-                    <div [class]="p.popup" rdxPopoverPopup>
-                        <span [class]="p.arrow" rdxPopoverArrow></span>
-                        <h2 [class]="p.title" rdxPopoverTitle>Detached handles</h2>
-                        <p [class]="p.description" rdxPopoverDescription>
+            <ng-container rdxPopoverRoot [handle]="popover">
+                <div *rdxPopoverPortal sideOffset="8" rdxPopoverPositioner [class]="p.positioner">
+                    <div rdxPopoverPopup [class]="p.popup">
+                        <span rdxPopoverArrow [class]="p.arrow"></span>
+                        <h2 rdxPopoverTitle [class]="p.title">Detached handles</h2>
+                        <p rdxPopoverDescription [class]="p.description">
                             Both triggers live outside the root. Open another trigger to move this popup without closing
                             it first.
                         </p>
-                        <button [class]="p.close" aria-label="Close" rdxPopoverClose>
+                        <button aria-label="Close" rdxPopoverClose [class]="p.close">
                             <svg aria-hidden="true" lucideX size="14" />
                         </button>
                     </div>
@@ -665,10 +665,10 @@ Add `openOnHover` to a trigger when pointer users should be able to open its pop
 Use `delay` and `closeDelay` on the same trigger to configure the timing.
 
 ```typescript
+import { cn, demoButton, demoPopover } from '../../storybook/styles';
 import { ChangeDetectionStrategy, Component } from '@angular/core';
 import { LucideX } from '@lucide/angular';
 import { popoverImports } from '@radix-ng/primitives/popover';
-import { cn, demoButton, demoPopover } from '../../storybook/styles';
 
 @Component({
     changeDetection: ChangeDetectionStrategy.Eager,
@@ -676,18 +676,18 @@ import { cn, demoButton, demoPopover } from '../../storybook/styles';
     imports: [...popoverImports, LucideX],
     template: `
         <ng-container rdxPopoverRoot>
-            <button [class]="cn(b.base, b.outline, b.size.md)" [delay]="300" openOnHover rdxPopoverTrigger>
+            <button openOnHover rdxPopoverTrigger [class]="cn(b.base, b.outline, b.size.md)" [delay]="300">
                 Hover for details
             </button>
 
-            <div *rdxPopoverPortal [class]="p.positioner" sideOffset="8" rdxPopoverPositioner>
-                <div [class]="p.popup" rdxPopoverPopup>
-                    <span [class]="p.arrow" rdxPopoverArrow></span>
-                    <h2 [class]="p.title" rdxPopoverTitle>Hover popover</h2>
-                    <p [class]="p.description" rdxPopoverDescription>
+            <div *rdxPopoverPortal sideOffset="8" rdxPopoverPositioner [class]="p.positioner">
+                <div rdxPopoverPopup [class]="p.popup">
+                    <span rdxPopoverArrow [class]="p.arrow"></span>
+                    <h2 rdxPopoverTitle [class]="p.title">Hover popover</h2>
+                    <p rdxPopoverDescription [class]="p.description">
                         Move the pointer into this popup. It remains interactive after leaving the trigger.
                     </p>
-                    <button [class]="p.close" aria-label="Close" rdxPopoverClose>
+                    <button aria-label="Close" rdxPopoverClose [class]="p.close">
                         <svg aria-hidden="true" lucideX size="14" />
                     </button>
                 </div>
@@ -709,9 +709,9 @@ moves between triggers. The viewport exposes `data-activation-direction` and ret
 `data-previous` snapshot until its CSS transition or animation completes.
 
 ```typescript
+import { cn, demoButton, demoPopover } from '../../storybook/styles';
 import { ChangeDetectionStrategy, Component } from '@angular/core';
 import { popoverImports } from '@radix-ng/primitives/popover';
-import { cn, demoButton, demoPopover } from '../../storybook/styles';
 
 @Component({
     changeDetection: ChangeDetectionStrategy.Eager,
@@ -722,10 +722,10 @@ import { cn, demoButton, demoPopover } from '../../storybook/styles';
             <div class="flex flex-wrap justify-center gap-2">
                 @for (item of items; track item.id) {
                     <button
+                        rdxPopoverTrigger
                         [class]="cn(b.base, b.outline, b.size.sm)"
                         [payload]="item"
                         [id]="item.id"
-                        rdxPopoverTrigger
                     >
                         {{ item.label }}
                     </button>
@@ -733,18 +733,18 @@ import { cn, demoButton, demoPopover } from '../../storybook/styles';
             </div>
 
             <div
-                class="transition-[left,right,top,bottom] duration-200"
                 *rdxPopoverPortal
+                class="transition-[left,right,top,bottom] duration-200"
                 sideOffset="8"
                 rdxPopoverPositioner
             >
-                <div [class]="cn(p.popup, 'overflow-hidden transition-[width,height] duration-200')" rdxPopoverPopup>
+                <div rdxPopoverPopup [class]="cn(p.popup, 'overflow-hidden transition-[width,height] duration-200')">
                     <div class="relative" rdxPopoverViewport>
                         <div
                             class="data-[previous]:animate-popover-viewport-out data-[current]:animate-popover-viewport-in data-[previous]:absolute data-[previous]:inset-0"
                         >
-                            <h2 [class]="p.title" rdxPopoverTitle>{{ root.payload()?.label }}</h2>
-                            <p [class]="p.description" rdxPopoverDescription>{{ root.payload()?.description }}</p>
+                            <h2 rdxPopoverTitle [class]="p.title">{{ root.payload()?.label }}</h2>
+                            <p rdxPopoverDescription [class]="p.description">{{ root.payload()?.description }}</p>
                         </div>
                     </div>
                 </div>
diff --git a/skills/radix-ng-examples/references/components/preview-card.md b/skills/radix-ng-examples/references/components/preview-card.md
index 117e87937..b2c5204bd 100644
--- a/skills/radix-ng-examples/references/components/preview-card.md
+++ b/skills/radix-ng-examples/references/components/preview-card.md
@@ -3,9 +3,9 @@
 #### A popup that appears when a link is hovered or focused, showing a visual preview.
 
 ```typescript
+import { cn, demoFocusRing, demoPopover } from '../../storybook/styles';
 import { ChangeDetectionStrategy, Component } from '@angular/core';
 import { previewCardImports } from '@radix-ng/primitives/preview-card';
-import { cn, demoFocusRing, demoPopover } from '../../storybook/styles';
 
 @Component({
     changeDetection: ChangeDetectionStrategy.Eager,
@@ -16,20 +16,20 @@ import { cn, demoFocusRing, demoPopover } from '../../storybook/styles';
             <p class="text-muted-foreground max-w-md text-sm leading-6">
                 The principles of good
                 <a
-                    [class]="link"
                     href="https://en.wikipedia.org/wiki/Typography"
                     rel="noreferrer"
                     target="_blank"
                     rdxPreviewCardTrigger
+                    [class]="link"
                 >
                     typography
                 </a>
                 remain in the digital age.
             </p>
 
-            <div *rdxPreviewCardPortal [class]="p.positioner" sideOffset="8" rdxPreviewCardPositioner>
-                <div [class]="p.popup" rdxPreviewCardPopup>
-                    <span [class]="p.arrow" rdxPreviewCardArrow></span>
+            <div *rdxPreviewCardPortal sideOffset="8" rdxPreviewCardPositioner [class]="p.positioner">
+                <div rdxPreviewCardPopup [class]="p.popup">
+                    <span rdxPreviewCardArrow [class]="p.arrow"></span>
                     <div class="grid gap-3">
                         <div class="bg-muted h-28 rounded-md"></div>
                         <p class="text-muted-foreground text-sm">
@@ -117,9 +117,9 @@ to the positioner — use the explicit `<ng-template rdxPreviewCardPortal>` form
 Control both the open state and the active trigger id.
 
 ```typescript
+import { cn, demoButton, demoFocusRing, demoPopover } from '../../storybook/styles';
 import { ChangeDetectionStrategy, Component } from '@angular/core';
 import { previewCardImports } from '@radix-ng/primitives/preview-card';
-import { cn, demoButton, demoFocusRing, demoPopover } from '../../storybook/styles';
 
 @Component({
     changeDetection: ChangeDetectionStrategy.Eager,
@@ -128,34 +128,34 @@ import { cn, demoButton, demoFocusRing, demoPopover } from '../../storybook/styl
     template: `
         <div class="grid gap-4">
             <div class="flex items-center gap-3">
-                <button [class]="cn(b.base, b.outline, b.size.sm)" (click)="openFrom('design')" type="button">
+                <button type="button" [class]="cn(b.base, b.outline, b.size.sm)" (click)="openFrom('design')">
                     Open design
                 </button>
-                <button [class]="cn(b.base, b.outline, b.size.sm)" (click)="open = false" type="button">Close</button>
+                <button type="button" [class]="cn(b.base, b.outline, b.size.sm)" (click)="open = false">Close</button>
             </div>
 
             <ng-container
                 #root="rdxPreviewCardRoot"
+                rdxPreviewCardRoot
                 [(open)]="open"
                 [(triggerId)]="triggerId"
                 (onOpenChange)="triggerId = $event.triggerId"
-                rdxPreviewCardRoot
             >
                 <p class="text-muted-foreground max-w-lg text-sm leading-6">
                     Discover
-                    <a id="typography" [class]="link" [payload]="cards.typography" href="#" rdxPreviewCardTrigger>
+                    <a id="typography" href="#" rdxPreviewCardTrigger [class]="link" [payload]="cards.typography">
                         typography
                     </a>
                     ,
-                    <a id="design" [class]="link" [payload]="cards.design" href="#" rdxPreviewCardTrigger>design</a>
+                    <a id="design" href="#" rdxPreviewCardTrigger [class]="link" [payload]="cards.design">design</a>
                     , or
-                    <a id="art" [class]="link" [payload]="cards.art" href="#" rdxPreviewCardTrigger>art</a>
+                    <a id="art" href="#" rdxPreviewCardTrigger [class]="link" [payload]="cards.art">art</a>
                     .
                 </p>
 
-                <div *rdxPreviewCardPortal [class]="p.positioner" sideOffset="8" rdxPreviewCardPositioner>
-                    <div [class]="p.popup" rdxPreviewCardPopup>
-                        <span [class]="p.arrow" rdxPreviewCardArrow></span>
+                <div *rdxPreviewCardPortal sideOffset="8" rdxPreviewCardPositioner [class]="p.positioner">
+                    <div rdxPreviewCardPopup [class]="p.popup">
+                        <span rdxPreviewCardArrow [class]="p.arrow"></span>
                         <div class="grid gap-2">
                             <div class="bg-muted h-24 rounded-md"></div>
                             <p class="text-muted-foreground text-sm">{{ root.payload() }}</p>
@@ -192,9 +192,9 @@ export class RdxPreviewCardControlledMultipleComponent {
 Associate triggers outside the root through a shared handle.
 
 ```typescript
+import { cn, demoFocusRing, demoPopover } from '../../storybook/styles';
 import { ChangeDetectionStrategy, Component } from '@angular/core';
 import { createRdxPreviewCardHandle, previewCardImports } from '@radix-ng/primitives/preview-card';
-import { cn, demoFocusRing, demoPopover } from '../../storybook/styles';
 
 @Component({
     changeDetection: ChangeDetectionStrategy.Eager,
@@ -206,32 +206,32 @@ import { cn, demoFocusRing, demoPopover } from '../../storybook/styles';
                 Detached triggers can live outside the root:
                 <a
                     id="typography"
-                    [class]="link"
-                    [handle]="previewCard"
                     href="#"
                     payload="Typography preview"
                     rdxPreviewCardTrigger
+                    [class]="link"
+                    [handle]="previewCard"
                 >
                     typography
                 </a>
                 and
                 <a
                     id="design"
-                    [class]="link"
-                    [handle]="previewCard"
                     href="#"
                     payload="Design preview"
                     rdxPreviewCardTrigger
+                    [class]="link"
+                    [handle]="previewCard"
                 >
                     design
                 </a>
                 .
             </p>
 
-            <ng-container #root="rdxPreviewCardRoot" [handle]="previewCard" rdxPreviewCardRoot>
-                <div *rdxPreviewCardPortal [class]="p.positioner" sideOffset="8" rdxPreviewCardPositioner>
-                    <div [class]="p.popup" rdxPreviewCardPopup>
-                        <span [class]="p.arrow" rdxPreviewCardArrow></span>
+            <ng-container #root="rdxPreviewCardRoot" rdxPreviewCardRoot [handle]="previewCard">
+                <div *rdxPreviewCardPortal sideOffset="8" rdxPreviewCardPositioner [class]="p.positioner">
+                    <div rdxPreviewCardPopup [class]="p.popup">
+                        <span rdxPreviewCardArrow [class]="p.arrow"></span>
                         <div class="grid gap-2">
                             <div class="bg-muted h-24 rounded-md"></div>
                             <p class="text-muted-foreground text-sm">{{ root.payload() }}</p>
@@ -254,10 +254,10 @@ export class RdxPreviewCardDetachedComponent {
 Configure side, offsets, collision behavior, and arrow padding on the positioner.
 
 ```typescript
+import { cn, demoButton, demoFocusRing, demoPopover } from '../../storybook/styles';
 import { ChangeDetectionStrategy, Component, signal } from '@angular/core';
 import { Side } from '@radix-ng/primitives/popper';
 import { previewCardImports } from '@radix-ng/primitives/preview-card';
-import { cn, demoButton, demoFocusRing, demoPopover } from '../../storybook/styles';
 
 @Component({
     changeDetection: ChangeDetectionStrategy.Eager,
@@ -268,9 +268,9 @@ import { cn, demoButton, demoFocusRing, demoPopover } from '../../storybook/styl
             <div class="flex flex-wrap gap-2">
                 @for (option of sides; track option) {
                     <button
+                        type="button"
                         [class]="cn(b.base, side() === option ? b.primary : b.outline, b.size.sm)"
                         (click)="side.set(option)"
-                        type="button"
                     >
                         {{ option }}
                     </button>
@@ -278,17 +278,17 @@ import { cn, demoButton, demoFocusRing, demoPopover } from '../../storybook/styl
             </div>
 
             <ng-container rdxPreviewCardRoot>
-                <a [class]="link" href="#" rdxPreviewCardTrigger>Hover the positioned preview card</a>
+                <a href="#" rdxPreviewCardTrigger [class]="link">Hover the positioned preview card</a>
 
                 <div
                     *rdxPreviewCardPortal
-                    [class]="p.positioner"
-                    [side]="side()"
                     sideOffset="8"
                     rdxPreviewCardPositioner
+                    [class]="p.positioner"
+                    [side]="side()"
                 >
-                    <div [class]="p.popup" rdxPreviewCardPopup>
-                        <span [class]="p.arrow" rdxPreviewCardArrow></span>
+                    <div rdxPreviewCardPopup [class]="p.popup">
+                        <span rdxPreviewCardArrow [class]="p.arrow"></span>
                         <p class="text-muted-foreground text-sm">
                             The positioner exposes placement attributes and CSS variables for styling.
                         </p>
@@ -313,9 +313,9 @@ export class RdxPreviewCardPositioningComponent {
 Animate content changes when different triggers render different payloads.
 
 ```typescript
+import { cn, demoFocusRing, demoPopover } from '../../storybook/styles';
 import { ChangeDetectionStrategy, Component } from '@angular/core';
 import { previewCardImports } from '@radix-ng/primitives/preview-card';
-import { cn, demoFocusRing, demoPopover } from '../../storybook/styles';
 
 @Component({
     changeDetection: ChangeDetectionStrategy.Eager,
@@ -326,21 +326,21 @@ import { cn, demoFocusRing, demoPopover } from '../../storybook/styles';
             <p class="text-muted-foreground max-w-lg text-sm leading-6">
                 Compare
                 <a
-                    [class]="link"
                     href="#"
                     payload="Typography arranges type for readable language."
                     rdxPreviewCardTrigger
+                    [class]="link"
                 >
                     typography
                 </a>
                 ,
-                <a [class]="link" href="#" payload="Design shapes objects and systems." rdxPreviewCardTrigger>design</a>
+                <a href="#" payload="Design shapes objects and systems." rdxPreviewCardTrigger [class]="link">design</a>
                 , and
                 <a
-                    [class]="link"
                     href="#"
                     payload="Art communicates ideas through creative work."
                     rdxPreviewCardTrigger
+                    [class]="link"
                 >
                     art
                 </a>
@@ -349,15 +349,15 @@ import { cn, demoFocusRing, demoPopover } from '../../storybook/styles';
 
             <div
                 *rdxPreviewCardPortal
-                [class]="cn(p.positioner, 'transition-[left,right,top,bottom] duration-200')"
                 sideOffset="8"
                 rdxPreviewCardPositioner
+                [class]="cn(p.positioner, 'transition-[left,right,top,bottom] duration-200')"
             >
                 <div
-                    [class]="cn(p.popup, 'overflow-hidden transition-[width,height] duration-200')"
                     rdxPreviewCardPopup
+                    [class]="cn(p.popup, 'overflow-hidden transition-[width,height] duration-200')"
                 >
-                    <span [class]="p.arrow" rdxPreviewCardArrow></span>
+                    <span rdxPreviewCardArrow [class]="p.arrow"></span>
                     <div rdxPreviewCardViewport>
                         <div class="grid gap-2">
                             <div class="bg-muted h-24 rounded-md"></div>
diff --git a/skills/radix-ng-examples/references/components/progress.md b/skills/radix-ng-examples/references/components/progress.md
index d01582075..f1ed4e984 100644
--- a/skills/radix-ng-examples/references/components/progress.md
+++ b/skills/radix-ng-examples/references/components/progress.md
@@ -3,13 +3,13 @@
 #### Displays task completion with accessible label, value, track, and indicator parts.
 
 ```typescript
-import { ChangeDetectionStrategy, Component, computed, DestroyRef, inject, signal } from '@angular/core';
 import { cn } from '../../storybook/styles';
 import { RdxProgressIndicatorDirective } from '../src/progress-indicator.directive';
 import { RdxProgressLabelDirective } from '../src/progress-label.directive';
 import { RdxProgressRootDirective } from '../src/progress-root.directive';
 import { RdxProgressTrackDirective } from '../src/progress-track.directive';
 import { RdxProgressValueDirective } from '../src/progress-value.directive';
+import { ChangeDetectionStrategy, Component, computed, DestroyRef, inject, signal } from '@angular/core';
 
 const progressSteps = [12, 28, 44, 60, 76, 92, 100] as const;
 
@@ -24,14 +24,14 @@ const progressSteps = [12, 28, 44, 60, 76, 92, 100] as const;
         RdxProgressIndicatorDirective
     ],
     template: `
-        <div class="flex w-80 flex-col gap-2" [value]="progress()" rdxProgressRoot>
+        <div class="flex w-80 flex-col gap-2" rdxProgressRoot [value]="progress()">
             <div class="flex items-center justify-between gap-4">
                 <span class="text-foreground text-sm font-medium" rdxProgressLabel>Upload progress</span>
                 <span class="text-muted-foreground text-sm tabular-nums" rdxProgressValue></span>
             </div>
 
             <div class="bg-muted h-3 overflow-hidden rounded-full" rdxProgressTrack>
-                <div [class]="indicatorClass()" rdxProgressIndicator></div>
+                <div rdxProgressIndicator [class]="indicatorClass()"></div>
             </div>
         </div>
     `
@@ -118,13 +118,13 @@ import {
 An animated labelled progress bar with formatted value text.
 
 ```typescript
-import { ChangeDetectionStrategy, Component, computed, DestroyRef, inject, signal } from '@angular/core';
 import { cn } from '../../storybook/styles';
 import { RdxProgressIndicatorDirective } from '../src/progress-indicator.directive';
 import { RdxProgressLabelDirective } from '../src/progress-label.directive';
 import { RdxProgressRootDirective } from '../src/progress-root.directive';
 import { RdxProgressTrackDirective } from '../src/progress-track.directive';
 import { RdxProgressValueDirective } from '../src/progress-value.directive';
+import { ChangeDetectionStrategy, Component, computed, DestroyRef, inject, signal } from '@angular/core';
 
 const progressSteps = [12, 28, 44, 60, 76, 92, 100] as const;
 
@@ -139,14 +139,14 @@ const progressSteps = [12, 28, 44, 60, 76, 92, 100] as const;
         RdxProgressIndicatorDirective
     ],
     template: `
-        <div class="flex w-80 flex-col gap-2" [value]="progress()" rdxProgressRoot>
+        <div class="flex w-80 flex-col gap-2" rdxProgressRoot [value]="progress()">
             <div class="flex items-center justify-between gap-4">
                 <span class="text-foreground text-sm font-medium" rdxProgressLabel>Upload progress</span>
                 <span class="text-muted-foreground text-sm tabular-nums" rdxProgressValue></span>
             </div>
 
             <div class="bg-muted h-3 overflow-hidden rounded-full" rdxProgressTrack>
-                <div [class]="indicatorClass()" rdxProgressIndicator></div>
+                <div rdxProgressIndicator [class]="indicatorClass()"></div>
             </div>
         </div>
     `
@@ -234,12 +234,12 @@ Use `min`, `max`, and `valueLabel` when progress is not a simple 0-100 percentag
 The same primitive state can drive an SVG circular progress indicator.
 
 ```typescript
-import { ChangeDetectionStrategy, Component, computed, signal } from '@angular/core';
 import { RdxProgressIndicatorDirective } from '../src/progress-indicator.directive';
 import { RdxProgressLabelDirective } from '../src/progress-label.directive';
 import { RdxProgressRootDirective } from '../src/progress-root.directive';
 import { RdxProgressTrackDirective } from '../src/progress-track.directive';
 import { RdxProgressValueDirective } from '../src/progress-value.directive';
+import { ChangeDetectionStrategy, Component, computed, signal } from '@angular/core';
 
 @Component({
     changeDetection: ChangeDetectionStrategy.Eager,
@@ -252,20 +252,20 @@ import { RdxProgressValueDirective } from '../src/progress-value.directive';
         RdxProgressIndicatorDirective
     ],
     template: `
-        <div class="relative grid size-40 place-items-center" [value]="progress()" rdxProgressRoot>
+        <div class="relative grid size-40 place-items-center" rdxProgressRoot [value]="progress()">
             <span class="sr-only" rdxProgressLabel>Storage used</span>
 
             <svg class="size-full -rotate-90" viewBox="0 0 100 100" rdxProgressTrack>
                 <circle class="stroke-muted fill-none" cx="50" cy="50" r="44" stroke-width="8" />
                 <circle
                     class="stroke-primary fill-none transition-all duration-500 ease-out"
-                    [attr.stroke-dasharray]="dashArray()"
                     cx="50"
                     cy="50"
                     r="44"
                     stroke-linecap="round"
                     stroke-width="8"
                     rdxProgressIndicator
+                    [attr.stroke-dasharray]="dashArray()"
                 />
             </svg>
 
diff --git a/skills/radix-ng-examples/references/components/radio.md b/skills/radix-ng-examples/references/components/radio.md
index 0505b3e49..4c278a109 100644
--- a/skills/radix-ng-examples/references/components/radio.md
+++ b/skills/radix-ng-examples/references/components/radio.md
@@ -3,6 +3,7 @@
 #### A set of checkable buttons—known as radio buttons—where no more than one of the buttons can be checked at a time.
 
 ```typescript
+import { demoRadio } from '../../storybook/styles';
 import { ChangeDetectionStrategy, Component } from '@angular/core';
 import { RdxLabelDirective } from '@radix-ng/primitives/label';
 import {
@@ -11,31 +12,30 @@ import {
     RdxRadioItemDirective,
     RdxRadioItemInputDirective
 } from '@radix-ng/primitives/radio';
-import { demoRadio } from '../../storybook/styles';
 
 @Component({
     changeDetection: ChangeDetectionStrategy.Eager,
     selector: 'radio-default-example',
     template: `
         <form>
-            <div [class]="r.group" rdxRadioRoot name="density" aria-label="View density">
-                <label [class]="r.row" rdxLabel>
-                    <span [class]="r.item" rdxRadioItem value="default">
-                        <span [class]="r.indicator" rdxRadioIndicator></span>
+            <div rdxRadioRoot name="density" aria-label="View density" [class]="r.group">
+                <label rdxLabel [class]="r.row">
+                    <span rdxRadioItem value="default" [class]="r.item">
+                        <span rdxRadioIndicator [class]="r.indicator"></span>
                         <input rdxRadioItemInput />
                     </span>
                     <span [class]="r.label">Default</span>
                 </label>
-                <label [class]="r.row" rdxLabel>
-                    <span [class]="r.item" rdxRadioItem value="comfortable">
-                        <span [class]="r.indicator" rdxRadioIndicator></span>
+                <label rdxLabel [class]="r.row">
+                    <span rdxRadioItem value="comfortable" [class]="r.item">
+                        <span rdxRadioIndicator [class]="r.indicator"></span>
                         <input rdxRadioItemInput />
                     </span>
                     <span [class]="r.label">Comfortable</span>
                 </label>
-                <label [class]="r.row" rdxLabel>
-                    <span [class]="r.item" rdxRadioItem value="compact">
-                        <span [class]="r.indicator" rdxRadioIndicator></span>
+                <label rdxLabel [class]="r.row">
+                    <span rdxRadioItem value="compact" [class]="r.item">
+                        <span rdxRadioIndicator [class]="r.indicator"></span>
                         <input rdxRadioItemInput />
                     </span>
                     <span [class]="r.label">Compact</span>
@@ -126,6 +126,7 @@ setValue(change: RdxRadioValueChangeEvent) {
 A radio group with sibling labels and hidden native inputs.
 
 ```typescript
+import { demoRadio } from '../../storybook/styles';
 import { ChangeDetectionStrategy, Component } from '@angular/core';
 import { RdxLabelDirective } from '@radix-ng/primitives/label';
 import {
@@ -134,31 +135,30 @@ import {
     RdxRadioItemDirective,
     RdxRadioItemInputDirective
 } from '@radix-ng/primitives/radio';
-import { demoRadio } from '../../storybook/styles';
 
 @Component({
     changeDetection: ChangeDetectionStrategy.Eager,
     selector: 'radio-default-example',
     template: `
         <form>
-            <div [class]="r.group" rdxRadioRoot name="density" aria-label="View density">
-                <label [class]="r.row" rdxLabel>
-                    <span [class]="r.item" rdxRadioItem value="default">
-                        <span [class]="r.indicator" rdxRadioIndicator></span>
+            <div rdxRadioRoot name="density" aria-label="View density" [class]="r.group">
+                <label rdxLabel [class]="r.row">
+                    <span rdxRadioItem value="default" [class]="r.item">
+                        <span rdxRadioIndicator [class]="r.indicator"></span>
                         <input rdxRadioItemInput />
                     </span>
                     <span [class]="r.label">Default</span>
                 </label>
-                <label [class]="r.row" rdxLabel>
-                    <span [class]="r.item" rdxRadioItem value="comfortable">
-                        <span [class]="r.indicator" rdxRadioIndicator></span>
+                <label rdxLabel [class]="r.row">
+                    <span rdxRadioItem value="comfortable" [class]="r.item">
+                        <span rdxRadioIndicator [class]="r.indicator"></span>
                         <input rdxRadioItemInput />
                     </span>
                     <span [class]="r.label">Comfortable</span>
                 </label>
-                <label [class]="r.row" rdxLabel>
-                    <span [class]="r.item" rdxRadioItem value="compact">
-                        <span [class]="r.indicator" rdxRadioIndicator></span>
+                <label rdxLabel [class]="r.row">
+                    <span rdxRadioItem value="compact" [class]="r.item">
+                        <span rdxRadioIndicator [class]="r.indicator"></span>
                         <input rdxRadioItemInput />
                     </span>
                     <span [class]="r.label">Compact</span>
@@ -184,6 +184,7 @@ export class RadioDefaultComponent {
 A disabled radio group ignores user interaction and exposes disabled state attributes to all items.
 
 ```typescript
+import { demoRadio } from '../../storybook/styles';
 import { ChangeDetectionStrategy, Component } from '@angular/core';
 import { RdxLabelDirective } from '@radix-ng/primitives/label';
 import {
@@ -192,37 +193,36 @@ import {
     RdxRadioItemDirective,
     RdxRadioItemInputDirective
 } from '@radix-ng/primitives/radio';
-import { demoRadio } from '../../storybook/styles';
 
 @Component({
     changeDetection: ChangeDetectionStrategy.Eager,
     selector: 'radio-disabled-example',
     template: `
         <div
-            [class]="r.group"
-            [value]="'comfortable'"
             rdxRadioRoot
             name="density-disabled"
             disabled
             aria-label="View density"
+            [class]="r.group"
+            [value]="'comfortable'"
         >
-            <label [class]="r.row" rdxLabel>
-                <span [class]="r.item" rdxRadioItem value="default">
-                    <span [class]="r.indicator" rdxRadioIndicator></span>
+            <label rdxLabel [class]="r.row">
+                <span rdxRadioItem value="default" [class]="r.item">
+                    <span rdxRadioIndicator [class]="r.indicator"></span>
                     <input rdxRadioItemInput />
                 </span>
                 <span [class]="r.label">Default</span>
             </label>
-            <label [class]="r.row" rdxLabel>
-                <span [class]="r.item" rdxRadioItem value="comfortable">
-                    <span [class]="r.indicator" rdxRadioIndicator></span>
+            <label rdxLabel [class]="r.row">
+                <span rdxRadioItem value="comfortable" [class]="r.item">
+                    <span rdxRadioIndicator [class]="r.indicator"></span>
                     <input rdxRadioItemInput />
                 </span>
                 <span [class]="r.label">Comfortable</span>
             </label>
-            <label [class]="r.row" rdxLabel>
-                <span [class]="r.item" rdxRadioItem value="compact">
-                    <span [class]="r.indicator" rdxRadioIndicator></span>
+            <label rdxLabel [class]="r.row">
+                <span rdxRadioItem value="compact" [class]="r.item">
+                    <span rdxRadioIndicator [class]="r.indicator"></span>
                     <input rdxRadioItemInput />
                 </span>
                 <span [class]="r.label">Compact</span>
@@ -247,6 +247,7 @@ export class RadioDisabledComponent {
 Radio group works with `ngModel`, native form submission, and a submit button via the hidden `rdxRadioItemInput`.
 
 ```typescript
+import { cn, demoButton, demoRadio } from '../../storybook/styles';
 import { ChangeDetectionStrategy, Component } from '@angular/core';
 import { FormsModule } from '@angular/forms';
 import { RdxLabelDirective } from '@radix-ng/primitives/label';
@@ -256,7 +257,6 @@ import {
     RdxRadioItemDirective,
     RdxRadioItemInputDirective
 } from '@radix-ng/primitives/radio';
-import { cn, demoButton, demoRadio } from '../../storybook/styles';
 
 @Component({
     changeDetection: ChangeDetectionStrategy.Eager,
@@ -264,17 +264,17 @@ import { cn, demoButton, demoRadio } from '../../storybook/styles';
     template: `
         <form class="flex w-72 flex-col gap-4" (ngSubmit)="submit()">
             <div
-                [(ngModel)]="hotelRoom"
-                [class]="r.group"
                 name="hotelRoom"
                 rdxRadioRoot
                 required
                 aria-label="Hotel room"
+                [class]="r.group"
+                [(ngModel)]="hotelRoom"
             >
                 @for (room of rooms; track room) {
-                    <label [class]="r.row" rdxLabel>
-                        <span [class]="r.item" [value]="room" rdxRadioItem>
-                            <span [class]="r.indicator" rdxRadioIndicator></span>
+                    <label rdxLabel [class]="r.row">
+                        <span rdxRadioItem [class]="r.item" [value]="room">
+                            <span rdxRadioIndicator [class]="r.indicator"></span>
                             <input rdxRadioItemInput />
                         </span>
                         <span [class]="r.label">
@@ -284,7 +284,7 @@ import { cn, demoButton, demoRadio } from '../../storybook/styles';
                 }
             </div>
 
-            <button [class]="cn(b.base, b.primary, b.size.md)" type="submit">Submit</button>
+            <button type="submit" [class]="cn(b.base, b.primary, b.size.md)">Submit</button>
 
             @if (submittedRoom) {
                 <p class="text-muted-foreground text-sm">
diff --git a/skills/radix-ng-examples/references/components/select.md b/skills/radix-ng-examples/references/components/select.md
index 06f24fc9b..53451063b 100644
--- a/skills/radix-ng-examples/references/components/select.md
+++ b/skills/radix-ng-examples/references/components/select.md
@@ -8,9 +8,6 @@ trigger) and **Item-aligned** (the popup overlaps the trigger, aligned to the se
 native `<select>` behavior).
 
 ```typescript
-import { ChangeDetectionStrategy, Component, input } from '@angular/core';
-import { LucideCheck, LucideChevronDown } from '@lucide/angular';
-import { Align } from '@radix-ng/primitives/popper';
 import { RdxSelectGroup } from '../src/select-group';
 import { RdxSelectGroupLabel } from '../src/select-group-label';
 import { RdxSelectItem } from '../src/select-item';
@@ -23,6 +20,9 @@ import { RdxSelectPositioner } from '../src/select-positioner';
 import { RdxSelectRoot } from '../src/select-root';
 import { RdxSelectTrigger } from '../src/select-trigger';
 import { RdxSelectValue } from '../src/select-value';
+import { ChangeDetectionStrategy, Component, input } from '@angular/core';
+import { LucideCheck, LucideChevronDown } from '@lucide/angular';
+import { Align } from '@radix-ng/primitives/popper';
 
 @Component({
     changeDetection: ChangeDetectionStrategy.Eager,
@@ -56,7 +56,7 @@ import { RdxSelectValue } from '../src/select-value';
                 <svg lucideChevronDown size="16" />
             </button>
 
-            <div class="z-[100]" *rdxSelectPortal [sideOffset]="sideOffset()" [align]="align()" rdxSelectPositioner>
+            <div *rdxSelectPortal class="z-[100]" rdxSelectPositioner [sideOffset]="sideOffset()" [align]="align()">
                 <div
                     class="border-border bg-popover text-popover-foreground min-w-40 rounded-lg border shadow-md will-change-[opacity,transform]"
                     rdxSelectPopup
@@ -67,8 +67,8 @@ import { RdxSelectValue } from '../src/select-value';
                             @for (option of options; track option) {
                                 <div
                                     class="text-popover-foreground data-[disabled]:text-muted-foreground data-[highlighted]:bg-primary data-[highlighted]:text-primary-foreground relative flex h-7 cursor-default items-center rounded-sm pr-8 pl-6 text-sm leading-none outline-none select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50"
-                                    [value]="option"
                                     rdxSelectItem
+                                    [value]="option"
                                 >
                                     <span
                                         class="absolute left-0 inline-flex w-6 items-center justify-center"
@@ -86,8 +86,8 @@ import { RdxSelectValue } from '../src/select-value';
                             @for (vegetable of vegetables; track vegetable) {
                                 <div
                                     class="text-popover-foreground data-[disabled]:text-muted-foreground data-[highlighted]:bg-primary data-[highlighted]:text-primary-foreground relative flex h-7 cursor-default items-center rounded-sm pr-8 pl-6 text-sm leading-none outline-none select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50"
-                                    [value]="vegetable"
                                     rdxSelectItem
+                                    [value]="vegetable"
                                 >
                                     <span
                                         class="absolute left-0 inline-flex w-6 items-center justify-center"
@@ -224,9 +224,6 @@ the behavior of a native `<select>`. Use `rdxSelectItemAlignedPosition` and
 A grouped list (Fruits / Vegetables) with Popper positioning. Click the trigger to open the popup.
 
 ```typescript
-import { ChangeDetectionStrategy, Component, input } from '@angular/core';
-import { LucideCheck, LucideChevronDown } from '@lucide/angular';
-import { Align } from '@radix-ng/primitives/popper';
 import { RdxSelectGroup } from '../src/select-group';
 import { RdxSelectGroupLabel } from '../src/select-group-label';
 import { RdxSelectItem } from '../src/select-item';
@@ -239,6 +236,9 @@ import { RdxSelectPositioner } from '../src/select-positioner';
 import { RdxSelectRoot } from '../src/select-root';
 import { RdxSelectTrigger } from '../src/select-trigger';
 import { RdxSelectValue } from '../src/select-value';
+import { ChangeDetectionStrategy, Component, input } from '@angular/core';
+import { LucideCheck, LucideChevronDown } from '@lucide/angular';
+import { Align } from '@radix-ng/primitives/popper';
 
 @Component({
     changeDetection: ChangeDetectionStrategy.Eager,
@@ -272,7 +272,7 @@ import { RdxSelectValue } from '../src/select-value';
                 <svg lucideChevronDown size="16" />
             </button>
 
-            <div class="z-[100]" *rdxSelectPortal [sideOffset]="sideOffset()" [align]="align()" rdxSelectPositioner>
+            <div *rdxSelectPortal class="z-[100]" rdxSelectPositioner [sideOffset]="sideOffset()" [align]="align()">
                 <div
                     class="border-border bg-popover text-popover-foreground min-w-40 rounded-lg border shadow-md will-change-[opacity,transform]"
                     rdxSelectPopup
@@ -283,8 +283,8 @@ import { RdxSelectValue } from '../src/select-value';
                             @for (option of options; track option) {
                                 <div
                                     class="text-popover-foreground data-[disabled]:text-muted-foreground data-[highlighted]:bg-primary data-[highlighted]:text-primary-foreground relative flex h-7 cursor-default items-center rounded-sm pr-8 pl-6 text-sm leading-none outline-none select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50"
-                                    [value]="option"
                                     rdxSelectItem
+                                    [value]="option"
                                 >
                                     <span
                                         class="absolute left-0 inline-flex w-6 items-center justify-center"
@@ -302,8 +302,8 @@ import { RdxSelectValue } from '../src/select-value';
                             @for (vegetable of vegetables; track vegetable) {
                                 <div
                                     class="text-popover-foreground data-[disabled]:text-muted-foreground data-[highlighted]:bg-primary data-[highlighted]:text-primary-foreground relative flex h-7 cursor-default items-center rounded-sm pr-8 pl-6 text-sm leading-none outline-none select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50"
-                                    [value]="vegetable"
                                     rdxSelectItem
+                                    [value]="vegetable"
                                 >
                                     <span
                                         class="absolute left-0 inline-flex w-6 items-center justify-center"
@@ -336,8 +336,6 @@ With `multiple`, picks accumulate in the value array, the trigger joins their la
 item keeps its indicator. Shows `RdxSelectIcon` and `RdxSelectSeparator`.
 
 ```typescript
-import { ChangeDetectionStrategy, Component, signal } from '@angular/core';
-import { LucideCheck, LucideChevronDown } from '@lucide/angular';
 import { RdxSelectGroup } from '../src/select-group';
 import { RdxSelectGroupLabel } from '../src/select-group-label';
 import { RdxSelectIcon } from '../src/select-icon';
@@ -352,6 +350,8 @@ import { RdxSelectRoot } from '../src/select-root';
 import { RdxSelectSeparator } from '../src/select-separator';
 import { RdxSelectTrigger } from '../src/select-trigger';
 import { RdxSelectValue } from '../src/select-value';
+import { ChangeDetectionStrategy, Component, signal } from '@angular/core';
+import { LucideCheck, LucideChevronDown } from '@lucide/angular';
 
 /**
  * Multiple selection: picks accumulate in the value array, `RdxSelectValue` joins their labels, and
@@ -380,7 +380,7 @@ import { RdxSelectValue } from '../src/select-value';
         RdxSelectItemIndicator
     ],
     template: `
-        <div [(value)]="value" multiple rdxSelectRoot>
+        <div multiple rdxSelectRoot [(value)]="value">
             <button
                 class="border-border bg-background text-foreground data-[placeholder]:text-muted-foreground hover:bg-muted focus-visible:ring-ring focus-visible:ring-offset-background inline-flex h-9 min-w-52 items-center justify-between gap-2 rounded-md border px-3 text-sm shadow-sm outline-none focus-visible:ring-2 focus-visible:ring-offset-2"
                 aria-label="Pick fruits"
@@ -392,7 +392,7 @@ import { RdxSelectValue } from '../src/select-value';
                 <svg lucideChevronDown size="16" rdxSelectIcon></svg>
             </button>
 
-            <div class="z-[100]" *rdxSelectPortal [sideOffset]="5" rdxSelectPositioner>
+            <div *rdxSelectPortal class="z-[100]" rdxSelectPositioner [sideOffset]="5">
                 <div
                     class="border-border bg-popover text-popover-foreground min-w-52 rounded-lg border p-1 shadow-md"
                     rdxSelectPopup
@@ -401,8 +401,8 @@ import { RdxSelectValue } from '../src/select-value';
                         <div class="text-muted-foreground px-6 text-xs leading-6" rdxSelectGroupLabel>Fruits</div>
                         <div rdxSelectGroup>
                             @for (fruit of fruits; track fruit) {
-                                <div [class]="itemClass" [value]="fruit" rdxSelectItem>
-                                    <span [class]="indicatorClass" rdxSelectItemIndicator>
+                                <div rdxSelectItem [class]="itemClass" [value]="fruit">
+                                    <span rdxSelectItemIndicator [class]="indicatorClass">
                                         <svg lucideCheck size="16"></svg>
                                     </span>
                                     <span rdxSelectItemText>{{ fruit }}</span>
@@ -413,8 +413,8 @@ import { RdxSelectValue } from '../src/select-value';
                         <div class="text-muted-foreground px-6 text-xs leading-6" rdxSelectGroupLabel>Berries</div>
                         <div rdxSelectGroup>
                             @for (berry of berries; track berry) {
-                                <div [class]="itemClass" [value]="berry" rdxSelectItem>
-                                    <span [class]="indicatorClass" rdxSelectItemIndicator>
+                                <div rdxSelectItem [class]="itemClass" [value]="berry">
+                                    <span rdxSelectItemIndicator [class]="indicatorClass">
                                         <svg lucideCheck size="16"></svg>
                                     </span>
                                     <span rdxSelectItemText>{{ berry }}</span>
@@ -445,8 +445,6 @@ export class SelectMultiple {
 `closeInteractionType`, so app logic can distinguish keyboard, mouse, and touch flows explicitly.
 
 ```typescript
-import { ChangeDetectionStrategy, Component, signal } from '@angular/core';
-import { LucideCheck, LucideChevronDown } from '@lucide/angular';
 import {
     RdxSelectItem,
     RdxSelectItemIndicator,
@@ -461,6 +459,8 @@ import {
     RdxSelectValue,
     RdxSelectValueChangeEvent
 } from '../index';
+import { ChangeDetectionStrategy, Component, signal } from '@angular/core';
+import { LucideCheck, LucideChevronDown } from '@lucide/angular';
 
 interface SelectEventLogEntry {
     label: string;
@@ -492,11 +492,11 @@ interface SelectEventLogEntry {
                 <div class="flex flex-col gap-2">
                     <ng-container
                         #root="rdxSelectRoot"
+                        rdxSelectRoot
                         [(open)]="open"
                         [(value)]="value"
                         (onOpenChange)="handleOpenChange($event)"
                         (onValueChange)="handleValueChange($event)"
-                        rdxSelectRoot
                     >
                         <button
                             class="border-border bg-background text-foreground data-[placeholder]:text-muted-foreground hover:bg-muted focus-visible:ring-ring focus-visible:ring-offset-background inline-flex h-9 w-full items-center justify-between gap-2 rounded-md border px-3 text-sm shadow-sm outline-none focus-visible:ring-2 focus-visible:ring-offset-2"
@@ -509,7 +509,7 @@ interface SelectEventLogEntry {
                             <svg lucideChevronDown size="16" />
                         </button>
 
-                        <div class="z-[100]" *rdxSelectPortal sideOffset="6" rdxSelectPositioner>
+                        <div *rdxSelectPortal class="z-[100]" sideOffset="6" rdxSelectPositioner>
                             <div
                                 class="border-border bg-popover text-popover-foreground min-w-48 rounded-lg border p-1 shadow-md"
                                 rdxSelectPopup
@@ -518,8 +518,8 @@ interface SelectEventLogEntry {
                                     @for (option of options; track option.value) {
                                         <div
                                             class="data-[highlighted]:bg-primary data-[highlighted]:text-primary-foreground relative flex h-8 cursor-default items-center rounded-sm pr-8 pl-7 text-sm outline-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50"
-                                            [value]="option.value"
                                             rdxSelectItem
+                                            [value]="option.value"
                                         >
                                             <span
                                                 class="absolute left-2 inline-flex size-4 items-center justify-center"
@@ -537,8 +537,8 @@ interface SelectEventLogEntry {
                         <div class="grid gap-2 pt-1">
                             <button
                                 class="border-border bg-background text-foreground hover:bg-muted inline-flex h-7 items-center justify-between rounded-md border px-3 text-xs"
-                                (click)="cancelNextOpen.update((value) => !value)"
                                 type="button"
+                                (click)="cancelNextOpen.update((value) => !value)"
                             >
                                 <span>Cancel next open</span>
                                 <span class="text-muted-foreground">{{ cancelNextOpen() ? 'armed' : 'off' }}</span>
@@ -546,8 +546,8 @@ interface SelectEventLogEntry {
 
                             <button
                                 class="border-border bg-background text-foreground hover:bg-muted inline-flex h-7 items-center justify-between rounded-md border px-3 text-xs"
-                                (click)="cancelNextValue.update((value) => !value)"
                                 type="button"
+                                (click)="cancelNextValue.update((value) => !value)"
                             >
                                 <span>Cancel next value</span>
                                 <span class="text-muted-foreground">{{ cancelNextValue() ? 'armed' : 'off' }}</span>
@@ -577,8 +577,8 @@ interface SelectEventLogEntry {
                         </div>
                         <button
                             class="text-muted-foreground hover:text-foreground inline-flex h-7 items-center rounded-md px-2 text-xs"
-                            (click)="logs.set([])"
                             type="button"
+                            (click)="logs.set([])"
                         >
                             Clear
                         </button>
@@ -667,8 +667,6 @@ key (here `id`) instead of reference, and render rich, two-line content in both
 items from the selected object.
 
 ```typescript
-import { ChangeDetectionStrategy, Component } from '@angular/core';
-import { LucideCheck, LucideChevronsUpDown } from '@lucide/angular';
 import { RdxSelectItem } from '../src/select-item';
 import { RdxSelectItemIndicator } from '../src/select-item-indicator';
 import { RdxSelectItemText } from '../src/select-item-text';
@@ -679,6 +677,8 @@ import { RdxSelectPositioner } from '../src/select-positioner';
 import { RdxSelectRoot } from '../src/select-root';
 import { RdxSelectTrigger } from '../src/select-trigger';
 import { RdxSelectValue } from '../src/select-value';
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { LucideCheck, LucideChevronsUpDown } from '@lucide/angular';
 
 interface ShippingMethod {
     id: string;
@@ -715,7 +715,7 @@ interface ShippingMethod {
                 Shipping method
             </label>
 
-            <ng-container #root="rdxSelectRoot" [value]="shippingMethods[0]" [isItemEqualToValue]="'id'" rdxSelectRoot>
+            <ng-container #root="rdxSelectRoot" rdxSelectRoot [value]="shippingMethods[0]" [isItemEqualToValue]="'id'">
                 <button
                     class="border-border bg-background text-foreground hover:bg-muted focus-visible:ring-ring focus-visible:ring-offset-background inline-flex min-h-9 min-w-64 items-center justify-between gap-3 rounded-md border px-3 py-1.5 text-sm shadow-sm outline-none focus-visible:ring-2 focus-visible:ring-offset-2 data-[disabled]:opacity-50"
                     aria-labelledby="shipping-method-label"
@@ -736,7 +736,7 @@ interface ShippingMethod {
                     <svg class="text-muted-foreground shrink-0" lucideChevronsUpDown size="16" />
                 </button>
 
-                <div class="z-[100]" *rdxSelectPortal [sideOffset]="5" align="start" rdxSelectPositioner>
+                <div *rdxSelectPortal class="z-[100]" align="start" rdxSelectPositioner [sideOffset]="5">
                     <div
                         class="border-border bg-popover text-popover-foreground min-w-[var(--radix-select-trigger-width)] rounded-lg border shadow-md will-change-[opacity,transform]"
                         rdxSelectPopup
@@ -745,8 +745,8 @@ interface ShippingMethod {
                             @for (method of shippingMethods; track method.id) {
                                 <div
                                     class="text-popover-foreground data-[disabled]:text-muted-foreground data-[highlighted]:bg-primary data-[highlighted]:text-primary-foreground group relative grid cursor-default grid-cols-[1.25rem_1fr] items-start gap-2 rounded-sm py-1.5 pr-3 pl-2 outline-none select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50"
-                                    [value]="method"
                                     rdxSelectItem
+                                    [value]="method"
                                 >
                                     <span
                                         class="col-start-1 mt-0.5 inline-flex items-center justify-center"
@@ -791,8 +791,6 @@ When the list is taller than the available viewport, `rdxSelectScrollUpButton` a
 `rdxSelectScrollDownButton` appear automatically at the top and bottom of the popup.
 
 ```typescript
-import { ChangeDetectionStrategy, Component } from '@angular/core';
-import { LucideCheck, LucideChevronDown, LucideChevronUp } from '@lucide/angular';
 import { RdxSelectGroup } from '../src/select-group';
 import { RdxSelectGroupLabel } from '../src/select-group-label';
 import { RdxSelectItem } from '../src/select-item';
@@ -807,6 +805,8 @@ import { RdxSelectScrollDownButton } from '../src/select-scroll-down-button';
 import { RdxSelectScrollUpButton } from '../src/select-scroll-up-button';
 import { RdxSelectTrigger } from '../src/select-trigger';
 import { RdxSelectValue } from '../src/select-value';
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { LucideCheck, LucideChevronDown, LucideChevronUp } from '@lucide/angular';
 
 @Component({
     changeDetection: ChangeDetectionStrategy.Eager,
@@ -843,7 +843,7 @@ import { RdxSelectValue } from '../src/select-value';
                 <svg lucideChevronDown size="16" />
             </button>
 
-            <div class="z-[100]" *rdxSelectPortal [sideOffset]="5" align="start" rdxSelectPositioner>
+            <div *rdxSelectPortal class="z-[100]" align="start" rdxSelectPositioner [sideOffset]="5">
                 <div
                     class="border-border bg-popover text-popover-foreground max-h-[300px] min-w-40 overflow-hidden rounded-lg border shadow-md will-change-[opacity,transform]"
                     rdxSelectPopup
@@ -860,8 +860,8 @@ import { RdxSelectValue } from '../src/select-value';
                             @for (option of options; track option) {
                                 <div
                                     class="text-popover-foreground data-[disabled]:text-muted-foreground data-[highlighted]:bg-primary data-[highlighted]:text-primary-foreground relative flex h-7 cursor-default items-center rounded-sm pr-8 pl-6 text-sm leading-none outline-none select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50"
-                                    [value]="option"
                                     rdxSelectItem
+                                    [value]="option"
                                 >
                                     <span
                                         class="absolute left-0 inline-flex w-6 items-center justify-center"
@@ -879,8 +879,8 @@ import { RdxSelectValue } from '../src/select-value';
                             @for (vegetable of vegetables; track vegetable) {
                                 <div
                                     class="text-popover-foreground data-[disabled]:text-muted-foreground data-[highlighted]:bg-primary data-[highlighted]:text-primary-foreground relative flex h-7 cursor-default items-center rounded-sm pr-8 pl-6 text-sm leading-none outline-none select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50"
-                                    [value]="vegetable"
                                     rdxSelectItem
+                                    [value]="vegetable"
                                 >
                                     <span
                                         class="absolute left-0 inline-flex w-6 items-center justify-center"
@@ -927,8 +927,6 @@ The popup opens aligned to the selected item, mirroring native `<select>` behavi
 value is pre-selected so the alignment is immediately visible.
 
 ```typescript
-import { booleanAttribute, ChangeDetectionStrategy, Component, input, signal } from '@angular/core';
-import { LucideCheck, LucideChevronDown } from '@lucide/angular';
 import { RdxSelectGroup } from '../src/select-group';
 import { RdxSelectGroupLabel } from '../src/select-group-label';
 import { RdxSelectItem } from '../src/select-item';
@@ -942,6 +940,8 @@ import { RdxSelectPortal } from '../src/select-portal';
 import { RdxSelectRoot } from '../src/select-root';
 import { RdxSelectTrigger } from '../src/select-trigger';
 import { RdxSelectValue } from '../src/select-value';
+import { booleanAttribute, ChangeDetectionStrategy, Component, input, signal } from '@angular/core';
+import { LucideCheck, LucideChevronDown } from '@lucide/angular';
 
 @Component({
     changeDetection: ChangeDetectionStrategy.Eager,
@@ -964,7 +964,7 @@ import { RdxSelectValue } from '../src/select-value';
         RdxSelectItemIndicator
     ],
     template: `
-        <ng-container [value]="fruit()" [modal]="modal()" rdxSelectRoot>
+        <ng-container rdxSelectRoot [value]="fruit()" [modal]="modal()">
             <button
                 class="border-border bg-background text-foreground data-[placeholder]:text-muted-foreground hover:bg-muted focus-visible:ring-ring focus-visible:ring-offset-background inline-flex h-9 min-w-40 items-center justify-between gap-2 rounded-md border px-3 text-sm shadow-sm outline-none focus-visible:ring-2 focus-visible:ring-offset-2"
                 aria-label="Customise options"
@@ -988,8 +988,8 @@ import { RdxSelectValue } from '../src/select-value';
                                 @for (option of options; track option) {
                                     <div
                                         class="text-popover-foreground data-[disabled]:text-muted-foreground data-[highlighted]:bg-primary data-[highlighted]:text-primary-foreground relative flex h-7 cursor-default items-center rounded-sm pr-8 pl-6 text-sm leading-none outline-none select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50"
-                                        [value]="option"
                                         rdxSelectItem
+                                        [value]="option"
                                     >
                                         <span
                                             class="absolute left-0 inline-flex w-6 items-center justify-center"
@@ -1009,8 +1009,8 @@ import { RdxSelectValue } from '../src/select-value';
                                 @for (vegetable of vegetables; track vegetable) {
                                     <div
                                         class="text-popover-foreground data-[disabled]:text-muted-foreground data-[highlighted]:bg-primary data-[highlighted]:text-primary-foreground relative flex h-7 cursor-default items-center rounded-sm pr-8 pl-6 text-sm leading-none outline-none select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50"
-                                        [value]="vegetable"
                                         rdxSelectItem
+                                        [value]="vegetable"
                                     >
                                         <span
                                             class="absolute left-0 inline-flex w-6 items-center justify-center"
@@ -1045,8 +1045,6 @@ export class SelectAlignedPosition {
 Item-aligned positioning combined with a long list that overflows, showing both scroll buttons.
 
 ```typescript
-import { ChangeDetectionStrategy, Component, signal } from '@angular/core';
-import { LucideCheck, LucideChevronDown, LucideChevronUp } from '@lucide/angular';
 import { RdxSelectGroup } from '../src/select-group';
 import { RdxSelectGroupLabel } from '../src/select-group-label';
 import { RdxSelectItem } from '../src/select-item';
@@ -1062,6 +1060,8 @@ import { RdxSelectScrollDownButton } from '../src/select-scroll-down-button';
 import { RdxSelectScrollUpButton } from '../src/select-scroll-up-button';
 import { RdxSelectTrigger } from '../src/select-trigger';
 import { RdxSelectValue } from '../src/select-value';
+import { ChangeDetectionStrategy, Component, signal } from '@angular/core';
+import { LucideCheck, LucideChevronDown, LucideChevronUp } from '@lucide/angular';
 
 @Component({
     changeDetection: ChangeDetectionStrategy.Eager,
@@ -1087,7 +1087,7 @@ import { RdxSelectValue } from '../src/select-value';
         RdxSelectScrollUpButton
     ],
     template: `
-        <ng-container [value]="fruit()" rdxSelectRoot>
+        <ng-container rdxSelectRoot [value]="fruit()">
             <button
                 class="border-border bg-background text-foreground data-[placeholder]:text-muted-foreground hover:bg-muted focus-visible:ring-ring focus-visible:ring-offset-background inline-flex h-9 min-w-40 items-center justify-between gap-2 rounded-md border px-3 text-sm shadow-sm outline-none focus-visible:ring-2 focus-visible:ring-offset-2"
                 aria-label="Customise options"
@@ -1117,8 +1117,8 @@ import { RdxSelectValue } from '../src/select-value';
                                 @for (option of options; track option) {
                                     <div
                                         class="text-popover-foreground data-[disabled]:text-muted-foreground data-[highlighted]:bg-primary data-[highlighted]:text-primary-foreground relative flex h-7 cursor-default items-center rounded-sm pr-8 pl-6 text-sm leading-none outline-none select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50"
-                                        [value]="option"
                                         rdxSelectItem
+                                        [value]="option"
                                     >
                                         <span
                                             class="absolute left-0 inline-flex w-6 items-center justify-center"
@@ -1138,8 +1138,8 @@ import { RdxSelectValue } from '../src/select-value';
                                 @for (vegetable of vegetables; track vegetable) {
                                     <div
                                         class="text-popover-foreground data-[disabled]:text-muted-foreground data-[highlighted]:bg-primary data-[highlighted]:text-primary-foreground relative flex h-7 cursor-default items-center rounded-sm pr-8 pl-6 text-sm leading-none outline-none select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50"
-                                        [value]="vegetable"
                                         rdxSelectItem
+                                        [value]="vegetable"
                                     >
                                         <span
                                             class="absolute left-0 inline-flex w-6 items-center justify-center"
diff --git a/skills/radix-ng-examples/references/components/signal-forms.md b/skills/radix-ng-examples/references/components/signal-forms.md
index 77c466455..64369d39b 100644
--- a/skills/radix-ng-examples/references/components/signal-forms.md
+++ b/skills/radix-ng-examples/references/components/signal-forms.md
@@ -3,6 +3,9 @@
 #### Bridge Angular [Signal Forms](https://angular.dev/guide/forms/signals) into headless `Field` and `Form`.
 
 ```typescript
+import { cn, demoButton, demoInput } from '../../storybook/styles';
+import { RdxSignalField } from '../src/signal-field';
+import { RdxSignalForm } from '../src/signal-form';
 import { ChangeDetectionStrategy, Component, signal } from '@angular/core';
 import { email as emailFormat, form, FormField, required } from '@angular/forms/signals';
 import {
@@ -13,9 +16,6 @@ import {
     RdxFieldRoot
 } from '@radix-ng/primitives/field';
 import { RdxFormRoot, RdxFormSubmitEvent } from '@radix-ng/primitives/form';
-import { cn, demoButton, demoInput } from '../../storybook/styles';
-import { RdxSignalField } from '../src/signal-field';
-import { RdxSignalForm } from '../src/signal-form';
 
 @Component({
     changeDetection: ChangeDetectionStrategy.Eager,
@@ -34,22 +34,22 @@ import { RdxSignalForm } from '../src/signal-form';
     template: `
         <form
             class="flex w-80 flex-col gap-3"
+            rdxFormRoot
             [rdxSignalForm]="loginForm"
             (onFormSubmit)="onSubmit($event)"
-            rdxFormRoot
         >
             <!--
               No manual [invalid]/[touched]/[dirty]/[disabled] on rdxFieldRoot — rdxSignalField drives them
               from the Signal Forms field, and the field expression is bound exactly once (on [formField]).
             -->
             <div class="flex flex-col gap-2" rdxFieldRoot required>
-                <label [class]="labelClass" rdxFieldLabel>Email</label>
-                <input [class]="inputClass" [formField]="email" rdxFieldControl rdxSignalField type="email" />
-                <p [class]="descriptionClass" rdxFieldDescription>Use the email connected to your account.</p>
-                <p #err="rdxFieldError" [class]="errorClass" rdxFieldError>{{ err.messages().join(' ') }}</p>
+                <label rdxFieldLabel [class]="labelClass">Email</label>
+                <input rdxFieldControl rdxSignalField type="email" [class]="inputClass" [formField]="email" />
+                <p rdxFieldDescription [class]="descriptionClass">Use the email connected to your account.</p>
+                <p #err="rdxFieldError" rdxFieldError [class]="errorClass">{{ err.messages().join(' ') }}</p>
             </div>
 
-            <button [class]="buttonClass" type="submit">Submit</button>
+            <button type="submit" [class]="buttonClass">Submit</button>
         </form>
     `
 })
@@ -125,6 +125,9 @@ The `rdxFieldRoot` carries no manual `[invalid]`/`[touched]`/`[dirty]` — `rdxS
 the field, including the validation message shown by `rdxFieldError`.
 
 ```typescript
+import { cn, demoButton, demoInput } from '../../storybook/styles';
+import { RdxSignalField } from '../src/signal-field';
+import { RdxSignalForm } from '../src/signal-form';
 import { ChangeDetectionStrategy, Component, signal } from '@angular/core';
 import { email as emailFormat, form, FormField, required } from '@angular/forms/signals';
 import {
@@ -135,9 +138,6 @@ import {
     RdxFieldRoot
 } from '@radix-ng/primitives/field';
 import { RdxFormRoot, RdxFormSubmitEvent } from '@radix-ng/primitives/form';
-import { cn, demoButton, demoInput } from '../../storybook/styles';
-import { RdxSignalField } from '../src/signal-field';
-import { RdxSignalForm } from '../src/signal-form';
 
 @Component({
     changeDetection: ChangeDetectionStrategy.Eager,
@@ -156,22 +156,22 @@ import { RdxSignalForm } from '../src/signal-form';
     template: `
         <form
             class="flex w-80 flex-col gap-3"
+            rdxFormRoot
             [rdxSignalForm]="loginForm"
             (onFormSubmit)="onSubmit($event)"
-            rdxFormRoot
         >
             <!--
               No manual [invalid]/[touched]/[dirty]/[disabled] on rdxFieldRoot — rdxSignalField drives them
               from the Signal Forms field, and the field expression is bound exactly once (on [formField]).
             -->
             <div class="flex flex-col gap-2" rdxFieldRoot required>
-                <label [class]="labelClass" rdxFieldLabel>Email</label>
-                <input [class]="inputClass" [formField]="email" rdxFieldControl rdxSignalField type="email" />
-                <p [class]="descriptionClass" rdxFieldDescription>Use the email connected to your account.</p>
-                <p #err="rdxFieldError" [class]="errorClass" rdxFieldError>{{ err.messages().join(' ') }}</p>
+                <label rdxFieldLabel [class]="labelClass">Email</label>
+                <input rdxFieldControl rdxSignalField type="email" [class]="inputClass" [formField]="email" />
+                <p rdxFieldDescription [class]="descriptionClass">Use the email connected to your account.</p>
+                <p #err="rdxFieldError" rdxFieldError [class]="errorClass">{{ err.messages().join(' ') }}</p>
             </div>
 
-            <button [class]="buttonClass" type="submit">Submit</button>
+            <button type="submit" [class]="buttonClass">Submit</button>
         </form>
     `
 })
diff --git a/skills/radix-ng-examples/references/components/slider.md b/skills/radix-ng-examples/references/components/slider.md
index 85ba68a45..80392be85 100644
--- a/skills/radix-ng-examples/references/components/slider.md
+++ b/skills/radix-ng-examples/references/components/slider.md
@@ -18,7 +18,7 @@ import {
     selector: 'slider-default-example',
     imports: [RdxSliderRoot, RdxSliderControl, RdxSliderTrack, RdxSliderIndicator, RdxSliderThumb, RdxSliderThumbInput],
     template: `
-        <div class="relative w-56 select-none" [value]="45" [step]="5" rdxSliderRoot>
+        <div class="relative w-56 select-none" rdxSliderRoot [value]="45" [step]="5">
             <div class="flex h-5 w-full touch-none items-center" rdxSliderControl>
                 <div class="bg-muted relative h-1 w-full rounded-full" rdxSliderTrack>
                     <div class="bg-primary h-full rounded-full" rdxSliderIndicator></div>
@@ -143,12 +143,12 @@ import {
         <div class="grid w-80 gap-4">
             <div
                 class="relative w-full select-none"
+                rdxSliderRoot
+                name="volume"
                 [value]="value()"
                 [step]="5"
                 (onValueChange)="onValueChange($event)"
                 (onValueCommitted)="onValueCommitted($event)"
-                rdxSliderRoot
-                name="volume"
             >
                 <div class="flex h-5 w-full touch-none items-center" rdxSliderControl>
                     <div class="bg-muted relative h-1 w-full rounded-full" rdxSliderTrack>
@@ -166,9 +166,9 @@ import {
             <label class="text-foreground flex items-center gap-2 text-sm">
                 <input
                     class="accent-primary size-4"
+                    type="checkbox"
                     [checked]="locked()"
                     (change)="locked.set($any($event.target).checked)"
-                    type="checkbox"
                 />
                 Cancel value changes
             </label>
@@ -259,7 +259,7 @@ import {
         <div class="grid w-72 gap-6">
             <div class="grid gap-2">
                 <span class="text-foreground text-sm font-medium">Center</span>
-                <div class="relative px-2 select-none" [value]="50" thumbAlignment="center" rdxSliderRoot>
+                <div class="relative px-2 select-none" thumbAlignment="center" rdxSliderRoot [value]="50">
                     <div class="flex h-6 w-full touch-none items-center" rdxSliderControl>
                         <div class="bg-muted relative h-1 w-full rounded-full" rdxSliderTrack>
                             <div class="bg-primary h-full rounded-full" rdxSliderIndicator></div>
@@ -276,7 +276,7 @@ import {
 
             <div class="grid gap-2">
                 <span class="text-foreground text-sm font-medium">Edge</span>
-                <div class="relative px-2 select-none" [value]="50" thumbAlignment="edge" rdxSliderRoot>
+                <div class="relative px-2 select-none" thumbAlignment="edge" rdxSliderRoot [value]="50">
                     <div class="flex h-6 w-full touch-none items-center" rdxSliderControl>
                         <div class="bg-muted relative h-1 w-full rounded-full" rdxSliderTrack>
                             <div class="bg-primary h-full rounded-full" rdxSliderIndicator></div>
@@ -293,7 +293,7 @@ import {
 
             <div class="grid gap-2">
                 <span class="text-foreground text-sm font-medium">Edge client only</span>
-                <div class="relative px-2 select-none" [value]="50" thumbAlignment="edge-client-only" rdxSliderRoot>
+                <div class="relative px-2 select-none" thumbAlignment="edge-client-only" rdxSliderRoot [value]="50">
                     <div class="flex h-6 w-full touch-none items-center" rdxSliderControl>
                         <div class="bg-muted relative h-1 w-full rounded-full" rdxSliderTrack>
                             <div class="bg-primary h-full rounded-full" rdxSliderIndicator></div>
@@ -337,21 +337,21 @@ import {
     selector: 'slider-range-example',
     imports: [RdxSliderRoot, RdxSliderControl, RdxSliderTrack, RdxSliderIndicator, RdxSliderThumb, RdxSliderThumbInput],
     template: `
-        <div class="relative w-56 select-none" [value]="[25, 75]" [minStepsBetweenValues]="1" rdxSliderRoot>
+        <div class="relative w-56 select-none" rdxSliderRoot [value]="[25, 75]" [minStepsBetweenValues]="1">
             <div class="flex h-5 w-full touch-none items-center" rdxSliderControl>
                 <div class="bg-muted relative h-1 w-full rounded-full" rdxSliderTrack>
                     <div class="bg-primary h-full rounded-full" rdxSliderIndicator></div>
                     <div
                         class="border-border bg-background focus-within:ring-ring block size-5 rounded-full border shadow-sm focus-within:ring-2"
-                        [index]="0"
                         rdxSliderThumb
+                        [index]="0"
                     >
                         <input rdxSliderThumbInput aria-label="Minimum" />
                     </div>
                     <div
                         class="border-border bg-background focus-within:ring-ring block size-5 rounded-full border shadow-sm focus-within:ring-2"
-                        [index]="1"
                         rdxSliderThumb
+                        [index]="1"
                     >
                         <input rdxSliderThumbInput aria-label="Maximum" />
                     </div>
@@ -384,7 +384,7 @@ import {
     selector: 'slider-vertical-example',
     imports: [RdxSliderRoot, RdxSliderControl, RdxSliderTrack, RdxSliderIndicator, RdxSliderThumb, RdxSliderThumbInput],
     template: `
-        <div class="relative h-56 w-5 select-none" [value]="45" [step]="5" rdxSliderRoot orientation="vertical">
+        <div class="relative h-56 w-5 select-none" rdxSliderRoot orientation="vertical" [value]="45" [step]="5">
             <div class="flex h-full w-5 touch-none justify-center" rdxSliderControl>
                 <div class="bg-muted relative h-full w-1 rounded-full" rdxSliderTrack>
                     <div class="bg-primary w-full rounded-full" rdxSliderIndicator></div>
@@ -433,7 +433,7 @@ import {
         RdxSliderValue
     ],
     template: `
-        <div class="relative w-56 select-none" [value]="42" [format]="format" rdxSliderRoot>
+        <div class="relative w-56 select-none" rdxSliderRoot [value]="42" [format]="format">
             <div class="text-foreground mb-2 flex items-center justify-between text-sm">
                 <span id="slider-value-label">Budget</span>
                 <output class="text-muted-foreground tabular-nums" rdxSliderValue></output>
@@ -475,7 +475,7 @@ import {
     selector: 'slider-disabled-example',
     imports: [RdxSliderRoot, RdxSliderControl, RdxSliderTrack, RdxSliderIndicator, RdxSliderThumb, RdxSliderThumbInput],
     template: `
-        <div class="relative w-56 select-none data-[disabled]:opacity-50" [value]="45" rdxSliderRoot disabled>
+        <div class="relative w-56 select-none data-[disabled]:opacity-50" rdxSliderRoot disabled [value]="45">
             <div class="flex h-5 w-full touch-none items-center" rdxSliderControl>
                 <div class="bg-muted relative h-1 w-full rounded-full" rdxSliderTrack>
                     <div class="bg-primary h-full rounded-full" rdxSliderIndicator></div>
@@ -522,7 +522,7 @@ import {
     template: `
         <div class="flex flex-col gap-3">
             <label class="text-foreground text-sm" id="volume-label">Volume</label>
-            <div class="relative w-56 select-none" [formControl]="volume" [step]="5" rdxSliderRoot>
+            <div class="relative w-56 select-none" rdxSliderRoot [formControl]="volume" [step]="5">
                 <div class="flex h-5 w-full touch-none items-center" rdxSliderControl>
                     <div class="bg-muted relative h-1 w-full rounded-full" rdxSliderTrack>
                         <div class="bg-primary h-full rounded-full" rdxSliderIndicator></div>
diff --git a/skills/radix-ng-examples/references/components/switch.md b/skills/radix-ng-examples/references/components/switch.md
index bcda85c4a..5257a4c76 100644
--- a/skills/radix-ng-examples/references/components/switch.md
+++ b/skills/radix-ng-examples/references/components/switch.md
@@ -83,8 +83,8 @@ import { RdxSwitchInput, RdxSwitchRoot, RdxSwitchThumb } from '@radix-ng/primiti
             <button
                 class="bg-muted data-[checked]:bg-primary focus-visible:ring-ring relative inline-flex h-6 w-11 shrink-0 cursor-pointer items-center rounded-full border-0 p-0 shadow-sm transition-colors outline-none focus-visible:ring-2 disabled:cursor-not-allowed disabled:opacity-50"
                 id="airplane-mode-model"
-                [(checked)]="checked"
                 rdxSwitchRoot
+                [(checked)]="checked"
             >
                 <input rdxSwitchInput />
                 <span
@@ -222,8 +222,8 @@ import { RdxSwitchInput, RdxSwitchRoot, RdxSwitchThumb } from '@radix-ng/primiti
         <p class="mt-3">
             <button
                 class="border-border bg-background text-foreground focus-visible:ring-ring inline-flex h-9 items-center rounded-md border px-3 text-sm font-medium shadow-sm outline-none focus-visible:ring-2"
-                (click)="setValue()"
                 type="button"
+                (click)="setValue()"
             >
                 Set preset value
             </button>
diff --git a/skills/radix-ng-examples/references/components/tabs.md b/skills/radix-ng-examples/references/components/tabs.md
index 917bdf9fd..d6ac95dd4 100644
--- a/skills/radix-ng-examples/references/components/tabs.md
+++ b/skills/radix-ng-examples/references/components/tabs.md
@@ -336,16 +336,16 @@ import { RdxTabsList, RdxTabsPanel, RdxTabsPanelPresence, RdxTabsRoot, RdxTabsTa
             <div class="grid">
                 <div class="group col-start-1 row-start-1" rdxTabsPanel value="account">
                     <div
-                        class="bg-background text-foreground animate-tabs-panel-in group-data-[hidden]:animate-tabs-panel-out p-6 text-sm leading-6 outline-none"
                         *rdxTabsPanelPresence
+                        class="bg-background text-foreground animate-tabs-panel-in group-data-[hidden]:animate-tabs-panel-out p-6 text-sm leading-6 outline-none"
                     >
                         Make changes to your account here. Click save when you're done.
                     </div>
                 </div>
                 <div class="group col-start-1 row-start-1" rdxTabsPanel value="password">
                     <div
-                        class="bg-background text-foreground animate-tabs-panel-in group-data-[hidden]:animate-tabs-panel-out p-6 text-sm leading-6 outline-none"
                         *rdxTabsPanelPresence
+                        class="bg-background text-foreground animate-tabs-panel-in group-data-[hidden]:animate-tabs-panel-out p-6 text-sm leading-6 outline-none"
                     >
                         Change your password here. After saving, you'll be logged out.
                     </div>
diff --git a/skills/radix-ng-examples/references/components/time-field.md b/skills/radix-ng-examples/references/components/time-field.md
index 855d8e6e6..fe4616f99 100644
--- a/skills/radix-ng-examples/references/components/time-field.md
+++ b/skills/radix-ng-examples/references/components/time-field.md
@@ -15,27 +15,27 @@ import { RdxVisuallyHiddenInputDirective } from '@radix-ng/primitives/visually-h
         <div class="flex flex-col gap-1.5">
             <label class="text-foreground text-sm font-medium" id="time-default-label">Time</label>
             <div
-                class="border-border bg-background text-foreground focus-within:ring-ring data-[invalid]:border-destructive inline-flex w-fit items-center rounded-md border px-3 py-2 text-sm shadow-sm select-none focus-within:ring-2 data-[disabled]:cursor-not-allowed data-[disabled]:opacity-50"
                 #root="rdxTimeFieldRoot"
+                class="border-border bg-background text-foreground focus-within:ring-ring data-[invalid]:border-destructive inline-flex w-fit items-center rounded-md border px-3 py-2 text-sm shadow-sm select-none focus-within:ring-2 data-[disabled]:cursor-not-allowed data-[disabled]:opacity-50"
                 aria-labelledby="time-default-label"
                 rdxTimeFieldRoot
             >
                 @for (item of root.segmentContents(); track $index) {
                     @if (item.part === 'literal') {
-                        <span class="text-muted-foreground px-px" [part]="item.part" rdxTimeFieldInput>
+                        <span class="text-muted-foreground px-px" rdxTimeFieldInput [part]="item.part">
                             {{ item.value }}
                         </span>
                     } @else {
                         <div
                             class="data-[placeholder]:text-muted-foreground hover:bg-muted focus:bg-primary focus:text-primary-foreground rounded px-0.5 tabular-nums outline-none"
-                            [part]="item.part"
                             rdxTimeFieldInput
+                            [part]="item.part"
                         >
                             {{ item.value }}
                         </div>
                     }
                 }
-                <input [value]="root.value()" rdxVisuallyHiddenInput feature="focusable" />
+                <input rdxVisuallyHiddenInput feature="focusable" [value]="root.value()" />
             </div>
         </div>
     `
@@ -118,27 +118,27 @@ import { RdxVisuallyHiddenInputDirective } from '@radix-ng/primitives/visually-h
         <div class="flex flex-col gap-1.5">
             <label class="text-foreground text-sm font-medium" id="time-default-label">Time</label>
             <div
-                class="border-border bg-background text-foreground focus-within:ring-ring data-[invalid]:border-destructive inline-flex w-fit items-center rounded-md border px-3 py-2 text-sm shadow-sm select-none focus-within:ring-2 data-[disabled]:cursor-not-allowed data-[disabled]:opacity-50"
                 #root="rdxTimeFieldRoot"
+                class="border-border bg-background text-foreground focus-within:ring-ring data-[invalid]:border-destructive inline-flex w-fit items-center rounded-md border px-3 py-2 text-sm shadow-sm select-none focus-within:ring-2 data-[disabled]:cursor-not-allowed data-[disabled]:opacity-50"
                 aria-labelledby="time-default-label"
                 rdxTimeFieldRoot
             >
                 @for (item of root.segmentContents(); track $index) {
                     @if (item.part === 'literal') {
-                        <span class="text-muted-foreground px-px" [part]="item.part" rdxTimeFieldInput>
+                        <span class="text-muted-foreground px-px" rdxTimeFieldInput [part]="item.part">
                             {{ item.value }}
                         </span>
                     } @else {
                         <div
                             class="data-[placeholder]:text-muted-foreground hover:bg-muted focus:bg-primary focus:text-primary-foreground rounded px-0.5 tabular-nums outline-none"
-                            [part]="item.part"
                             rdxTimeFieldInput
+                            [part]="item.part"
                         >
                             {{ item.value }}
                         </div>
                     }
                 }
-                <input [value]="root.value()" rdxVisuallyHiddenInput feature="focusable" />
+                <input rdxVisuallyHiddenInput feature="focusable" [value]="root.value()" />
             </div>
         </div>
     `
@@ -164,56 +164,56 @@ import { RdxVisuallyHiddenInputDirective } from '@radix-ng/primitives/visually-h
             <div class="flex flex-col gap-1.5">
                 <label class="text-foreground text-sm font-medium" id="time-12h-label">12-hour</label>
                 <div
-                    class="border-border bg-background text-foreground focus-within:ring-ring inline-flex w-fit items-center rounded-md border px-3 py-2 text-sm shadow-sm select-none focus-within:ring-2"
                     #h12="rdxTimeFieldRoot"
-                    [hourCycle]="12"
+                    class="border-border bg-background text-foreground focus-within:ring-ring inline-flex w-fit items-center rounded-md border px-3 py-2 text-sm shadow-sm select-none focus-within:ring-2"
                     aria-labelledby="time-12h-label"
                     rdxTimeFieldRoot
+                    [hourCycle]="12"
                 >
                     @for (item of h12.segmentContents(); track $index) {
                         @if (item.part === 'literal') {
-                            <span class="text-muted-foreground px-px" [part]="item.part" rdxTimeFieldInput>
+                            <span class="text-muted-foreground px-px" rdxTimeFieldInput [part]="item.part">
                                 {{ item.value }}
                             </span>
                         } @else {
                             <div
                                 class="data-[placeholder]:text-muted-foreground hover:bg-muted focus:bg-primary focus:text-primary-foreground rounded px-0.5 tabular-nums outline-none"
-                                [part]="item.part"
                                 rdxTimeFieldInput
+                                [part]="item.part"
                             >
                                 {{ item.value }}
                             </div>
                         }
                     }
-                    <input [value]="h12.value()" rdxVisuallyHiddenInput feature="focusable" />
+                    <input rdxVisuallyHiddenInput feature="focusable" [value]="h12.value()" />
                 </div>
             </div>
 
             <div class="flex flex-col gap-1.5">
                 <label class="text-foreground text-sm font-medium" id="time-24h-label">24-hour</label>
                 <div
-                    class="border-border bg-background text-foreground focus-within:ring-ring inline-flex w-fit items-center rounded-md border px-3 py-2 text-sm shadow-sm select-none focus-within:ring-2"
                     #h24="rdxTimeFieldRoot"
-                    [hourCycle]="24"
+                    class="border-border bg-background text-foreground focus-within:ring-ring inline-flex w-fit items-center rounded-md border px-3 py-2 text-sm shadow-sm select-none focus-within:ring-2"
                     aria-labelledby="time-24h-label"
                     rdxTimeFieldRoot
+                    [hourCycle]="24"
                 >
                     @for (item of h24.segmentContents(); track $index) {
                         @if (item.part === 'literal') {
-                            <span class="text-muted-foreground px-px" [part]="item.part" rdxTimeFieldInput>
+                            <span class="text-muted-foreground px-px" rdxTimeFieldInput [part]="item.part">
                                 {{ item.value }}
                             </span>
                         } @else {
                             <div
                                 class="data-[placeholder]:text-muted-foreground hover:bg-muted focus:bg-primary focus:text-primary-foreground rounded px-0.5 tabular-nums outline-none"
-                                [part]="item.part"
                                 rdxTimeFieldInput
+                                [part]="item.part"
                             >
                                 {{ item.value }}
                             </div>
                         }
                     }
-                    <input [value]="h24.value()" rdxVisuallyHiddenInput feature="focusable" />
+                    <input rdxVisuallyHiddenInput feature="focusable" [value]="h24.value()" />
                 </div>
             </div>
         </div>
@@ -244,28 +244,28 @@ import { RdxVisuallyHiddenInputDirective } from '@radix-ng/primitives/visually-h
                         {{ granularity }}
                     </label>
                     <div
-                        class="border-border bg-background text-foreground focus-within:ring-ring inline-flex w-fit items-center rounded-md border px-3 py-2 text-sm shadow-sm select-none focus-within:ring-2"
                         #root="rdxTimeFieldRoot"
+                        class="border-border bg-background text-foreground focus-within:ring-ring inline-flex w-fit items-center rounded-md border px-3 py-2 text-sm shadow-sm select-none focus-within:ring-2"
+                        rdxTimeFieldRoot
                         [granularity]="granularity"
                         [attr.aria-labelledby]="granularity + '-label'"
-                        rdxTimeFieldRoot
                     >
                         @for (item of root.segmentContents(); track $index) {
                             @if (item.part === 'literal') {
-                                <span class="text-muted-foreground px-px" [part]="item.part" rdxTimeFieldInput>
+                                <span class="text-muted-foreground px-px" rdxTimeFieldInput [part]="item.part">
                                     {{ item.value }}
                                 </span>
                             } @else {
                                 <div
                                     class="data-[placeholder]:text-muted-foreground hover:bg-muted focus:bg-primary focus:text-primary-foreground rounded px-0.5 tabular-nums outline-none"
-                                    [part]="item.part"
                                     rdxTimeFieldInput
+                                    [part]="item.part"
                                 >
                                     {{ item.value }}
                                 </div>
                             }
                         }
-                        <input [value]="root.value()" rdxVisuallyHiddenInput feature="focusable" />
+                        <input rdxVisuallyHiddenInput feature="focusable" [value]="root.value()" />
                     </div>
                 </div>
             }
@@ -295,29 +295,29 @@ import { RdxVisuallyHiddenInputDirective } from '@radix-ng/primitives/visually-h
         <div class="flex flex-col gap-1.5">
             <label class="text-foreground text-sm font-medium" id="time-disabled-label">Time</label>
             <div
-                class="border-border bg-background text-foreground inline-flex w-fit items-center rounded-md border px-3 py-2 text-sm shadow-sm select-none data-[disabled]:cursor-not-allowed data-[disabled]:opacity-50"
                 #root="rdxTimeFieldRoot"
-                [value]="value"
+                class="border-border bg-background text-foreground inline-flex w-fit items-center rounded-md border px-3 py-2 text-sm shadow-sm select-none data-[disabled]:cursor-not-allowed data-[disabled]:opacity-50"
                 aria-labelledby="time-disabled-label"
                 disabled
                 rdxTimeFieldRoot
+                [value]="value"
             >
                 @for (item of root.segmentContents(); track $index) {
                     @if (item.part === 'literal') {
-                        <span class="text-muted-foreground px-px" [part]="item.part" rdxTimeFieldInput>
+                        <span class="text-muted-foreground px-px" rdxTimeFieldInput [part]="item.part">
                             {{ item.value }}
                         </span>
                     } @else {
                         <div
                             class="data-[placeholder]:text-muted-foreground rounded px-0.5 tabular-nums outline-none"
-                            [part]="item.part"
                             rdxTimeFieldInput
+                            [part]="item.part"
                         >
                             {{ item.value }}
                         </div>
                     }
                 }
-                <input [value]="root.value()" rdxVisuallyHiddenInput feature="focusable" />
+                <input rdxVisuallyHiddenInput feature="focusable" [value]="root.value()" />
             </div>
         </div>
     `
@@ -345,30 +345,30 @@ import { RdxVisuallyHiddenInputDirective } from '@radix-ng/primitives/visually-h
         <div class="flex flex-col gap-1.5">
             <label class="text-foreground text-sm font-medium" id="time-readonly-label">Time</label>
             <div
-                class="border-border bg-muted text-foreground focus-within:ring-ring inline-flex w-fit items-center rounded-md border px-3 py-2 text-sm shadow-sm select-none focus-within:ring-2"
                 #root="rdxTimeFieldRoot"
-                [value]="value"
+                class="border-border bg-muted text-foreground focus-within:ring-ring inline-flex w-fit items-center rounded-md border px-3 py-2 text-sm shadow-sm select-none focus-within:ring-2"
                 aria-labelledby="time-readonly-label"
                 granularity="second"
                 readonly
                 rdxTimeFieldRoot
+                [value]="value"
             >
                 @for (item of root.segmentContents(); track $index) {
                     @if (item.part === 'literal') {
-                        <span class="text-muted-foreground px-px" [part]="item.part" rdxTimeFieldInput>
+                        <span class="text-muted-foreground px-px" rdxTimeFieldInput [part]="item.part">
                             {{ item.value }}
                         </span>
                     } @else {
                         <div
                             class="data-[placeholder]:text-muted-foreground focus:bg-primary focus:text-primary-foreground rounded px-0.5 tabular-nums outline-none"
-                            [part]="item.part"
                             rdxTimeFieldInput
+                            [part]="item.part"
                         >
                             {{ item.value }}
                         </div>
                     }
                 }
-                <input [value]="root.value()" rdxVisuallyHiddenInput feature="focusable" />
+                <input rdxVisuallyHiddenInput feature="focusable" [value]="root.value()" />
             </div>
         </div>
     `
@@ -398,30 +398,30 @@ import { RdxVisuallyHiddenInputDirective } from '@radix-ng/primitives/visually-h
                 Office hours (09:00–17:00)
             </label>
             <div
-                class="border-border bg-background text-foreground focus-within:ring-ring data-[invalid]:border-destructive data-[invalid]:focus-within:ring-destructive inline-flex w-fit items-center rounded-md border px-3 py-2 text-sm shadow-sm select-none focus-within:ring-2"
                 #root="rdxTimeFieldRoot"
+                class="border-border bg-background text-foreground focus-within:ring-ring data-[invalid]:border-destructive data-[invalid]:focus-within:ring-destructive inline-flex w-fit items-center rounded-md border px-3 py-2 text-sm shadow-sm select-none focus-within:ring-2"
+                aria-labelledby="time-validation-label"
+                rdxTimeFieldRoot
                 [value]="value"
                 [minValue]="minValue"
                 [maxValue]="maxValue"
-                aria-labelledby="time-validation-label"
-                rdxTimeFieldRoot
             >
                 @for (item of root.segmentContents(); track $index) {
                     @if (item.part === 'literal') {
-                        <span class="text-muted-foreground px-px" [part]="item.part" rdxTimeFieldInput>
+                        <span class="text-muted-foreground px-px" rdxTimeFieldInput [part]="item.part">
                             {{ item.value }}
                         </span>
                     } @else {
                         <div
                             class="data-[placeholder]:text-muted-foreground data-[invalid]:text-destructive hover:bg-muted focus:bg-primary focus:text-primary-foreground rounded px-0.5 tabular-nums outline-none"
-                            [part]="item.part"
                             rdxTimeFieldInput
+                            [part]="item.part"
                         >
                             {{ item.value }}
                         </div>
                     }
                 }
-                <input [value]="root.value()" rdxVisuallyHiddenInput feature="focusable" />
+                <input rdxVisuallyHiddenInput feature="focusable" [value]="root.value()" />
             </div>
             @if (root.isInvalid()) {
                 <p class="text-destructive text-xs">Please pick a time between 09:00 and 17:00.</p>
@@ -461,29 +461,29 @@ interface LocaleExample {
                 <div class="flex flex-col gap-1.5">
                     <label class="text-foreground text-sm font-medium" [id]="example.id">{{ example.label }}</label>
                     <div
-                        class="border-border bg-background text-foreground focus-within:ring-ring inline-flex w-fit items-center rounded-md border px-3 py-2 text-sm shadow-sm select-none focus-within:ring-2"
                         #root="rdxTimeFieldRoot"
-                        [locale]="example.locale"
-                        [attr.aria-labelledby]="example.id"
+                        class="border-border bg-background text-foreground focus-within:ring-ring inline-flex w-fit items-center rounded-md border px-3 py-2 text-sm shadow-sm select-none focus-within:ring-2"
                         granularity="second"
                         rdxTimeFieldRoot
+                        [locale]="example.locale"
+                        [attr.aria-labelledby]="example.id"
                     >
                         @for (item of root.segmentContents(); track $index) {
                             @if (item.part === 'literal') {
-                                <span class="text-muted-foreground px-px" [part]="item.part" rdxTimeFieldInput>
+                                <span class="text-muted-foreground px-px" rdxTimeFieldInput [part]="item.part">
                                     {{ item.value }}
                                 </span>
                             } @else {
                                 <div
                                     class="data-[placeholder]:text-muted-foreground hover:bg-muted focus:bg-primary focus:text-primary-foreground rounded px-0.5 tabular-nums outline-none"
-                                    [part]="item.part"
                                     rdxTimeFieldInput
+                                    [part]="item.part"
                                 >
                                     {{ item.value }}
                                 </div>
                             }
                         }
-                        <input [value]="root.value()" rdxVisuallyHiddenInput feature="focusable" />
+                        <input rdxVisuallyHiddenInput feature="focusable" [value]="root.value()" />
                     </div>
                 </div>
             }
diff --git a/skills/radix-ng-examples/references/components/toast.md b/skills/radix-ng-examples/references/components/toast.md
index 786d4fbbf..bf59db648 100644
--- a/skills/radix-ng-examples/references/components/toast.md
+++ b/skills/radix-ng-examples/references/components/toast.md
@@ -3,9 +3,9 @@
 #### A succinct, low-priority message that appears temporarily, stacks, and can be swiped away.
 
 ```typescript
+import { cn, demoButton, demoToast } from '../../storybook/styles';
 import { ChangeDetectionStrategy, Component, inject } from '@angular/core';
 import { provideRdxToastManager, RdxToastManager, toastImports } from '@radix-ng/primitives/toast';
-import { cn, demoButton, demoToast } from '../../storybook/styles';
 
 @Component({
     changeDetection: ChangeDetectionStrategy.Eager,
@@ -16,17 +16,17 @@ import { cn, demoButton, demoToast } from '../../storybook/styles';
         <button [class]="cn(b.base, b.primary, b.size.md)" (click)="notify()">Show toast</button>
 
         <div rdxToastPortal>
-            <div [class]="t.viewport" rdxToastViewport>
+            <div rdxToastViewport [class]="t.viewport">
                 @for (toast of manager.toasts(); track toast.id) {
-                    <div [class]="t.root" [toast]="toast" rdxToastRoot>
-                        <div [class]="t.content" rdxToastContent>
+                    <div rdxToastRoot [class]="t.root" [toast]="toast">
+                        <div rdxToastContent [class]="t.content">
                             <div class="min-w-0 flex-1">
-                                <p [class]="t.title" rdxToastTitle>{{ toast.title }}</p>
+                                <p rdxToastTitle [class]="t.title">{{ toast.title }}</p>
                                 @if (toast.description) {
-                                    <p [class]="t.description" rdxToastDescription>{{ toast.description }}</p>
+                                    <p rdxToastDescription [class]="t.description">{{ toast.description }}</p>
                                 }
                             </div>
-                            <button [class]="t.close" aria-label="Dismiss" rdxToastClose>✕</button>
+                            <button aria-label="Dismiss" rdxToastClose [class]="t.close">✕</button>
                         </div>
                     </div>
                 }
@@ -118,9 +118,9 @@ An anchored toast is wrapped in `rdxToastPositioner` instead of joining the stac
 Push a single toast; it auto-dismisses after the timeout.
 
 ```typescript
+import { cn, demoButton, demoToast } from '../../storybook/styles';
 import { ChangeDetectionStrategy, Component, inject } from '@angular/core';
 import { provideRdxToastManager, RdxToastManager, toastImports } from '@radix-ng/primitives/toast';
-import { cn, demoButton, demoToast } from '../../storybook/styles';
 
 @Component({
     changeDetection: ChangeDetectionStrategy.Eager,
@@ -131,17 +131,17 @@ import { cn, demoButton, demoToast } from '../../storybook/styles';
         <button [class]="cn(b.base, b.primary, b.size.md)" (click)="notify()">Show toast</button>
 
         <div rdxToastPortal>
-            <div [class]="t.viewport" rdxToastViewport>
+            <div rdxToastViewport [class]="t.viewport">
                 @for (toast of manager.toasts(); track toast.id) {
-                    <div [class]="t.root" [toast]="toast" rdxToastRoot>
-                        <div [class]="t.content" rdxToastContent>
+                    <div rdxToastRoot [class]="t.root" [toast]="toast">
+                        <div rdxToastContent [class]="t.content">
                             <div class="min-w-0 flex-1">
-                                <p [class]="t.title" rdxToastTitle>{{ toast.title }}</p>
+                                <p rdxToastTitle [class]="t.title">{{ toast.title }}</p>
                                 @if (toast.description) {
-                                    <p [class]="t.description" rdxToastDescription>{{ toast.description }}</p>
+                                    <p rdxToastDescription [class]="t.description">{{ toast.description }}</p>
                                 }
                             </div>
-                            <button [class]="t.close" aria-label="Dismiss" rdxToastClose>✕</button>
+                            <button aria-label="Dismiss" rdxToastClose [class]="t.close">✕</button>
                         </div>
                     </div>
                 }
@@ -173,9 +173,9 @@ Add several toasts to see the collapsed stack, then hover or focus it to expand.
 while the stack is hovered or focused.
 
 ```typescript
+import { cn, demoButton, demoToast } from '../../storybook/styles';
 import { ChangeDetectionStrategy, Component, inject } from '@angular/core';
 import { provideRdxToastManager, RdxToastManager, toastImports } from '@radix-ng/primitives/toast';
-import { cn, demoButton, demoToast } from '../../storybook/styles';
 
 /**
  * Push several toasts to see the collapsed stack, then hover (or focus) the stack to expand it —
@@ -194,15 +194,15 @@ import { cn, demoButton, demoToast } from '../../storybook/styles';
         </div>
 
         <div rdxToastPortal>
-            <div [class]="t.viewport" rdxToastViewport>
+            <div rdxToastViewport [class]="t.viewport">
                 @for (toast of manager.toasts(); track toast.id) {
-                    <div [class]="t.root" [toast]="toast" rdxToastRoot>
-                        <div [class]="t.content" rdxToastContent>
+                    <div rdxToastRoot [class]="t.root" [toast]="toast">
+                        <div rdxToastContent [class]="t.content">
                             <div class="min-w-0 flex-1">
-                                <p [class]="t.title" rdxToastTitle>{{ toast.title }}</p>
-                                <p [class]="t.description" rdxToastDescription>{{ toast.description }}</p>
+                                <p rdxToastTitle [class]="t.title">{{ toast.title }}</p>
+                                <p rdxToastDescription [class]="t.description">{{ toast.description }}</p>
                             </div>
-                            <button [class]="t.close" aria-label="Dismiss" rdxToastClose>✕</button>
+                            <button aria-label="Dismiss" rdxToastClose [class]="t.close">✕</button>
                         </div>
                     </div>
                 }
@@ -234,9 +234,9 @@ export class ToastStackingExample {
 Drag a toast toward an allowed `swipeDirection` to dismiss it; release early to snap back.
 
 ```typescript
+import { cn, demoButton, demoToast } from '../../storybook/styles';
 import { ChangeDetectionStrategy, Component, inject } from '@angular/core';
 import { provideRdxToastManager, RdxToastManager, toastImports } from '@radix-ng/primitives/toast';
-import { cn, demoButton, demoToast } from '../../storybook/styles';
 
 /**
  * Toasts can be dismissed by swiping. `swipeDirection` lists the allowed directions; the gesture
@@ -252,17 +252,17 @@ import { cn, demoButton, demoToast } from '../../storybook/styles';
         <button [class]="cn(b.base, b.primary, b.size.md)" (click)="add()">Show swipeable toast</button>
 
         <div rdxToastPortal>
-            <div [class]="t.viewport" rdxToastViewport>
+            <div rdxToastViewport [class]="t.viewport">
                 @for (toast of manager.toasts(); track toast.id) {
-                    <div [class]="t.root" [toast]="toast" [swipeDirection]="['right', 'down']" rdxToastRoot>
-                        <div [class]="t.content" rdxToastContent>
+                    <div rdxToastRoot [class]="t.root" [toast]="toast" [swipeDirection]="['right', 'down']">
+                        <div rdxToastContent [class]="t.content">
                             <div class="min-w-0 flex-1">
-                                <p [class]="t.title" rdxToastTitle>Swipe me away</p>
-                                <p [class]="t.description" rdxToastDescription>
+                                <p rdxToastTitle [class]="t.title">Swipe me away</p>
+                                <p rdxToastDescription [class]="t.description">
                                     Drag right or down to dismiss. Release early to snap back.
                                 </p>
                             </div>
-                            <button [class]="t.close" aria-label="Dismiss" rdxToastClose>✕</button>
+                            <button aria-label="Dismiss" rdxToastClose [class]="t.close">✕</button>
                         </div>
                     </div>
                 }
@@ -287,9 +287,9 @@ export class ToastSwipeExample {
 Drive one toast through a promise: `loading`, then `success` or `error`.
 
 ```typescript
+import { cn, demoButton, demoToast } from '../../storybook/styles';
 import { ChangeDetectionStrategy, Component, inject } from '@angular/core';
 import { provideRdxToastManager, RdxToastManager, toastImports } from '@radix-ng/primitives/toast';
-import { cn, demoButton, demoToast } from '../../storybook/styles';
 
 /**
  * `manager.promise()` drives a single toast through a promise's lifecycle: it shows the `loading`
@@ -308,18 +308,18 @@ import { cn, demoButton, demoToast } from '../../storybook/styles';
         </div>
 
         <div rdxToastPortal>
-            <div [class]="t.viewport" rdxToastViewport>
+            <div rdxToastViewport [class]="t.viewport">
                 @for (toast of manager.toasts(); track toast.id) {
-                    <div [class]="t.root" [toast]="toast" rdxToastRoot>
-                        <div [class]="t.content" rdxToastContent>
+                    <div rdxToastRoot [class]="t.root" [toast]="toast">
+                        <div rdxToastContent [class]="t.content">
                             <div class="min-w-0 flex-1">
-                                <p [class]="t.title" rdxToastTitle>{{ toast.title }}</p>
+                                <p rdxToastTitle [class]="t.title">{{ toast.title }}</p>
                                 @if (toast.description) {
-                                    <p [class]="t.description" rdxToastDescription>{{ toast.description }}</p>
+                                    <p rdxToastDescription [class]="t.description">{{ toast.description }}</p>
                                 }
                             </div>
                             @if (!toast.loading) {
-                                <button [class]="t.close" aria-label="Dismiss" rdxToastClose>✕</button>
+                                <button aria-label="Dismiss" rdxToastClose [class]="t.close">✕</button>
                             }
                         </div>
                     </div>
@@ -356,10 +356,10 @@ export class ToastPromiseExample {
 Branch on a free-form `type` to render an icon, and raise `priority` to `high` for assertive errors.
 
 ```typescript
+import { cn, demoButton, demoToast } from '../../storybook/styles';
 import { ChangeDetectionStrategy, Component, inject } from '@angular/core';
 import { LucideCircleCheck, LucideCircleX, LucideInfo } from '@lucide/angular';
 import { provideRdxToastManager, RdxToastManager, toastImports } from '@radix-ng/primitives/toast';
-import { cn, demoButton, demoToast } from '../../storybook/styles';
 
 /**
  * `type` is a free-form category surfaced back on the toast object — branch on it in the template
@@ -379,26 +379,26 @@ import { cn, demoButton, demoToast } from '../../storybook/styles';
         </div>
 
         <div rdxToastPortal>
-            <div [class]="t.viewport" rdxToastViewport>
+            <div rdxToastViewport [class]="t.viewport">
                 @for (toast of manager.toasts(); track toast.id) {
-                    <div [class]="t.root" [toast]="toast" rdxToastRoot>
-                        <div [class]="t.content" rdxToastContent>
+                    <div rdxToastRoot [class]="t.root" [toast]="toast">
+                        <div rdxToastContent [class]="t.content">
                             @switch (toast.type) {
                                 @case ('success') {
-                                    <svg [class]="cn(t.icon, 'text-foreground')" lucideCircleCheck></svg>
+                                    <svg lucideCircleCheck [class]="cn(t.icon, 'text-foreground')"></svg>
                                 }
                                 @case ('error') {
-                                    <svg [class]="cn(t.icon, 'text-destructive')" lucideCircleX></svg>
+                                    <svg lucideCircleX [class]="cn(t.icon, 'text-destructive')"></svg>
                                 }
                                 @default {
-                                    <svg [class]="cn(t.icon, 'text-muted-foreground')" lucideInfo></svg>
+                                    <svg lucideInfo [class]="cn(t.icon, 'text-muted-foreground')"></svg>
                                 }
                             }
                             <div class="min-w-0 flex-1">
-                                <p [class]="t.title" rdxToastTitle>{{ toast.title }}</p>
-                                <p [class]="t.description" rdxToastDescription>{{ toast.description }}</p>
+                                <p rdxToastTitle [class]="t.title">{{ toast.title }}</p>
+                                <p rdxToastDescription [class]="t.description">{{ toast.description }}</p>
                             </div>
-                            <button [class]="t.close" aria-label="Dismiss" rdxToastClose>✕</button>
+                            <button aria-label="Dismiss" rdxToastClose [class]="t.close">✕</button>
                         </div>
                     </div>
                 }
@@ -436,9 +436,9 @@ export class ToastTypesExample {
 Placement is the consumer's CSS — here the viewport is anchored top-center and the stack grows down.
 
 ```typescript
+import { cn, demoButton, demoToast } from '../../storybook/styles';
 import { ChangeDetectionStrategy, Component, inject } from '@angular/core';
 import { provideRdxToastManager, RdxToastManager, toastImports } from '@radix-ng/primitives/toast';
-import { cn, demoButton, demoToast } from '../../storybook/styles';
 
 /**
  * Placement is entirely the consumer's CSS — the primitive only positions nothing. Here the viewport
@@ -454,15 +454,15 @@ import { cn, demoButton, demoToast } from '../../storybook/styles';
         <button [class]="cn(b.base, b.primary, b.size.md)" (click)="add()">Show toast (top)</button>
 
         <div rdxToastPortal>
-            <div [class]="t.viewportTop" rdxToastViewport>
+            <div rdxToastViewport [class]="t.viewportTop">
                 @for (toast of manager.toasts(); track toast.id) {
-                    <div [class]="t.rootTop" [toast]="toast" [swipeDirection]="['up']" rdxToastRoot>
-                        <div [class]="t.content" rdxToastContent>
+                    <div rdxToastRoot [class]="t.rootTop" [toast]="toast" [swipeDirection]="['up']">
+                        <div rdxToastContent [class]="t.content">
                             <div class="min-w-0 flex-1">
-                                <p [class]="t.title" rdxToastTitle>{{ toast.title }}</p>
-                                <p [class]="t.description" rdxToastDescription>{{ toast.description }}</p>
+                                <p rdxToastTitle [class]="t.title">{{ toast.title }}</p>
+                                <p rdxToastDescription [class]="t.description">{{ toast.description }}</p>
                             </div>
-                            <button [class]="t.close" aria-label="Dismiss" rdxToastClose>✕</button>
+                            <button aria-label="Dismiss" rdxToastClose [class]="t.close">✕</button>
                         </div>
                     </div>
                 }
@@ -490,9 +490,9 @@ export class ToastCustomPositionExample {
 `rdxToastAction` adds an in-toast action button; this one undoes the change and dismisses the toast.
 
 ```typescript
+import { cn, demoButton, demoToast } from '../../storybook/styles';
 import { ChangeDetectionStrategy, Component, inject } from '@angular/core';
 import { provideRdxToastManager, RdxToastManager, RdxToastObject, toastImports } from '@radix-ng/primitives/toast';
-import { cn, demoButton, demoToast } from '../../storybook/styles';
 
 /**
  * `rdxToastAction` renders an in-toast action button. The label and handler are passed through the
@@ -510,19 +510,19 @@ import { cn, demoButton, demoToast } from '../../storybook/styles';
         </div>
 
         <div rdxToastPortal>
-            <div [class]="t.viewport" rdxToastViewport>
+            <div rdxToastViewport [class]="t.viewport">
                 @for (toast of manager.toasts(); track toast.id) {
-                    <div [class]="t.root" [toast]="toast" rdxToastRoot>
-                        <div [class]="t.content" rdxToastContent>
+                    <div rdxToastRoot [class]="t.root" [toast]="toast">
+                        <div rdxToastContent [class]="t.content">
                             <div class="min-w-0 flex-1">
-                                <p [class]="t.title" rdxToastTitle>{{ toast.title }}</p>
+                                <p rdxToastTitle [class]="t.title">{{ toast.title }}</p>
                                 @if (toast.actionProps; as action) {
-                                    <button [class]="t.action" (click)="runAction(toast, $event)" rdxToastAction>
+                                    <button rdxToastAction [class]="t.action" (click)="runAction(toast, $event)">
                                         {{ action.label }}
                                     </button>
                                 }
                             </div>
-                            <button [class]="t.close" aria-label="Dismiss" rdxToastClose>✕</button>
+                            <button aria-label="Dismiss" rdxToastClose [class]="t.close">✕</button>
                         </div>
                     </div>
                 }
@@ -558,9 +558,9 @@ export class ToastUndoActionExample {
 Attach a typed `data` payload and read it back in the template for rich, app-specific toasts.
 
 ```typescript
+import { cn, demoButton, demoToast } from '../../storybook/styles';
 import { ChangeDetectionStrategy, Component, inject } from '@angular/core';
 import { provideRdxToastManager, RdxToastManager, toastImports } from '@radix-ng/primitives/toast';
-import { cn, demoButton, demoToast } from '../../storybook/styles';
 
 interface MentionData {
     user: string;
@@ -581,11 +581,11 @@ interface MentionData {
         <button [class]="cn(b.base, b.primary, b.size.md)" (click)="mention()">New mention</button>
 
         <div rdxToastPortal>
-            <div [class]="t.viewport" rdxToastViewport>
+            <div rdxToastViewport [class]="t.viewport">
                 @for (toast of manager.toasts(); track toast.id) {
-                    <div [class]="t.root" [toast]="toast" rdxToastRoot>
+                    <div rdxToastRoot [class]="t.root" [toast]="toast">
                         @let data = $any(toast.data);
-                        <div [class]="t.content" rdxToastContent>
+                        <div rdxToastContent [class]="t.content">
                             <span
                                 class="bg-muted text-muted-foreground grid size-9 shrink-0 place-items-center rounded-full text-xs font-semibold"
                                 aria-hidden="true"
@@ -593,10 +593,10 @@ interface MentionData {
                                 {{ data.initials }}
                             </span>
                             <div class="min-w-0 flex-1">
-                                <p [class]="t.title" rdxToastTitle>{{ data.user }} mentioned you</p>
-                                <p [class]="t.description" rdxToastDescription>“{{ data.message }}”</p>
+                                <p rdxToastTitle [class]="t.title">{{ data.user }} mentioned you</p>
+                                <p rdxToastDescription [class]="t.description">“{{ data.message }}”</p>
                             </div>
-                            <button [class]="t.close" aria-label="Dismiss" rdxToastClose>✕</button>
+                            <button aria-label="Dismiss" rdxToastClose [class]="t.close">✕</button>
                         </div>
                     </div>
                 }
@@ -631,9 +631,9 @@ export class ToastCustomDataExample {
 Pass a fixed `id` to upsert a single toast in place instead of stacking duplicates.
 
 ```typescript
+import { cn, demoButton, demoToast } from '../../storybook/styles';
 import { ChangeDetectionStrategy, Component, inject } from '@angular/core';
 import { provideRdxToastManager, RdxToastManager, toastImports } from '@radix-ng/primitives/toast';
-import { cn, demoButton, demoToast } from '../../storybook/styles';
 
 /**
  * Passing a fixed `id` upserts instead of stacking — repeated calls update the same toast in place
@@ -649,15 +649,15 @@ import { cn, demoButton, demoToast } from '../../storybook/styles';
         <button [class]="cn(b.base, b.primary, b.size.md)" (click)="copy()">Copy link</button>
 
         <div rdxToastPortal>
-            <div [class]="t.viewport" rdxToastViewport>
+            <div rdxToastViewport [class]="t.viewport">
                 @for (toast of manager.toasts(); track toast.id) {
-                    <div [class]="t.root" [toast]="toast" rdxToastRoot>
-                        <div [class]="t.content" rdxToastContent>
+                    <div rdxToastRoot [class]="t.root" [toast]="toast">
+                        <div rdxToastContent [class]="t.content">
                             <div class="min-w-0 flex-1">
-                                <p [class]="t.title" rdxToastTitle>{{ toast.title }}</p>
-                                <p [class]="t.description" rdxToastDescription>{{ toast.description }}</p>
+                                <p rdxToastTitle [class]="t.title">{{ toast.title }}</p>
+                                <p rdxToastDescription [class]="t.description">{{ toast.description }}</p>
                             </div>
-                            <button [class]="t.close" aria-label="Dismiss" rdxToastClose>✕</button>
+                            <button aria-label="Dismiss" rdxToastClose [class]="t.close">✕</button>
                         </div>
                     </div>
                 }
@@ -690,9 +690,9 @@ export class ToastDeduplicatedExample {
 Measured heights feed `--toast-offset-y`, so the expanded stack lines up even with differing heights.
 
 ```typescript
+import { cn, demoButton, demoToast } from '../../storybook/styles';
 import { ChangeDetectionStrategy, Component, inject } from '@angular/core';
 import { provideRdxToastManager, RdxToastManager, toastImports } from '@radix-ng/primitives/toast';
-import { cn, demoButton, demoToast } from '../../storybook/styles';
 
 /**
  * Each toast's height is measured and shared as `--toast-offset-y`, so the expanded layout lines up
@@ -711,15 +711,15 @@ import { cn, demoButton, demoToast } from '../../storybook/styles';
         </div>
 
         <div rdxToastPortal>
-            <div [class]="t.viewport" rdxToastViewport>
+            <div rdxToastViewport [class]="t.viewport">
                 @for (toast of manager.toasts(); track toast.id) {
-                    <div [class]="t.root" [toast]="toast" rdxToastRoot>
-                        <div [class]="t.content" rdxToastContent>
+                    <div rdxToastRoot [class]="t.root" [toast]="toast">
+                        <div rdxToastContent [class]="t.content">
                             <div class="min-w-0 flex-1">
-                                <p [class]="t.title" rdxToastTitle>{{ toast.title }}</p>
-                                <p [class]="t.description" rdxToastDescription>{{ toast.description }}</p>
+                                <p rdxToastTitle [class]="t.title">{{ toast.title }}</p>
+                                <p rdxToastDescription [class]="t.description">{{ toast.description }}</p>
                             </div>
-                            <button [class]="t.close" aria-label="Dismiss" rdxToastClose>✕</button>
+                            <button aria-label="Dismiss" rdxToastClose [class]="t.close">✕</button>
                         </div>
                     </div>
                 }
@@ -754,9 +754,9 @@ export class ToastVaryingHeightsExample {
 Pin a toast to an element with `rdxToastPositioner` (powered by popper) instead of joining the stack.
 
 ```typescript
+import { cn, demoButton, demoToast } from '../../storybook/styles';
 import { ChangeDetectionStrategy, Component, inject } from '@angular/core';
 import { provideRdxToastManager, RdxToastManager, toastImports } from '@radix-ng/primitives/toast';
-import { cn, demoButton, demoToast } from '../../storybook/styles';
 
 /**
  * An anchored toast is positioned against an element with `rdxToastPositioner` (powered by popper)
@@ -772,17 +772,17 @@ import { cn, demoButton, demoToast } from '../../storybook/styles';
         <button [class]="cn(b.base, b.primary, b.size.md)" (click)="show($event)">Anchored toast</button>
 
         <div rdxToastPortal>
-            <div [class]="t.viewport" rdxToastViewport>
+            <div rdxToastViewport [class]="t.viewport">
                 @for (toast of manager.toasts(); track toast.id) {
                     @if (toast.positionerProps; as positioner) {
-                        <div [anchor]="positioner.anchor" [side]="positioner.side ?? 'top'" rdxToastPositioner>
-                            <div [class]="t.anchored" [toast]="toast" rdxToastRoot>
-                                <div [class]="t.content" rdxToastContent>
+                        <div rdxToastPositioner [anchor]="positioner.anchor" [side]="positioner.side ?? 'top'">
+                            <div rdxToastRoot [class]="t.anchored" [toast]="toast">
+                                <div rdxToastContent [class]="t.content">
                                     <div class="min-w-0 flex-1">
-                                        <p [class]="t.title" rdxToastTitle>{{ toast.title }}</p>
-                                        <p [class]="t.description" rdxToastDescription>{{ toast.description }}</p>
+                                        <p rdxToastTitle [class]="t.title">{{ toast.title }}</p>
+                                        <p rdxToastDescription [class]="t.description">{{ toast.description }}</p>
                                     </div>
-                                    <button [class]="t.close" aria-label="Dismiss" rdxToastClose>✕</button>
+                                    <button aria-label="Dismiss" rdxToastClose [class]="t.close">✕</button>
                                 </div>
                             </div>
                         </div>
diff --git a/skills/radix-ng-examples/references/components/toolbar.md b/skills/radix-ng-examples/references/components/toolbar.md
index 5a08a31d8..a0a6fa5a2 100644
--- a/skills/radix-ng-examples/references/components/toolbar.md
+++ b/skills/radix-ng-examples/references/components/toolbar.md
@@ -138,11 +138,11 @@ screen-reader users can still reach it.
 Render a `[rdxMenuTrigger]` on a toolbar button to open a menu from the toolbar.
 
 ```typescript
+import { demoMenu } from '../../storybook/styles';
 import { ChangeDetectionStrategy, Component } from '@angular/core';
 import { LucideChevronDown } from '@lucide/angular';
 import { RdxMenuModule } from '@radix-ng/primitives/menu';
 import { toolbarImports } from '@radix-ng/primitives/toolbar';
-import { demoMenu } from '../../storybook/styles';
 
 @Component({
     changeDetection: ChangeDetectionStrategy.Eager,
@@ -180,12 +180,12 @@ import { demoMenu } from '../../storybook/styles';
                 </button>
 
                 @if (menu.open()) {
-                    <div [class]="m.positioner" sideOffset="6" rdxMenuPositioner>
-                        <div [class]="m.popup" rdxMenuPopup>
-                            <button [class]="m.item" rdxMenuItem>Undo</button>
-                            <button [class]="m.item" rdxMenuItem>Redo</button>
-                            <div [class]="m.separator" rdxMenuSeparator></div>
-                            <button [class]="m.item" rdxMenuItem>Clear formatting</button>
+                    <div sideOffset="6" rdxMenuPositioner [class]="m.positioner">
+                        <div rdxMenuPopup [class]="m.popup">
+                            <button rdxMenuItem [class]="m.item">Undo</button>
+                            <button rdxMenuItem [class]="m.item">Redo</button>
+                            <div rdxMenuSeparator [class]="m.separator"></div>
+                            <button rdxMenuItem [class]="m.item">Clear formatting</button>
                         </div>
                     </div>
                 }
@@ -203,11 +203,11 @@ export class ToolbarWithMenuExample {
 Wrap toolbar buttons with a tooltip by stacking `[rdxTooltipTrigger]`.
 
 ```typescript
+import { demoTooltip } from '../../storybook/styles';
 import { ChangeDetectionStrategy, Component } from '@angular/core';
 import { LucideBold, LucideItalic } from '@lucide/angular';
 import { toolbarImports } from '@radix-ng/primitives/toolbar';
 import { tooltipImports } from '@radix-ng/primitives/tooltip';
-import { demoTooltip } from '../../storybook/styles';
 
 const itemClass =
     'text-foreground hover:bg-muted focus-visible:ring-ring inline-flex h-8 w-8 items-center justify-center rounded-md outline-none transition-colors focus-visible:ring-2';
@@ -226,9 +226,9 @@ const itemClass =
                 <button class="${itemClass}" aria-label="Bold" rdxToolbarButton rdxTooltipTrigger>
                     <svg lucideBold size="16"></svg>
                 </button>
-                <div *rdxTooltipPortal [class]="t.positioner" sideOffset="8" rdxTooltipPositioner>
-                    <div [class]="t.popup" rdxTooltipPopup>Bold</div>
-                    <span [class]="t.arrow" rdxTooltipArrow></span>
+                <div *rdxTooltipPortal sideOffset="8" rdxTooltipPositioner [class]="t.positioner">
+                    <div rdxTooltipPopup [class]="t.popup">Bold</div>
+                    <span rdxTooltipArrow [class]="t.arrow"></span>
                 </div>
             </ng-container>
 
@@ -236,9 +236,9 @@ const itemClass =
                 <button class="${itemClass}" aria-label="Italic" rdxToolbarButton rdxTooltipTrigger>
                     <svg lucideItalic size="16"></svg>
                 </button>
-                <div *rdxTooltipPortal [class]="t.positioner" sideOffset="8" rdxTooltipPositioner>
-                    <div [class]="t.popup" rdxTooltipPopup>Italic</div>
-                    <span [class]="t.arrow" rdxTooltipArrow></span>
+                <div *rdxTooltipPortal sideOffset="8" rdxTooltipPositioner [class]="t.positioner">
+                    <div rdxTooltipPopup [class]="t.popup">Italic</div>
+                    <span rdxTooltipArrow [class]="t.arrow"></span>
                 </div>
             </ng-container>
         </div>
@@ -285,11 +285,11 @@ const stepClass =
 
             <div
                 class="flex items-center gap-0.5"
-                [value]="16"
                 rdxNumberFieldRoot
                 min="8"
                 max="72"
                 aria-label="Font size"
+                [value]="16"
             >
                 <button class="${stepClass}" aria-label="Decrease" rdxToolbarButton rdxNumberFieldDecrement>
                     <svg lucideMinus size="16"></svg>
diff --git a/skills/radix-ng-examples/references/components/tooltip.md b/skills/radix-ng-examples/references/components/tooltip.md
index cc8fd52df..358839057 100644
--- a/skills/radix-ng-examples/references/components/tooltip.md
+++ b/skills/radix-ng-examples/references/components/tooltip.md
@@ -7,10 +7,10 @@ primitives. It remains headless: styles and native CSS animations belong to the
 follows Base UI.
 
 ```typescript
+import { cn, demoButton, demoTooltip } from '../../storybook/styles';
 import { ChangeDetectionStrategy, Component } from '@angular/core';
 import { LucidePlus } from '@lucide/angular';
 import { tooltipImports } from '@radix-ng/primitives/tooltip';
-import { cn, demoButton, demoTooltip } from '../../storybook/styles';
 
 @Component({
     changeDetection: ChangeDetectionStrategy.Eager,
@@ -18,13 +18,13 @@ import { cn, demoButton, demoTooltip } from '../../storybook/styles';
     imports: [...tooltipImports, LucidePlus],
     template: `
         <ng-container rdxTooltip>
-            <button [class]="cn(b.base, b.outline, b.size.icon)" aria-label="Add to library" rdxTooltipTrigger>
+            <button aria-label="Add to library" rdxTooltipTrigger [class]="cn(b.base, b.outline, b.size.icon)">
                 <svg aria-hidden="true" lucidePlus size="16" />
             </button>
 
-            <div *rdxTooltipPortal [class]="t.positioner" sideOffset="8" rdxTooltipPositioner>
-                <div [class]="t.popup" rdxTooltipPopup>Add to library</div>
-                <span [class]="t.arrow" rdxTooltipArrow></span>
+            <div *rdxTooltipPortal sideOffset="8" rdxTooltipPositioner [class]="t.positioner">
+                <div rdxTooltipPopup [class]="t.popup">Add to library</div>
+                <span rdxTooltipArrow [class]="t.arrow"></span>
             </div>
         </ng-container>
     `
@@ -96,10 +96,10 @@ exit keyframes on its root element finish. Use the `*` microsyntax on the positi
 A tooltip anchored to an icon button, with an arrow.
 
 ```typescript
+import { cn, demoButton, demoTooltip } from '../../storybook/styles';
 import { ChangeDetectionStrategy, Component } from '@angular/core';
 import { LucidePlus } from '@lucide/angular';
 import { tooltipImports } from '@radix-ng/primitives/tooltip';
-import { cn, demoButton, demoTooltip } from '../../storybook/styles';
 
 @Component({
     changeDetection: ChangeDetectionStrategy.Eager,
@@ -107,13 +107,13 @@ import { cn, demoButton, demoTooltip } from '../../storybook/styles';
     imports: [...tooltipImports, LucidePlus],
     template: `
         <ng-container rdxTooltip>
-            <button [class]="cn(b.base, b.outline, b.size.icon)" aria-label="Add to library" rdxTooltipTrigger>
+            <button aria-label="Add to library" rdxTooltipTrigger [class]="cn(b.base, b.outline, b.size.icon)">
                 <svg aria-hidden="true" lucidePlus size="16" />
             </button>
 
-            <div *rdxTooltipPortal [class]="t.positioner" sideOffset="8" rdxTooltipPositioner>
-                <div [class]="t.popup" rdxTooltipPopup>Add to library</div>
-                <span [class]="t.arrow" rdxTooltipArrow></span>
+            <div *rdxTooltipPortal sideOffset="8" rdxTooltipPositioner [class]="t.positioner">
+                <div rdxTooltipPopup [class]="t.popup">Add to library</div>
+                <span rdxTooltipArrow [class]="t.arrow"></span>
             </div>
         </ng-container>
     `
@@ -132,29 +132,29 @@ instant-open `timeout` window — once one tooltip opens, adjacent ones open ins
 ms after the last one closes.
 
 ```typescript
+import { cn, demoButton, demoTooltip } from '../../storybook/styles';
 import { ChangeDetectionStrategy, Component } from '@angular/core';
 import { LucideDynamicIcon } from '@lucide/angular';
 import { tooltipImports } from '@radix-ng/primitives/tooltip';
-import { cn, demoButton, demoTooltip } from '../../storybook/styles';
 
 @Component({
     changeDetection: ChangeDetectionStrategy.Eager,
     selector: 'rdx-tooltip-provider',
     imports: [...tooltipImports, LucideDynamicIcon],
     template: `
-        <div class="flex items-center gap-2" [delay]="600" [timeout]="400" rdxTooltipProvider>
+        <div class="flex items-center gap-2" rdxTooltipProvider [delay]="600" [timeout]="400">
             @for (action of actions; track action.name) {
                 <ng-container rdxTooltip>
                     <button
+                        rdxTooltipTrigger
                         [class]="cn(b.base, b.outline, b.size.icon)"
                         [attr.aria-label]="action.name"
-                        rdxTooltipTrigger
                     >
-                        <svg [lucideIcon]="action.icon" aria-hidden="true" size="16" />
+                        <svg aria-hidden="true" size="16" [lucideIcon]="action.icon" />
                     </button>
 
-                    <div *rdxTooltipPortal [class]="t.positioner" sideOffset="8" rdxTooltipPositioner>
-                        <div [class]="t.popup" rdxTooltipPopup>{{ action.name }}</div>
+                    <div *rdxTooltipPortal sideOffset="8" rdxTooltipPositioner [class]="t.positioner">
+                        <div rdxTooltipPopup [class]="t.popup">{{ action.name }}</div>
                     </div>
                 </ng-container>
             }
@@ -180,9 +180,9 @@ Set `delay` (and `closeDelay`) on `rdxTooltipTrigger` to override the root, prov
 values for that trigger only.
 
 ```typescript
+import { cn, demoButton, demoTooltip } from '../../storybook/styles';
 import { ChangeDetectionStrategy, Component } from '@angular/core';
 import { tooltipImports } from '@radix-ng/primitives/tooltip';
-import { cn, demoButton, demoTooltip } from '../../storybook/styles';
 
 @Component({
     changeDetection: ChangeDetectionStrategy.Eager,
@@ -192,12 +192,12 @@ import { cn, demoButton, demoTooltip } from '../../storybook/styles';
         <div class="flex items-center gap-3">
             @for (item of triggers; track item.delay) {
                 <ng-container rdxTooltip>
-                    <button [class]="cn(b.base, b.outline, b.size.md)" [delay]="item.delay" rdxTooltipTrigger>
+                    <button rdxTooltipTrigger [class]="cn(b.base, b.outline, b.size.md)" [delay]="item.delay">
                         {{ item.label }}
                     </button>
 
-                    <div *rdxTooltipPortal [class]="t.positioner" sideOffset="8" rdxTooltipPositioner>
-                        <div [class]="t.popup" rdxTooltipPopup>Opened after {{ item.delay }} ms</div>
+                    <div *rdxTooltipPortal sideOffset="8" rdxTooltipPositioner [class]="t.positioner">
+                        <div rdxTooltipPopup [class]="t.popup">Opened after {{ item.delay }} ms</div>
                     </div>
                 </ng-container>
             }
@@ -223,9 +223,9 @@ Set `disabled` on `rdxTooltipTrigger` (or `disabled` on `rdxTooltip` for all tri
 trigger never opens the tooltip and reflects `data-trigger-disabled`.
 
 ```typescript
+import { cn, demoButton, demoTooltip } from '../../storybook/styles';
 import { ChangeDetectionStrategy, Component } from '@angular/core';
 import { tooltipImports } from '@radix-ng/primitives/tooltip';
-import { cn, demoButton, demoTooltip } from '../../storybook/styles';
 
 @Component({
     changeDetection: ChangeDetectionStrategy.Eager,
@@ -235,12 +235,12 @@ import { cn, demoButton, demoTooltip } from '../../storybook/styles';
         <div class="flex items-center gap-3">
             @for (item of triggers; track item.label) {
                 <ng-container rdxTooltip>
-                    <button [class]="cn(b.base, b.outline, b.size.md)" [disabled]="item.disabled" rdxTooltipTrigger>
+                    <button rdxTooltipTrigger [class]="cn(b.base, b.outline, b.size.md)" [disabled]="item.disabled">
                         {{ item.label }}
                     </button>
 
-                    <div *rdxTooltipPortal [class]="t.positioner" rdxTooltipPositioner>
-                        <div [class]="t.popup" rdxTooltipPopup>{{ item.label }} tooltip</div>
+                    <div *rdxTooltipPortal rdxTooltipPositioner [class]="t.positioner">
+                        <div rdxTooltipPopup [class]="t.popup">{{ item.label }} tooltip</div>
                     </div>
                 </ng-container>
             }
@@ -265,9 +265,9 @@ Set `trackCursorAxis` on the root to `'x'`, `'y'`, or `'both'` to make the popup
 along that axis.
 
 ```typescript
+import { demoTooltip } from '../../storybook/styles';
 import { ChangeDetectionStrategy, Component } from '@angular/core';
 import { tooltipImports } from '@radix-ng/primitives/tooltip';
-import { demoTooltip } from '../../storybook/styles';
 
 @Component({
     changeDetection: ChangeDetectionStrategy.Eager,
@@ -283,8 +283,8 @@ import { demoTooltip } from '../../storybook/styles';
                 Move the cursor over me
             </button>
 
-            <div *rdxTooltipPortal [class]="t.positioner" sideOffset="12" rdxTooltipPositioner>
-                <div [class]="t.popup" rdxTooltipPopup>Following the cursor</div>
+            <div *rdxTooltipPortal sideOffset="12" rdxTooltipPositioner [class]="t.positioner">
+                <div rdxTooltipPopup [class]="t.popup">Following the cursor</div>
             </div>
         </ng-container>
     `
@@ -300,6 +300,7 @@ Tooltip uses `updatePositionStrategy="always"` so it can follow moving triggers
 when the trigger moves continuously, such as a slider thumb being dragged.
 
 ```typescript
+import { demoTooltip } from '../../storybook/styles';
 import { ChangeDetectionStrategy, Component, signal } from '@angular/core';
 import {
     RdxSliderControl,
@@ -310,7 +311,6 @@ import {
     RdxSliderTrack
 } from '@radix-ng/primitives/slider';
 import { tooltipImports } from '@radix-ng/primitives/tooltip';
-import { demoTooltip } from '../../storybook/styles';
 
 @Component({
     changeDetection: ChangeDetectionStrategy.Eager,
@@ -325,30 +325,30 @@ import { demoTooltip } from '../../storybook/styles';
         RdxSliderThumbInput
     ],
     template: `
-        <div class="relative w-52 select-none" [value]="45" [step]="5" rdxSliderRoot>
+        <div class="relative w-52 select-none" rdxSliderRoot [value]="45" [step]="5">
             <div class="flex h-5 w-full touch-none items-center" rdxSliderControl>
                 <div class="bg-muted relative h-1 w-full rounded-full" rdxSliderTrack>
                     <div class="bg-primary h-full rounded-full" rdxSliderIndicator></div>
 
-                    <ng-container [open]="showTooltipState()" rdxTooltip disabled>
+                    <ng-container rdxTooltip disabled [open]="showTooltipState()">
                         <div
                             class="border-border bg-background focus-within:ring-ring focus-within:ring-offset-background block size-5 rounded-full border shadow-sm focus-within:ring-2 focus-within:ring-offset-2"
-                            [rdxOnPointerDown]="handlePointerDown"
                             rdxSliderThumb
                             rdxTooltipTrigger
+                            [rdxOnPointerDown]="handlePointerDown"
                         >
                             <input rdxSliderThumbInput aria-label="Volume" />
                         </div>
 
                         <div
                             *rdxTooltipPortal
-                            [class]="t.positioner"
                             sideOffset="8"
                             side="top"
                             updatePositionStrategy="always"
                             rdxTooltipPositioner
+                            [class]="t.positioner"
                         >
-                            <div [class]="t.popup" rdxTooltipPopup>Volume</div>
+                            <div rdxTooltipPopup [class]="t.popup">Volume</div>
                         </div>
                     </ng-container>
                 </div>
diff --git a/skills/radix-ng-examples/references/llms-full.txt b/skills/radix-ng-examples/references/llms-full.txt
index 5cd927fe3..2d468f82a 100644
--- a/skills/radix-ng-examples/references/llms-full.txt
+++ b/skills/radix-ng-examples/references/llms-full.txt
@@ -88,6 +88,7 @@ import {
 Disable the whole accordion via `disabled` on the root, or a single item via `disabled` on the item.
 
 ```typescript
+import { cn, demoAccordion } from '../../storybook/styles';
 import { ChangeDetectionStrategy, Component } from '@angular/core';
 import {
     RdxAccordionHeaderDirective,
@@ -96,7 +97,6 @@ import {
     RdxAccordionRootDirective,
     RdxAccordionTriggerDirective
 } from '@radix-ng/primitives/accordion';
-import { cn, demoAccordion } from '../../storybook/styles';
 
 @Component({
     changeDetection: ChangeDetectionStrategy.Eager,
@@ -109,32 +109,32 @@ import { cn, demoAccordion } from '../../storybook/styles';
         RdxAccordionPanelDirective
     ],
     template: `
-        <div [class]="cn(a.root, 'w-[300px]')" [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-[300px]')" [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'" disabled rdxAccordionItem>
-                <h3 [class]="a.header" rdxAccordionHeader>
-                    <button [class]="a.trigger" type="button" rdxAccordionTrigger>Is it unstyled?</button>
+            <div disabled 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>
@@ -152,6 +152,7 @@ export class AccordionDisabledExample {
 Set `multiple` to let several items stay open at once.
 
 ```typescript
+import { cn, demoAccordion } from '../../storybook/styles';
 import { ChangeDetectionStrategy, Component } from '@angular/core';
 import {
     RdxAccordionHeaderDirective,
@@ -160,7 +161,6 @@ import {
     RdxAccordionRootDirective,
     RdxAccordionTriggerDirective
 } from '@radix-ng/primitives/accordion';
-import { cn, demoAccordion } from '../../storybook/styles';
 
 @Component({
     changeDetection: ChangeDetectionStrategy.Eager,
@@ -173,32 +173,32 @@ import { cn, demoAccordion } from '../../storybook/styles';
         RdxAccordionPanelDirective
     ],
     template: `
-        <div [class]="cn(a.root, 'w-[300px]')" [value]="['item-2', 'item-3']" multiple 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 multiple rdxAccordionRoot [class]="cn(a.root, 'w-[300px]')" [value]="['item-2', 'item-3']">
+            <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. It's unstyled by default, giving you freedom over the look and feel.
                     </div>
@@ -219,6 +219,7 @@ In single mode the open item can always be closed by clicking its trigger again
 there is no separate `collapsible` input).
 
 ```typescript
+import { cn, demoAccordion } from '../../storybook/styles';
 import { ChangeDetectionStrategy, Component } from '@angular/core';
 import {
     RdxAccordionHeaderDirective,
@@ -227,7 +228,6 @@ import {
     RdxAccordionRootDirective,
     RdxAccordionTriggerDirective
 } from '@radix-ng/primitives/accordion';
-import { cn, demoAccordion } from '../../storybook/styles';
 
 @Component({
     changeDetection: ChangeDetectionStrategy.Eager,
@@ -240,32 +240,32 @@ import { cn, demoAccordion } from '../../storybook/styles';
         RdxAccordionPanelDirective
     ],
     template: `
-        <div [class]="cn(a.root, 'w-[300px]')" [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-[300px]')" [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>
@@ -283,6 +283,7 @@ export class AccordionCollapsibleExample {
 Set `orientation="horizontal"` to expose horizontal state for styling. Following the APG guidance update adopted by Base UI, orientation no longer changes keyboard focus behavior.
 
 ```typescript
+import { cn, demoAccordion } from '../../storybook/styles';
 import { ChangeDetectionStrategy, Component } from '@angular/core';
 import {
     RdxAccordionHeaderDirective,
@@ -291,7 +292,6 @@ import {
     RdxAccordionRootDirective,
     RdxAccordionTriggerDirective
 } from '@radix-ng/primitives/accordion';
-import { cn, demoAccordion } from '../../storybook/styles';
 
 @Component({
     changeDetection: ChangeDetectionStrategy.Eager,
@@ -305,42 +305,42 @@ import { cn, demoAccordion } from '../../storybook/styles';
     ],
     template: `
         <div
+            rdxAccordionRoot
             [class]="cn(a.root, 'flex h-[300px] flex-row')"
             [defaultValue]="'item-1'"
             [orientation]="'horizontal'"
-            rdxAccordionRoot
         >
-            <div [class]="cn(a.item, a.itemH)" [value]="'item-1'" rdxAccordionItem>
-                <div [class]="a.header" rdxAccordionHeader>
-                    <button [class]="cn(a.trigger, a.triggerH)" type="button" rdxAccordionTrigger>
+            <div rdxAccordionItem [class]="cn(a.item, a.itemH)" [value]="'item-1'">
+                <div rdxAccordionHeader [class]="a.header">
+                    <button type="button" rdxAccordionTrigger [class]="cn(a.trigger, a.triggerH)">
                         Is it accessible?
                     </button>
                 </div>
-                <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]="cn(a.item, a.itemH)" [value]="'item-2'" [disabled]="true" rdxAccordionItem>
-                <div [class]="a.header" rdxAccordionHeader>
-                    <button [class]="cn(a.trigger, a.triggerH)" type="button" rdxAccordionTrigger>
+            <div rdxAccordionItem [class]="cn(a.item, a.itemH)" [value]="'item-2'" [disabled]="true">
+                <div rdxAccordionHeader [class]="a.header">
+                    <button type="button" rdxAccordionTrigger [class]="cn(a.trigger, a.triggerH)">
                         Is it unstyled?
                     </button>
                 </div>
-                <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]="cn(a.item, a.itemH)" [value]="'item-3'" rdxAccordionItem>
-                <div [class]="a.header" rdxAccordionHeader>
-                    <button [class]="cn(a.trigger, a.triggerH)" type="button" rdxAccordionTrigger>
+            <div rdxAccordionItem [class]="cn(a.item, a.itemH)" [value]="'item-3'">
+                <div rdxAccordionHeader [class]="a.header">
+                    <button type="button" rdxAccordionTrigger [class]="cn(a.trigger, a.triggerH)">
                         Can it be animated?
                     </button>
                 </div>
-                <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>
@@ -360,6 +360,7 @@ root emits `onValueChange` with `{ value, eventDetails }`. Call `eventDetails.ca
 change before it commits.
 
 ```typescript
+import { cn, demoAccordion } from '../../storybook/styles';
 import { ChangeDetectionStrategy, Component, signal } from '@angular/core';
 import {
     RdxAccordionHeaderDirective,
@@ -368,7 +369,6 @@ import {
     RdxAccordionRootDirective,
     RdxAccordionTriggerDirective
 } from '@radix-ng/primitives/accordion';
-import { cn, demoAccordion } from '../../storybook/styles';
 
 @Component({
     changeDetection: ChangeDetectionStrategy.Eager,
@@ -382,21 +382,21 @@ import { cn, demoAccordion } from '../../storybook/styles';
     ],
     template: `
         <div class="flex w-[300px] flex-col gap-3">
-            <div [class]="a.root" [defaultValue]="'item-1'" rdxAccordionRoot>
-                <div [class]="a.item" [value]="'item-1'" (onOpenChange)="log('Accessibility', $event)" rdxAccordionItem>
-                    <h3 [class]="a.header" rdxAccordionHeader>
-                        <button [class]="a.trigger" type="button" rdxAccordionTrigger>Is it accessible?</button>
+            <div rdxAccordionRoot [class]="a.root" [defaultValue]="'item-1'">
+                <div rdxAccordionItem [class]="a.item" [value]="'item-1'" (onOpenChange)="log('Accessibility', $event)">
+                    <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'" (onOpenChange)="log('Styling', $event)" 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'" (onOpenChange)="log('Styling', $event)">
+                    <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.</div>
                     </div>
                 </div>
@@ -425,6 +425,7 @@ form state. Use `hiddenUntilFound` instead to keep collapsed content discoverabl
 find-in-page (it renders `hidden="until-found"`).
 
 ```typescript
+import { cn, demoAccordion, demoInput } from '../../storybook/styles';
 import { ChangeDetectionStrategy, Component } from '@angular/core';
 import { FormsModule } from '@angular/forms';
 import {
@@ -434,7 +435,6 @@ import {
     RdxAccordionRootDirective,
     RdxAccordionTriggerDirective
 } from '@radix-ng/primitives/accordion';
-import { cn, demoAccordion, demoInput } from '../../storybook/styles';
 
 /**
  * With `keepMounted`, collapsed panels keep their element in the DOM while hidden.
@@ -452,23 +452,23 @@ import { cn, demoAccordion, demoInput } from '../../storybook/styles';
         RdxAccordionPanelDirective
     ],
     template: `
-        <div [class]="cn(a.root, 'w-[300px]')" [defaultValue]="'item-1'" keepMounted rdxAccordionRoot>
-            <div [class]="a.item" [value]="'item-1'" rdxAccordionItem>
-                <h3 [class]="a.header" rdxAccordionHeader>
-                    <button [class]="a.trigger" type="button" rdxAccordionTrigger>Shipping address</button>
+        <div keepMounted rdxAccordionRoot [class]="cn(a.root, 'w-[300px]')" [defaultValue]="'item-1'">
+            <div rdxAccordionItem [class]="a.item" [value]="'item-1'">
+                <h3 rdxAccordionHeader [class]="a.header">
+                    <button type="button" rdxAccordionTrigger [class]="a.trigger">Shipping address</button>
                 </h3>
-                <div [class]="a.content" rdxAccordionPanel>
+                <div rdxAccordionPanel [class]="a.content">
                     <div [class]="a.contentText">
-                        <input [(ngModel)]="address" [class]="input" placeholder="Type, then collapse & reopen" />
+                        <input placeholder="Type, then collapse & reopen" [class]="input" [(ngModel)]="address" />
                     </div>
                 </div>
             </div>
 
-            <div [class]="a.item" [value]="'item-2'" rdxAccordionItem>
-                <h3 [class]="a.header" rdxAccordionHeader>
-                    <button [class]="a.trigger" type="button" rdxAccordionTrigger>Billing address</button>
+            <div rdxAccordionItem [class]="a.item" [value]="'item-2'">
+                <h3 rdxAccordionHeader [class]="a.header">
+                    <button type="button" rdxAccordionTrigger [class]="a.trigger">Billing address</button>
                 </h3>
-                <div [class]="a.content" rdxAccordionPanel>
+                <div rdxAccordionPanel [class]="a.content">
                     <div [class]="a.contentText">Same as shipping.</div>
                 </div>
             </div>
@@ -578,9 +578,9 @@ its popup uses `role="alertdialog"`. Each `rdxAlertDialog*` part is a thin wrapp
 dialog part.
 
 ```typescript
+import { cn, demoButton, demoDialog } from '../../storybook/styles';
 import { ChangeDetectionStrategy, Component } from '@angular/core';
 import { alertDialogImports } from '@radix-ng/primitives/alert-dialog';
-import { cn, demoButton, demoDialog } from '../../storybook/styles';
 
 @Component({
     changeDetection: ChangeDetectionStrategy.Eager,
@@ -588,21 +588,21 @@ import { cn, demoButton, demoDialog } from '../../storybook/styles';
     imports: [...alertDialogImports],
     template: `
         <div rdxAlertDialogRoot>
-            <button [class]="cn(b.base, b.destructive, b.size.md)" rdxAlertDialogTrigger>Delete account</button>
+            <button rdxAlertDialogTrigger [class]="cn(b.base, b.destructive, b.size.md)">Delete account</button>
 
             <ng-template rdxAlertDialogPortal>
-                <div [class]="cn(d.backdrop, d.backdropAnimated)" rdxAlertDialogBackdrop></div>
+                <div rdxAlertDialogBackdrop [class]="cn(d.backdrop, d.backdropAnimated)"></div>
 
-                <div [class]="cn(d.popup, d.popupAnimated)" rdxAlertDialogPopup>
-                    <h2 [class]="d.title" rdxAlertDialogTitle>Are you absolutely sure?</h2>
-                    <p [class]="d.description" rdxAlertDialogDescription>
+                <div rdxAlertDialogPopup [class]="cn(d.popup, d.popupAnimated)">
+                    <h2 rdxAlertDialogTitle [class]="d.title">Are you absolutely sure?</h2>
+                    <p rdxAlertDialogDescription [class]="d.description">
                         This action cannot be undone. This will permanently delete your account and remove your data
                         from our servers.
                     </p>
 
                     <div [class]="d.footer">
-                        <button [class]="cn(b.base, b.outline, b.size.sm)" rdxAlertDialogClose>Cancel</button>
-                        <button [class]="cn(b.base, b.destructive, b.size.sm)" rdxAlertDialogClose>
+                        <button rdxAlertDialogClose [class]="cn(b.base, b.outline, b.size.sm)">Cancel</button>
+                        <button rdxAlertDialogClose [class]="cn(b.base, b.destructive, b.size.sm)">
                             Yes, delete account
                         </button>
                     </div>
@@ -675,9 +675,9 @@ import { RdxAlertDialogModule } from '@radix-ng/primitives/alert-dialog';
 A destructive confirmation with Cancel and an action button. Clicking the backdrop keeps it open.
 
 ```typescript
+import { cn, demoButton, demoDialog } from '../../storybook/styles';
 import { ChangeDetectionStrategy, Component } from '@angular/core';
 import { alertDialogImports } from '@radix-ng/primitives/alert-dialog';
-import { cn, demoButton, demoDialog } from '../../storybook/styles';
 
 @Component({
     changeDetection: ChangeDetectionStrategy.Eager,
@@ -685,21 +685,21 @@ import { cn, demoButton, demoDialog } from '../../storybook/styles';
     imports: [...alertDialogImports],
     template: `
         <div rdxAlertDialogRoot>
-            <button [class]="cn(b.base, b.destructive, b.size.md)" rdxAlertDialogTrigger>Delete account</button>
+            <button rdxAlertDialogTrigger [class]="cn(b.base, b.destructive, b.size.md)">Delete account</button>
 
             <ng-template rdxAlertDialogPortal>
-                <div [class]="cn(d.backdrop, d.backdropAnimated)" rdxAlertDialogBackdrop></div>
+                <div rdxAlertDialogBackdrop [class]="cn(d.backdrop, d.backdropAnimated)"></div>
 
-                <div [class]="cn(d.popup, d.popupAnimated)" rdxAlertDialogPopup>
-                    <h2 [class]="d.title" rdxAlertDialogTitle>Are you absolutely sure?</h2>
-                    <p [class]="d.description" rdxAlertDialogDescription>
+                <div rdxAlertDialogPopup [class]="cn(d.popup, d.popupAnimated)">
+                    <h2 rdxAlertDialogTitle [class]="d.title">Are you absolutely sure?</h2>
+                    <p rdxAlertDialogDescription [class]="d.description">
                         This action cannot be undone. This will permanently delete your account and remove your data
                         from our servers.
                     </p>
 
                     <div [class]="d.footer">
-                        <button [class]="cn(b.base, b.outline, b.size.sm)" rdxAlertDialogClose>Cancel</button>
-                        <button [class]="cn(b.base, b.destructive, b.size.sm)" rdxAlertDialogClose>
+                        <button rdxAlertDialogClose [class]="cn(b.base, b.outline, b.size.sm)">Cancel</button>
+                        <button rdxAlertDialogClose [class]="cn(b.base, b.destructive, b.size.sm)">
                             Yes, delete account
                         </button>
                     </div>
@@ -720,9 +720,9 @@ export class RdxAlertDialogDefaultComponent {
 Bind `[(open)]` to open or close the alert dialog from component state.
 
 ```typescript
+import { cn, demoButton, demoDialog } from '../../storybook/styles';
 import { ChangeDetectionStrategy, Component, signal } from '@angular/core';
 import { alertDialogImports } from '@radix-ng/primitives/alert-dialog';
-import { cn, demoButton, demoDialog } from '../../storybook/styles';
 
 @Component({
     changeDetection: ChangeDetectionStrategy.Eager,
@@ -734,15 +734,15 @@ import { cn, demoButton, demoDialog } from '../../storybook/styles';
 
             <button [class]="cn(b.base, b.outline, b.size.sm)" (click)="open.set(true)">Open from outside</button>
 
-            <div [(open)]="open" rdxAlertDialogRoot>
-                <button [class]="cn(b.base, b.destructive, b.size.md)" rdxAlertDialogTrigger>Discard changes</button>
+            <div rdxAlertDialogRoot [(open)]="open">
+                <button rdxAlertDialogTrigger [class]="cn(b.base, b.destructive, b.size.md)">Discard changes</button>
 
                 <ng-template rdxAlertDialogPortal>
-                    <div [class]="cn(d.backdrop, d.backdropAnimated)" rdxAlertDialogBackdrop></div>
+                    <div rdxAlertDialogBackdrop [class]="cn(d.backdrop, d.backdropAnimated)"></div>
 
-                    <div [class]="cn(d.popup, d.popupAnimated)" rdxAlertDialogPopup>
-                        <h2 [class]="d.title" rdxAlertDialogTitle>Discard unsaved changes?</h2>
-                        <p [class]="d.description" rdxAlertDialogDescription>
+                    <div rdxAlertDialogPopup [class]="cn(d.popup, d.popupAnimated)">
+                        <h2 rdxAlertDialogTitle [class]="d.title">Discard unsaved changes?</h2>
+                        <p rdxAlertDialogDescription [class]="d.description">
                             The open state is owned by the component and bound with
                             <code>[(open)]</code>
                             .
@@ -776,9 +776,9 @@ Several triggers can open the same alert dialog. The active trigger's `payload`
 so the content can adapt to what is being confirmed.
 
 ```typescript
+import { cn, demoButton, demoDialog } from '../../storybook/styles';
 import { ChangeDetectionStrategy, Component } from '@angular/core';
 import { alertDialogImports } from '@radix-ng/primitives/alert-dialog';
-import { cn, demoButton, demoDialog } from '../../storybook/styles';
 
 @Component({
     changeDetection: ChangeDetectionStrategy.Eager,
@@ -787,29 +787,29 @@ import { cn, demoButton, demoDialog } from '../../storybook/styles';
     template: `
         <div #root="rdxAlertDialogRoot" rdxAlertDialogRoot>
             <div class="flex gap-2">
-                <button [class]="cn(b.base, b.outline, b.size.md)" payload="photo" rdxAlertDialogTrigger>
+                <button payload="photo" rdxAlertDialogTrigger [class]="cn(b.base, b.outline, b.size.md)">
                     Delete photo
                 </button>
-                <button [class]="cn(b.base, b.outline, b.size.md)" payload="video" rdxAlertDialogTrigger>
+                <button payload="video" rdxAlertDialogTrigger [class]="cn(b.base, b.outline, b.size.md)">
                     Delete video
                 </button>
-                <button [class]="cn(b.base, b.outline, b.size.md)" payload="album" rdxAlertDialogTrigger>
+                <button payload="album" rdxAlertDialogTrigger [class]="cn(b.base, b.outline, b.size.md)">
                     Delete album
                 </button>
             </div>
 
             <ng-template rdxAlertDialogPortal>
-                <div [class]="cn(d.backdrop, d.backdropAnimated)" rdxAlertDialogBackdrop></div>
-                <div [class]="cn(d.popup, d.popupAnimated)" rdxAlertDialogPopup>
-                    <h2 [class]="d.title" rdxAlertDialogTitle>Delete this {{ root.payload() || 'item' }}?</h2>
-                    <p [class]="d.description" rdxAlertDialogDescription>
+                <div rdxAlertDialogBackdrop [class]="cn(d.backdrop, d.backdropAnimated)"></div>
+                <div rdxAlertDialogPopup [class]="cn(d.popup, d.popupAnimated)">
+                    <h2 rdxAlertDialogTitle [class]="d.title">Delete this {{ root.payload() || 'item' }}?</h2>
+                    <p rdxAlertDialogDescription [class]="d.description">
                         Every trigger opens the same alert dialog; the active trigger's
                         <code>payload</code>
                         decides what is being deleted.
                     </p>
                     <div [class]="d.footer">
-                        <button [class]="cn(b.base, b.outline, b.size.sm)" rdxAlertDialogClose>Cancel</button>
-                        <button [class]="cn(b.base, b.destructive, b.size.sm)" rdxAlertDialogClose>Delete</button>
+                        <button rdxAlertDialogClose [class]="cn(b.base, b.outline, b.size.sm)">Cancel</button>
+                        <button rdxAlertDialogClose [class]="cn(b.base, b.destructive, b.size.sm)">Delete</button>
                     </div>
                 </div>
             </ng-template>
@@ -828,9 +828,9 @@ export class RdxAlertDialogMultipleTriggersComponent {
 Bind both `[(open)]` and `[(triggerId)]` to choose which trigger is active from component state.
 
 ```typescript
+import { cn, demoButton, demoDialog } from '../../storybook/styles';
 import { ChangeDetectionStrategy, Component, signal } from '@angular/core';
 import { alertDialogImports } from '@radix-ng/primitives/alert-dialog';
-import { cn, demoButton, demoDialog } from '../../storybook/styles';
 
 @Component({
     changeDetection: ChangeDetectionStrategy.Eager,
@@ -840,23 +840,23 @@ import { cn, demoButton, demoDialog } from '../../storybook/styles';
         <div class="flex flex-col items-center gap-3">
             <p class="text-muted-foreground text-xs">open: {{ open() }} · triggerId: {{ triggerId() ?? '—' }}</p>
 
-            <div [(open)]="open" [(triggerId)]="triggerId" rdxAlertDialogRoot>
+            <div rdxAlertDialogRoot [(open)]="open" [(triggerId)]="triggerId">
                 <div class="flex gap-2">
-                    <button id="logout" [class]="cn(b.base, b.outline, b.size.md)" rdxAlertDialogTrigger>
+                    <button id="logout" rdxAlertDialogTrigger [class]="cn(b.base, b.outline, b.size.md)">
                         Log out
                     </button>
-                    <button id="delete" [class]="cn(b.base, b.outline, b.size.md)" rdxAlertDialogTrigger>
+                    <button id="delete" rdxAlertDialogTrigger [class]="cn(b.base, b.outline, b.size.md)">
                         Delete account
                     </button>
                 </div>
 
                 <ng-template rdxAlertDialogPortal>
-                    <div [class]="cn(d.backdrop, d.backdropAnimated)" rdxAlertDialogBackdrop></div>
-                    <div [class]="cn(d.popup, d.popupAnimated)" rdxAlertDialogPopup>
-                        <h2 [class]="d.title" rdxAlertDialogTitle>
+                    <div rdxAlertDialogBackdrop [class]="cn(d.backdrop, d.backdropAnimated)"></div>
+                    <div rdxAlertDialogPopup [class]="cn(d.popup, d.popupAnimated)">
+                        <h2 rdxAlertDialogTitle [class]="d.title">
                             {{ triggerId() === 'delete' ? 'Delete account?' : 'Log out?' }}
                         </h2>
-                        <p [class]="d.description" rdxAlertDialogDescription>
+                        <p rdxAlertDialogDescription [class]="d.description">
                             Both
                             <code>open</code>
                             and
@@ -864,10 +864,10 @@ import { cn, demoButton, demoDialog } from '../../storybook/styles';
                             are bound, so the active action is driven from component state.
                         </p>
                         <div [class]="d.footer">
-                            <button [class]="cn(b.base, b.outline, b.size.sm)" rdxAlertDialogClose>Cancel</button>
+                            <button rdxAlertDialogClose [class]="cn(b.base, b.outline, b.size.sm)">Cancel</button>
                             <button
-                                [class]="cn(b.base, triggerId() === 'delete' ? b.destructive : b.primary, b.size.sm)"
                                 rdxAlertDialogClose
+                                [class]="cn(b.base, triggerId() === 'delete' ? b.destructive : b.primary, b.size.sm)"
                             >
                                 {{ triggerId() === 'delete' ? 'Delete' : 'Log out' }}
                             </button>
@@ -900,9 +900,9 @@ Connect a trigger rendered outside the root with `createRdxAlertDialogHandle()`;
 imperative `open(id)` / `close()`.
 
 ```typescript
+import { cn, demoButton, demoDialog } from '../../storybook/styles';
 import { ChangeDetectionStrategy, Component } from '@angular/core';
 import { alertDialogImports, createRdxAlertDialogHandle } from '@radix-ng/primitives/alert-dialog';
-import { cn, demoButton, demoDialog } from '../../storybook/styles';
 
 @Component({
     changeDetection: ChangeDetectionStrategy.Eager,
@@ -911,7 +911,7 @@ import { cn, demoButton, demoDialog } from '../../storybook/styles';
     template: `
         <div class="flex flex-col items-center gap-3">
             <!-- Triggers live outside the root and are linked through a shared handle. -->
-            <button id="delete" [class]="cn(b.base, b.destructive, b.size.md)" [handle]="handle" rdxAlertDialogTrigger>
+            <button id="delete" rdxAlertDialogTrigger [class]="cn(b.base, b.destructive, b.size.md)" [handle]="handle">
                 Delete file
             </button>
 
@@ -919,19 +919,19 @@ import { cn, demoButton, demoDialog } from '../../storybook/styles';
                 Open imperatively
             </button>
 
-            <div [handle]="handle" rdxAlertDialogRoot>
+            <div rdxAlertDialogRoot [handle]="handle">
                 <ng-template rdxAlertDialogPortal>
-                    <div [class]="cn(d.backdrop, d.backdropAnimated)" rdxAlertDialogBackdrop></div>
-                    <div [class]="cn(d.popup, d.popupAnimated)" rdxAlertDialogPopup>
-                        <h2 [class]="d.title" rdxAlertDialogTitle>Delete this file?</h2>
-                        <p [class]="d.description" rdxAlertDialogDescription>
+                    <div rdxAlertDialogBackdrop [class]="cn(d.backdrop, d.backdropAnimated)"></div>
+                    <div rdxAlertDialogPopup [class]="cn(d.popup, d.popupAnimated)">
+                        <h2 rdxAlertDialogTitle [class]="d.title">Delete this file?</h2>
+                        <p rdxAlertDialogDescription [class]="d.description">
                             The trigger and this alert dialog are connected with
                             <code>createRdxAlertDialogHandle()</code>
                             .
                         </p>
                         <div [class]="d.footer">
-                            <button [class]="cn(b.base, b.outline, b.size.sm)" rdxAlertDialogClose>Cancel</button>
-                            <button [class]="cn(b.base, b.destructive, b.size.sm)" rdxAlertDialogClose>Delete</button>
+                            <button rdxAlertDialogClose [class]="cn(b.base, b.outline, b.size.sm)">Cancel</button>
+                            <button rdxAlertDialogClose [class]="cn(b.base, b.destructive, b.size.sm)">Delete</button>
                         </div>
                     </div>
                 </ng-template>
@@ -953,11 +953,11 @@ A regular Dialog editor asks an Alert Dialog to confirm before discarding unsave
 reason to reach for an alert dialog.
 
 ```typescript
+import { cn, demoButton, demoDialog, demoInput } from '../../storybook/styles';
 import { ChangeDetectionStrategy, Component, signal } from '@angular/core';
 import { FormsModule } from '@angular/forms';
 import { alertDialogImports } from '@radix-ng/primitives/alert-dialog';
 import { dialogImports, RdxDialogOpenChange } from '@radix-ng/primitives/dialog';
-import { cn, demoButton, demoDialog, demoInput } from '../../storybook/styles';
 
 @Component({
     changeDetection: ChangeDetectionStrategy.Eager,
@@ -965,20 +965,20 @@ import { cn, demoButton, demoDialog, demoInput } from '../../storybook/styles';
     imports: [...dialogImports, ...alertDialogImports, FormsModule],
     template: `
         <!-- The editor is a regular Dialog, controlled so a close request can be intercepted. -->
-        <div [(open)]="editorOpen" (onOpenChange)="onEditorOpenChange($event)" rdxDialogRoot>
-            <button [class]="cn(b.base, b.primary, b.size.md)" rdxDialogTrigger>Edit note</button>
+        <div rdxDialogRoot [(open)]="editorOpen" (onOpenChange)="onEditorOpenChange($event)">
+            <button rdxDialogTrigger [class]="cn(b.base, b.primary, b.size.md)">Edit note</button>
 
             <ng-template rdxDialogPortal>
-                <div [class]="cn(d.backdrop, d.backdropAnimated)" rdxDialogBackdrop></div>
-                <div [class]="cn(d.popup, d.popupAnimated)" rdxDialogPopup>
-                    <h2 [class]="d.title" rdxDialogTitle>Edit note</h2>
-                    <p [class]="d.description" rdxDialogDescription>
+                <div rdxDialogBackdrop [class]="cn(d.backdrop, d.backdropAnimated)"></div>
+                <div rdxDialogPopup [class]="cn(d.popup, d.popupAnimated)">
+                    <h2 rdxDialogTitle [class]="d.title">Edit note</h2>
+                    <p rdxDialogDescription [class]="d.description">
                         Closing with unsaved changes asks an alert dialog to confirm.
                     </p>
 
                     <label [class]="d.field">
                         Note
-                        <input [(ngModel)]="text" [class]="input" placeholder="Type to create changes" />
+                        <input placeholder="Type to create changes" [class]="input" [(ngModel)]="text" />
                     </label>
 
                     <div [class]="d.footer">
@@ -990,12 +990,12 @@ import { cn, demoButton, demoDialog, demoInput } from '../../storybook/styles';
         </div>
 
         <!-- The confirmation is an Alert Dialog (assertive, not outside-dismissable). -->
-        <div [(open)]="confirmOpen" rdxAlertDialogRoot>
+        <div rdxAlertDialogRoot [(open)]="confirmOpen">
             <ng-template rdxAlertDialogPortal>
-                <div [class]="cn(d.backdrop, d.backdropAnimated)" rdxAlertDialogBackdrop></div>
-                <div [class]="cn(d.popup, d.popupAnimated)" rdxAlertDialogPopup>
-                    <h2 [class]="d.title" rdxAlertDialogTitle>Discard changes?</h2>
-                    <p [class]="d.description" rdxAlertDialogDescription>Your unsaved note will be lost.</p>
+                <div rdxAlertDialogBackdrop [class]="cn(d.backdrop, d.backdropAnimated)"></div>
+                <div rdxAlertDialogPopup [class]="cn(d.popup, d.popupAnimated)">
+                    <h2 rdxAlertDialogTitle [class]="d.title">Discard changes?</h2>
+                    <p rdxAlertDialogDescription [class]="d.description">Your unsaved note will be lost.</p>
                     <div [class]="d.footer">
                         <button [class]="cn(b.base, b.outline, b.size.sm)" (click)="confirmOpen.set(false)">
                             Keep editing
@@ -1055,10 +1055,10 @@ export class RdxAlertDialogCloseConfirmationComponent {
 Control the alert dialog's `open` state from a menu item to launch a destructive confirmation from a `Menu`.
 
 ```typescript
+import { cn, demoButton, demoDialog, demoMenu } from '../../storybook/styles';
 import { ChangeDetectionStrategy, Component, signal } from '@angular/core';
 import { alertDialogImports } from '@radix-ng/primitives/alert-dialog';
 import { RdxMenuModule } from '@radix-ng/primitives/menu';
-import { cn, demoButton, demoDialog, demoMenu } from '../../storybook/styles';
 
 @Component({
     changeDetection: ChangeDetectionStrategy.Eager,
@@ -1066,32 +1066,32 @@ import { cn, demoButton, demoDialog, demoMenu } from '../../storybook/styles';
     imports: [...alertDialogImports, RdxMenuModule],
     template: `
         <ng-container #menu="rdxMenuRoot" rdxMenuRoot>
-            <button [class]="cn(b.base, b.outline, b.size.md)" rdxMenuTrigger>Project</button>
+            <button rdxMenuTrigger [class]="cn(b.base, b.outline, b.size.md)">Project</button>
 
             @if (menu.open()) {
-                <div [class]="m.positioner" sideOffset="4" rdxMenuPositioner>
-                    <div [class]="m.popup" rdxMenuPopup>
-                        <button [class]="m.item" rdxMenuItem>Rename</button>
-                        <button [class]="m.item" rdxMenuItem>Duplicate</button>
-                        <div [class]="m.separator" rdxMenuSeparator></div>
-                        <button [class]="m.item" (click)="deleteOpen.set(true)" rdxMenuItem>Delete…</button>
+                <div sideOffset="4" rdxMenuPositioner [class]="m.positioner">
+                    <div rdxMenuPopup [class]="m.popup">
+                        <button rdxMenuItem [class]="m.item">Rename</button>
+                        <button rdxMenuItem [class]="m.item">Duplicate</button>
+                        <div rdxMenuSeparator [class]="m.separator"></div>
+                        <button rdxMenuItem [class]="m.item" (click)="deleteOpen.set(true)">Delete…</button>
                     </div>
                 </div>
             }
         </ng-container>
 
         <!-- Controlled alert dialog opened from the menu item. -->
-        <div [(open)]="deleteOpen" rdxAlertDialogRoot>
+        <div rdxAlertDialogRoot [(open)]="deleteOpen">
             <ng-template rdxAlertDialogPortal>
-                <div [class]="cn(d.backdrop, d.backdropAnimated)" rdxAlertDialogBackdrop></div>
-                <div [class]="cn(d.popup, d.popupAnimated)" rdxAlertDialogPopup>
-                    <h2 [class]="d.title" rdxAlertDialogTitle>Delete project?</h2>
-                    <p [class]="d.description" rdxAlertDialogDescription>
+                <div rdxAlertDialogBackdrop [class]="cn(d.backdrop, d.backdropAnimated)"></div>
+                <div rdxAlertDialogPopup [class]="cn(d.popup, d.popupAnimated)">
+                    <h2 rdxAlertDialogTitle [class]="d.title">Delete project?</h2>
+                    <p rdxAlertDialogDescription [class]="d.description">
                         This permanently deletes the project. Opened by controlling the alert dialog from a menu item.
                     </p>
                     <div [class]="d.footer">
-                        <button [class]="cn(b.base, b.outline, b.size.sm)" rdxAlertDialogClose>Cancel</button>
-                        <button [class]="cn(b.base, b.destructive, b.size.sm)" rdxAlertDialogClose>Delete</button>
+                        <button rdxAlertDialogClose [class]="cn(b.base, b.outline, b.size.sm)">Cancel</button>
+                        <button rdxAlertDialogClose [class]="cn(b.base, b.destructive, b.size.sm)">Delete</button>
                     </div>
                 </div>
             </ng-template>
@@ -1163,9 +1163,9 @@ Use Autocomplete for free-form entry with suggestions (search boxes, command inp
 the value is a chosen item (or items) rather than the typed text.
 
 ```typescript
-import { ChangeDetectionStrategy, Component, signal } from '@angular/core';
 import { cn, demoCombobox } from '../../storybook/styles';
 import { _importsAutocomplete } from '../index';
+import { ChangeDetectionStrategy, Component, signal } from '@angular/core';
 
 const TAGS = [
     'feature',
@@ -1216,24 +1216,24 @@ const TAGS = [
     selector: 'autocomplete-default',
     imports: [_importsAutocomplete],
     template: `
-        <div [(value)]="value" rdxAutocompleteRoot>
-            <div [class]="c.control" rdxAutocompleteInputGroup>
+        <div rdxAutocompleteRoot [(value)]="value">
+            <div rdxAutocompleteInputGroup [class]="c.control">
                 <input
-                    [class]="cn(c.input, 'pr-3')"
                     rdxAutocompleteInput
                     placeholder="e.g. fix"
                     aria-label="Search tags"
+                    [class]="cn(c.input, 'pr-3')"
                 />
             </div>
 
-            <div *rdxAutocompletePortal [class]="c.positioner" rdxAutocompletePositioner>
-                <div [class]="c.popup" rdxAutocompletePopup>
-                    <div [class]="c.list" rdxAutocompleteList aria-label="Tags">
+            <div *rdxAutocompletePortal rdxAutocompletePositioner [class]="c.positioner">
+                <div rdxAutocompletePopup [class]="c.popup">
+                    <div rdxAutocompleteList aria-label="Tags" [class]="c.list">
                         @for (tag of tags; track tag) {
-                            <div [class]="c.item" rdxAutocompleteItem>{{ tag }}</div>
+                            <div rdxAutocompleteItem [class]="c.item">{{ tag }}</div>
                         }
                     </div>
-                    <div [class]="c.empty" rdxAutocompleteEmpty>No tags found.</div>
+                    <div rdxAutocompleteEmpty [class]="c.empty">No tags found.</div>
                 </div>
             </div>
         </div>
@@ -1330,9 +1330,9 @@ in place (non-matching items are hidden, not destroyed).
 Type to filter a list of suggestions; pick one to fill the input.
 
 ```typescript
-import { ChangeDetectionStrategy, Component, signal } from '@angular/core';
 import { cn, demoCombobox } from '../../storybook/styles';
 import { _importsAutocomplete } from '../index';
+import { ChangeDetectionStrategy, Component, signal } from '@angular/core';
 
 const TAGS = [
     'feature',
@@ -1383,24 +1383,24 @@ const TAGS = [
     selector: 'autocomplete-default',
     imports: [_importsAutocomplete],
     template: `
-        <div [(value)]="value" rdxAutocompleteRoot>
-            <div [class]="c.control" rdxAutocompleteInputGroup>
+        <div rdxAutocompleteRoot [(value)]="value">
+            <div rdxAutocompleteInputGroup [class]="c.control">
                 <input
-                    [class]="cn(c.input, 'pr-3')"
                     rdxAutocompleteInput
                     placeholder="e.g. fix"
                     aria-label="Search tags"
+                    [class]="cn(c.input, 'pr-3')"
                 />
             </div>
 
-            <div *rdxAutocompletePortal [class]="c.positioner" rdxAutocompletePositioner>
-                <div [class]="c.popup" rdxAutocompletePopup>
-                    <div [class]="c.list" rdxAutocompleteList aria-label="Tags">
+            <div *rdxAutocompletePortal rdxAutocompletePositioner [class]="c.positioner">
+                <div rdxAutocompletePopup [class]="c.popup">
+                    <div rdxAutocompleteList aria-label="Tags" [class]="c.list">
                         @for (tag of tags; track tag) {
-                            <div [class]="c.item" rdxAutocompleteItem>{{ tag }}</div>
+                            <div rdxAutocompleteItem [class]="c.item">{{ tag }}</div>
                         }
                     </div>
-                    <div [class]="c.empty" rdxAutocompleteEmpty>No tags found.</div>
+                    <div rdxAutocompleteEmpty [class]="c.empty">No tags found.</div>
                 </div>
             </div>
         </div>
@@ -1421,9 +1421,9 @@ suffix selected so the next keystroke replaces it. Inline modes highlight the fi
 so no `autoHighlight` is required.
 
 ```typescript
-import { ChangeDetectionStrategy, Component, signal } from '@angular/core';
 import { demoCombobox } from '../../storybook/styles';
 import { _importsAutocomplete } from '../index';
+import { ChangeDetectionStrategy, Component, signal } from '@angular/core';
 
 const TAGS = [
     'feature',
@@ -1474,19 +1474,19 @@ const TAGS = [
     selector: 'autocomplete-inline',
     imports: [_importsAutocomplete],
     template: `
-        <div [(value)]="value" mode="both" rdxAutocompleteRoot>
-            <div [class]="c.control" rdxAutocompleteInputGroup>
-                <input [class]="c.input" rdxAutocompleteInput placeholder="e.g. fix" aria-label="Search tags" />
+        <div mode="both" rdxAutocompleteRoot [(value)]="value">
+            <div rdxAutocompleteInputGroup [class]="c.control">
+                <input rdxAutocompleteInput placeholder="e.g. fix" aria-label="Search tags" [class]="c.input" />
             </div>
 
-            <div *rdxAutocompletePortal [class]="c.positioner" rdxAutocompletePositioner>
-                <div [class]="c.popup" rdxAutocompletePopup>
-                    <div [class]="c.list" rdxAutocompleteList aria-label="Tags">
+            <div *rdxAutocompletePortal rdxAutocompletePositioner [class]="c.positioner">
+                <div rdxAutocompletePopup [class]="c.popup">
+                    <div rdxAutocompleteList aria-label="Tags" [class]="c.list">
                         @for (tag of tags; track tag) {
-                            <div [class]="c.item" rdxAutocompleteItem>{{ tag }}</div>
+                            <div rdxAutocompleteItem [class]="c.item">{{ tag }}</div>
                         }
                     </div>
-                    <div [class]="c.empty" rdxAutocompleteEmpty>No tags found.</div>
+                    <div rdxAutocompleteEmpty [class]="c.empty">No tags found.</div>
                 </div>
             </div>
         </div>
@@ -1504,9 +1504,9 @@ export class AutocompleteInline {
 `autoHighlight` keeps the first match highlighted as you type, so Enter selects it immediately.
 
 ```typescript
-import { ChangeDetectionStrategy, Component, signal } from '@angular/core';
 import { demoCombobox } from '../../storybook/styles';
 import { _importsAutocomplete } from '../index';
+import { ChangeDetectionStrategy, Component, signal } from '@angular/core';
 
 const TAGS = [
     'feature',
@@ -1557,19 +1557,19 @@ const TAGS = [
     selector: 'autocomplete-auto-highlight',
     imports: [_importsAutocomplete],
     template: `
-        <div [(value)]="value" autoHighlight rdxAutocompleteRoot>
-            <div [class]="c.control" rdxAutocompleteInputGroup>
-                <input [class]="c.input" rdxAutocompleteInput placeholder="e.g. fix" aria-label="Search tags" />
+        <div autoHighlight rdxAutocompleteRoot [(value)]="value">
+            <div rdxAutocompleteInputGroup [class]="c.control">
+                <input rdxAutocompleteInput placeholder="e.g. fix" aria-label="Search tags" [class]="c.input" />
             </div>
 
-            <div *rdxAutocompletePortal [class]="c.positioner" rdxAutocompletePositioner>
-                <div [class]="c.popup" rdxAutocompletePopup>
-                    <div [class]="c.list" rdxAutocompleteList aria-label="Tags">
+            <div *rdxAutocompletePortal rdxAutocompletePositioner [class]="c.positioner">
+                <div rdxAutocompletePopup [class]="c.popup">
+                    <div rdxAutocompleteList aria-label="Tags" [class]="c.list">
                         @for (tag of tags; track tag) {
-                            <div [class]="c.item" rdxAutocompleteItem>{{ tag }}</div>
+                            <div rdxAutocompleteItem [class]="c.item">{{ tag }}</div>
                         }
                     </div>
-                    <div [class]="c.empty" rdxAutocompleteEmpty>No tags found.</div>
+                    <div rdxAutocompleteEmpty [class]="c.empty">No tags found.</div>
                 </div>
             </div>
         </div>
@@ -1588,9 +1588,9 @@ Group related suggestions with `rdxAutocompleteGroup` / `rdxAutocompleteGroupLab
 hides its heading automatically.
 
 ```typescript
-import { ChangeDetectionStrategy, Component, signal } from '@angular/core';
 import { demoCombobox } from '../../storybook/styles';
 import { _importsAutocomplete } from '../index';
+import { ChangeDetectionStrategy, Component, signal } from '@angular/core';
 
 interface Group {
     label: string;
@@ -1602,24 +1602,24 @@ interface Group {
     selector: 'autocomplete-grouped',
     imports: [_importsAutocomplete],
     template: `
-        <div [(value)]="value" rdxAutocompleteRoot>
-            <div [class]="c.control" rdxAutocompleteInputGroup>
-                <input [class]="c.input" rdxAutocompleteInput placeholder="e.g. fix" aria-label="Search tags" />
+        <div rdxAutocompleteRoot [(value)]="value">
+            <div rdxAutocompleteInputGroup [class]="c.control">
+                <input rdxAutocompleteInput placeholder="e.g. fix" aria-label="Search tags" [class]="c.input" />
             </div>
 
-            <div *rdxAutocompletePortal [class]="c.positioner" rdxAutocompletePositioner>
-                <div [class]="c.popup" rdxAutocompletePopup>
-                    <div [class]="c.list" rdxAutocompleteList aria-label="Tags">
+            <div *rdxAutocompletePortal rdxAutocompletePositioner [class]="c.positioner">
+                <div rdxAutocompletePopup [class]="c.popup">
+                    <div rdxAutocompleteList aria-label="Tags" [class]="c.list">
                         @for (group of groups; track group.label) {
                             <div rdxAutocompleteGroup>
-                                <div [class]="c.groupLabel" rdxAutocompleteGroupLabel>{{ group.label }}</div>
+                                <div rdxAutocompleteGroupLabel [class]="c.groupLabel">{{ group.label }}</div>
                                 @for (item of group.items; track item) {
-                                    <div [class]="c.item" rdxAutocompleteItem>{{ item }}</div>
+                                    <div rdxAutocompleteItem [class]="c.item">{{ item }}</div>
                                 }
                             </div>
                         }
                     </div>
-                    <div [class]="c.empty" rdxAutocompleteEmpty>No tags found.</div>
+                    <div rdxAutocompleteEmpty [class]="c.empty">No tags found.</div>
                 </div>
             </div>
         </div>
@@ -1679,28 +1679,28 @@ export class AutocompleteGrouped {
 `limit` caps how many matches are shown at once.
 
 ```typescript
-import { ChangeDetectionStrategy, Component, signal } from '@angular/core';
 import { demoCombobox } from '../../storybook/styles';
 import { _importsAutocomplete } from '../index';
+import { ChangeDetectionStrategy, Component, signal } from '@angular/core';
 
 @Component({
     changeDetection: ChangeDetectionStrategy.Eager,
     selector: 'autocomplete-limit',
     imports: [_importsAutocomplete],
     template: `
-        <div #ac="rdxAutocompleteRoot" [(value)]="value" [limit]="8" rdxAutocompleteRoot>
-            <div [class]="c.control" rdxAutocompleteInputGroup>
-                <input [class]="c.input" rdxAutocompleteInput placeholder="e.g. component" aria-label="Search tags" />
+        <div #ac="rdxAutocompleteRoot" rdxAutocompleteRoot [limit]="8" [(value)]="value">
+            <div rdxAutocompleteInputGroup [class]="c.control">
+                <input rdxAutocompleteInput placeholder="e.g. component" aria-label="Search tags" [class]="c.input" />
             </div>
 
-            <div *rdxAutocompletePortal [class]="c.positioner" rdxAutocompletePositioner>
-                <div [class]="c.popup" rdxAutocompletePopup>
-                    <div [class]="c.list" rdxAutocompleteList aria-label="Tags">
+            <div *rdxAutocompletePortal rdxAutocompletePositioner [class]="c.positioner">
+                <div rdxAutocompletePopup [class]="c.popup">
+                    <div rdxAutocompleteList aria-label="Tags" [class]="c.list">
                         @for (tag of tags; track tag) {
-                            <div [class]="c.item" rdxAutocompleteItem>{{ tag }}</div>
+                            <div rdxAutocompleteItem [class]="c.item">{{ tag }}</div>
                         }
                     </div>
-                    <div [class]="c.empty" rdxAutocompleteEmpty>No tags found.</div>
+                    <div rdxAutocompleteEmpty [class]="c.empty">No tags found.</div>
                     @if (hiddenCount(ac.value()); as hidden) {
                         <div class="text-muted-foreground border-border mt-1 border-t px-2 py-1 text-xs">
                             {{ hidden }} more {{ hidden === 1 ? 'result' : 'results' }} not shown
@@ -1784,10 +1784,10 @@ multiple fields. This example uses `match-sorter` over `title` / `description` /
 highlights the matched text.
 
 ```typescript
-import { ChangeDetectionStrategy, Component, signal } from '@angular/core';
-import { matchSorter, rankings } from 'match-sorter';
 import { cn, demoCombobox } from '../../storybook/styles';
 import { _importsAutocomplete, AutocompleteFilter } from '../index';
+import { ChangeDetectionStrategy, Component, signal } from '@angular/core';
+import { matchSorter, rankings } from 'match-sorter';
 
 interface DocItem {
     title: string;
@@ -1819,17 +1819,17 @@ const fuzzyFilter: AutocompleteFilter = (value, query) => {
     selector: 'autocomplete-fuzzy',
     imports: [_importsAutocomplete],
     template: `
-        <div #ac="rdxAutocompleteRoot" [(value)]="value" [filter]="fuzzy" rdxAutocompleteRoot>
-            <div [class]="control" rdxAutocompleteInputGroup>
-                <input [class]="c.input" rdxAutocompleteInput placeholder="e.g. React" aria-label="Documentation" />
+        <div #ac="rdxAutocompleteRoot" rdxAutocompleteRoot [filter]="fuzzy" [(value)]="value">
+            <div rdxAutocompleteInputGroup [class]="control">
+                <input rdxAutocompleteInput placeholder="e.g. React" aria-label="Documentation" [class]="c.input" />
             </div>
 
-            <div *rdxAutocompletePortal [class]="positioner" rdxAutocompletePositioner>
-                <div [class]="popup" rdxAutocompletePopup>
-                    <div [class]="c.empty" rdxAutocompleteEmpty>No results found for "{{ ac.value() }}".</div>
-                    <div [class]="c.list" rdxAutocompleteList aria-label="Documentation">
+            <div *rdxAutocompletePortal rdxAutocompletePositioner [class]="positioner">
+                <div rdxAutocompletePopup [class]="popup">
+                    <div rdxAutocompleteEmpty [class]="c.empty">No results found for "{{ ac.value() }}".</div>
+                    <div rdxAutocompleteList aria-label="Documentation" [class]="c.list">
                         @for (item of items; track item.title) {
-                            <div [class]="itemClass" [value]="item" [textValue]="item.title" rdxAutocompleteItem>
+                            <div rdxAutocompleteItem [class]="itemClass" [value]="item" [textValue]="item.title">
                                 <span class="flex flex-col gap-0.5">
                                     <span
                                         class="text-foreground leading-5 font-semibold"
@@ -1978,9 +1978,9 @@ export class AutocompleteFuzzy {
 a failure) and `RdxAutocompleteStatus` announces loading, result counts, and errors.
 
 ```typescript
-import { ChangeDetectionStrategy, Component, computed, signal } from '@angular/core';
 import { demoCombobox } from '../../storybook/styles';
 import { _importsAutocomplete } from '../index';
+import { ChangeDetectionStrategy, Component, computed, signal } from '@angular/core';
 
 interface Movie {
     id: string;
@@ -2103,18 +2103,18 @@ const top100Movies: Movie[] = [
     selector: 'autocomplete-async',
     imports: [_importsAutocomplete],
     template: `
-        <div [(value)]="value" [filter]="null" (onValueChange)="search($event.value)" rdxAutocompleteRoot>
-            <div [class]="c.control" rdxAutocompleteInputGroup>
+        <div rdxAutocompleteRoot [filter]="null" [(value)]="value" (onValueChange)="search($event.value)">
+            <div rdxAutocompleteInputGroup [class]="c.control">
                 <input
-                    [class]="c.input"
                     rdxAutocompleteInput
                     placeholder="e.g. Pulp Fiction or 1994"
                     aria-label="Movie"
+                    [class]="c.input"
                 />
             </div>
 
-            <div *rdxAutocompletePortal [class]="c.positioner" rdxAutocompletePositioner>
-                <div [class]="c.popup" [hidden]="!status()" rdxAutocompletePopup>
+            <div *rdxAutocompletePortal rdxAutocompletePositioner [class]="c.positioner">
+                <div rdxAutocompletePopup [class]="c.popup" [hidden]="!status()">
                     <div class="text-muted-foreground flex items-center gap-2 px-2 py-1 text-xs" rdxAutocompleteStatus>
                         @if (loading()) {
                             <span
@@ -2126,9 +2126,9 @@ const top100Movies: Movie[] = [
                             {{ status() }}
                         }
                     </div>
-                    <div [class]="c.list" rdxAutocompleteList aria-label="Movies">
+                    <div rdxAutocompleteList aria-label="Movies" [class]="c.list">
                         @for (movie of results(); track movie.id) {
-                            <div [class]="c.item" [value]="movie.title" [textValue]="movie.title" rdxAutocompleteItem>
+                            <div rdxAutocompleteItem [class]="c.item" [value]="movie.title" [textValue]="movie.title">
                                 {{ movie.title }}
                                 <span class="text-muted-foreground ml-1 text-xs">{{ movie.year }}</span>
                             </div>
@@ -2206,10 +2206,10 @@ An always-open, inline autocomplete (no popup — the `List` is rendered directl
 (the autocomplete's `open` is shared with the dialog via `[(open)]`).
 
 ```typescript
-import { ChangeDetectionStrategy, Component, signal } from '@angular/core';
-import { dialogImports } from '@radix-ng/primitives/dialog';
 import { cn, demoButton, demoCard, demoDialog } from '../../storybook/styles';
 import { _importsAutocomplete } from '../index';
+import { ChangeDetectionStrategy, Component, signal } from '@angular/core';
+import { dialogImports } from '@radix-ng/primitives/dialog';
 
 interface Item {
     value: string;
@@ -2231,33 +2231,33 @@ interface Group {
     selector: 'autocomplete-command-palette',
     imports: [...dialogImports, _importsAutocomplete],
     template: `
-        <div [(open)]="open" rdxDialogRoot>
-            <button [class]="cn(b.base, b.primary, b.size.md)" rdxDialogTrigger>Open command palette</button>
+        <div rdxDialogRoot [(open)]="open">
+            <button rdxDialogTrigger [class]="cn(b.base, b.primary, b.size.md)">Open command palette</button>
 
             <ng-template rdxDialogPortal>
-                <div [class]="cn(d.backdrop, d.backdropAnimated)" rdxDialogBackdrop></div>
+                <div rdxDialogBackdrop [class]="cn(d.backdrop, d.backdropAnimated)"></div>
 
                 <div class="fixed inset-0 z-50 flex items-start justify-center overflow-y-auto p-4 pt-[12vh]">
-                    <div [class]="popup" rdxDialogPopup aria-label="Command palette">
-                        <div [(open)]="open" autoHighlight="always" rdxAutocompleteRoot>
+                    <div rdxDialogPopup aria-label="Command palette" [class]="popup">
+                        <div autoHighlight="always" rdxAutocompleteRoot [(open)]="open">
                             <input
                                 #cmdInput
-                                [class]="input"
                                 rdxAutocompleteInput
                                 placeholder="Search for apps and commands…"
                                 aria-label="Command"
+                                [class]="input"
                             />
 
-                            <div [class]="list" rdxAutocompleteList aria-label="Commands">
+                            <div rdxAutocompleteList aria-label="Commands" [class]="list">
                                 @for (group of groups; track group.value) {
                                     <div class="mb-1" rdxAutocompleteGroup>
-                                        <div [class]="groupLabel" rdxAutocompleteGroupLabel>{{ group.value }}</div>
+                                        <div rdxAutocompleteGroupLabel [class]="groupLabel">{{ group.value }}</div>
                                         @for (item of group.items; track item.value) {
                                             <div
+                                                rdxAutocompleteItem
                                                 [class]="itemClass"
                                                 [value]="item"
                                                 [textValue]="item.label"
-                                                rdxAutocompleteItem
                                             >
                                                 <span class="truncate">{{ item.label }}</span>
                                                 <span [class]="badge">
@@ -2267,7 +2267,7 @@ interface Group {
                                         }
                                     </div>
                                 }
-                                <div [class]="empty" rdxAutocompleteEmpty>No results found.</div>
+                                <div rdxAutocompleteEmpty [class]="empty">No results found.</div>
                             </div>
 
                             <div [class]="footer">
@@ -2363,9 +2363,9 @@ open; pressing an item inserts it into the message field, and `onValueChange` is
 `reason === 'item-press'` so the search box is not overwritten.
 
 ```typescript
-import { ChangeDetectionStrategy, Component, ElementRef, signal, viewChild } from '@angular/core';
 import { cn, demoCombobox, demoFocusRing } from '../../storybook/styles';
 import { _importsAutocomplete } from '../index';
+import { ChangeDetectionStrategy, Component, ElementRef, signal, viewChild } from '@angular/core';
 
 interface Emoji {
     emoji: string;
@@ -2400,42 +2400,42 @@ function chunk<T>(items: T[], size: number): T[][] {
     template: `
         <div class="relative flex w-64">
             <input
-                class="border-border bg-background text-foreground placeholder:text-muted-foreground focus-visible:ring-ring relative -mr-px h-9 flex-1 rounded-l-md border px-2 text-sm outline-none focus-visible:z-10 focus-visible:ring-2 focus-visible:ring-inset"
                 #message
+                class="border-border bg-background text-foreground placeholder:text-muted-foreground focus-visible:ring-ring relative -mr-px h-9 flex-1 rounded-l-md border px-2 text-sm outline-none focus-visible:z-10 focus-visible:ring-2 focus-visible:ring-inset"
                 placeholder="Message…"
                 aria-label="Message"
             />
 
             <div
-                [(open)]="open"
+                grid
+                rdxAutocompleteRoot
                 [value]="search()"
+                [(open)]="open"
                 (onValueChange)="onSearch($event)"
                 (onOpenChangeComplete)="onOpenComplete($event)"
-                grid
-                rdxAutocompleteRoot
             >
-                <button [class]="trigger" rdxAutocompleteTrigger rdxAutocompleteAnchor aria-label="Choose emoji">
+                <button rdxAutocompleteTrigger rdxAutocompleteAnchor aria-label="Choose emoji" [class]="trigger">
                     😀
                 </button>
 
-                <div *rdxAutocompletePortal [class]="c.positioner" rdxAutocompletePositioner align="end">
-                    <div [class]="popup" rdxAutocompletePopup>
+                <div *rdxAutocompletePortal rdxAutocompletePositioner align="end" [class]="c.positioner">
+                    <div rdxAutocompletePopup [class]="popup">
                         <input
-                            [class]="input"
                             rdxAutocompleteInput
                             placeholder="Search emojis…"
                             aria-label="Search emojis"
+                            [class]="input"
                         />
                         <div class="max-h-64 overflow-auto p-1">
                             @for (group of groups; track group.label) {
                                 <div rdxAutocompleteGroup>
-                                    <div [class]="c.groupLabel" rdxAutocompleteGroupLabel>
+                                    <div rdxAutocompleteGroupLabel [class]="c.groupLabel">
                                         {{ group.label }}
                                     </div>
                                     @for (row of group.rows; track $index) {
                                         <div class="grid grid-cols-5" rdxAutocompleteRow>
                                             @for (item of row; track item.emoji) {
-                                                <div [class]="cell" [textValue]="item.name" rdxAutocompleteItem>
+                                                <div rdxAutocompleteItem [class]="cell" [textValue]="item.name">
                                                     {{ item.emoji }}
                                                 </div>
                                             }
@@ -2444,7 +2444,7 @@ function chunk<T>(items: T[], size: number): T[][] {
                                 </div>
                             }
                         </div>
-                        <div [class]="c.empty" rdxAutocompleteEmpty>No emoji found.</div>
+                        <div rdxAutocompleteEmpty [class]="c.empty">No emoji found.</div>
                     </div>
                 </div>
             </div>
@@ -2663,10 +2663,10 @@ protected onOpenChange(change: { open: boolean; eventDetails: { cancel(): void }
 renders only the visible window.
 
 ```typescript
-import { ChangeDetectionStrategy, Component, ElementRef, signal, viewChild } from '@angular/core';
-import { injectVirtualizer } from '@tanstack/angular-virtual';
 import { cn, demoCombobox } from '../../storybook/styles';
 import { _importsAutocomplete, AutocompleteItemHighlightedDetails, RdxAutocompleteRoot } from '../index';
+import { ChangeDetectionStrategy, Component, ElementRef, signal, viewChild } from '@angular/core';
+import { injectVirtualizer } from '@tanstack/angular-virtual';
 
 /**
  * Externally virtualized list of 10,000 items. The autocomplete owns filtering and index navigation
@@ -2681,30 +2681,30 @@ import { _importsAutocomplete, AutocompleteItemHighlightedDetails, RdxAutocomple
     template: `
         <div
             #ac="rdxAutocompleteRoot"
-            [(value)]="value"
-            [items]="items"
-            (onItemHighlighted)="onHighlight($event)"
             virtualized
             rdxAutocompleteRoot
+            [items]="items"
+            [(value)]="value"
+            (onItemHighlighted)="onHighlight($event)"
         >
-            <div [class]="c.control" rdxAutocompleteInputGroup>
-                <input [class]="c.input" rdxAutocompleteInput placeholder="Search 10,000 items…" aria-label="Item" />
+            <div rdxAutocompleteInputGroup [class]="c.control">
+                <input rdxAutocompleteInput placeholder="Search 10,000 items…" aria-label="Item" [class]="c.input" />
             </div>
 
-            <div *rdxAutocompletePortal [class]="c.positioner" rdxAutocompletePositioner>
-                <div [class]="popup" rdxAutocompletePopup>
-                    <div [class]="c.empty" rdxAutocompleteEmpty>No items found.</div>
-                    <div [class]="c.list" rdxAutocompleteList aria-label="Items">
+            <div *rdxAutocompletePortal rdxAutocompletePositioner [class]="c.positioner">
+                <div rdxAutocompletePopup [class]="popup">
+                    <div rdxAutocompleteEmpty [class]="c.empty">No items found.</div>
+                    <div rdxAutocompleteList aria-label="Items" [class]="c.list">
                         <div #scroll [class]="scroller">
                             <div [class]="spacer" [style.height.px]="virtualizer.getTotalSize()">
                                 @for (row of virtualizer.getVirtualItems(); track row.key) {
                                     <div
+                                        rdxAutocompleteItem
                                         [class]="item"
                                         [value]="ac.filteredItems()[row.index]"
                                         [index]="row.index"
                                         [style.height.px]="row.size"
                                         [style.transform]="'translateY(' + row.start + 'px)'"
-                                        rdxAutocompleteItem
                                     >
                                         {{ ac.filteredItems()[row.index] }}
                                     </div>
@@ -2763,10 +2763,10 @@ export class AutocompleteVirtualizedExample {
 The form value is the input string. Bind `[formControl]` to the root.
 
 ```typescript
-import { ChangeDetectionStrategy, Component } from '@angular/core';
-import { FormControl, ReactiveFormsModule } from '@angular/forms';
 import { demoCombobox } from '../../storybook/styles';
 import { _importsAutocomplete } from '../index';
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { FormControl, ReactiveFormsModule } from '@angular/forms';
 
 /**
  * Reactive forms: the form value **is** the input string (typed or selected). Bind `[formControl]`
@@ -2778,19 +2778,19 @@ import { _importsAutocomplete } from '../index';
     imports: [_importsAutocomplete, ReactiveFormsModule],
     template: `
         <div class="flex flex-col gap-3">
-            <div [formControl]="fruit" rdxAutocompleteRoot>
-                <div [class]="c.control" rdxAutocompleteInputGroup>
-                    <input [class]="c.input" rdxAutocompleteInput placeholder="Search a fruit…" aria-label="Fruit" />
+            <div rdxAutocompleteRoot [formControl]="fruit">
+                <div rdxAutocompleteInputGroup [class]="c.control">
+                    <input rdxAutocompleteInput placeholder="Search a fruit…" aria-label="Fruit" [class]="c.input" />
                 </div>
 
-                <div *rdxAutocompletePortal [class]="c.positioner" rdxAutocompletePositioner>
-                    <div [class]="c.popup" rdxAutocompletePopup>
-                        <div [class]="c.list" rdxAutocompleteList aria-label="Fruits">
+                <div *rdxAutocompletePortal rdxAutocompletePositioner [class]="c.positioner">
+                    <div rdxAutocompletePopup [class]="c.popup">
+                        <div rdxAutocompleteList aria-label="Fruits" [class]="c.list">
                             @for (item of fruits; track item) {
-                                <div [class]="c.item" rdxAutocompleteItem>{{ item }}</div>
+                                <div rdxAutocompleteItem [class]="c.item">{{ item }}</div>
                             }
                         </div>
-                        <div [class]="c.empty" rdxAutocompleteEmpty>No fruit found.</div>
+                        <div rdxAutocompleteEmpty [class]="c.empty">No fruit found.</div>
                     </div>
                 </div>
             </div>
@@ -2811,10 +2811,10 @@ export class AutocompleteReactiveForms {
 `[(ngModel)]` binds the input string two-way.
 
 ```typescript
-import { ChangeDetectionStrategy, Component, signal } from '@angular/core';
-import { FormsModule } from '@angular/forms';
 import { demoCombobox } from '../../storybook/styles';
 import { _importsAutocomplete } from '../index';
+import { ChangeDetectionStrategy, Component, signal } from '@angular/core';
+import { FormsModule } from '@angular/forms';
 
 /**
  * Template-driven forms: `[(ngModel)]` binds the input string two-way.
@@ -2825,19 +2825,19 @@ import { _importsAutocomplete } from '../index';
     imports: [_importsAutocomplete, FormsModule],
     template: `
         <div class="flex flex-col gap-3">
-            <div [(ngModel)]="value" rdxAutocompleteRoot>
-                <div [class]="c.control" rdxAutocompleteInputGroup>
-                    <input [class]="c.input" rdxAutocompleteInput placeholder="Search a fruit…" aria-label="Fruit" />
+            <div rdxAutocompleteRoot [(ngModel)]="value">
+                <div rdxAutocompleteInputGroup [class]="c.control">
+                    <input rdxAutocompleteInput placeholder="Search a fruit…" aria-label="Fruit" [class]="c.input" />
                 </div>
 
-                <div *rdxAutocompletePortal [class]="c.positioner" rdxAutocompletePositioner>
-                    <div [class]="c.popup" rdxAutocompletePopup>
-                        <div [class]="c.list" rdxAutocompleteList aria-label="Fruits">
+                <div *rdxAutocompletePortal rdxAutocompletePositioner [class]="c.positioner">
+                    <div rdxAutocompletePopup [class]="c.popup">
+                        <div rdxAutocompleteList aria-label="Fruits" [class]="c.list">
                             @for (item of fruits; track item) {
-                                <div [class]="c.item" rdxAutocompleteItem>{{ item }}</div>
+                                <div rdxAutocompleteItem [class]="c.item">{{ item }}</div>
                             }
                         </div>
-                        <div [class]="c.empty" rdxAutocompleteEmpty>No fruit found.</div>
+                        <div rdxAutocompleteEmpty [class]="c.empty">No fruit found.</div>
                     </div>
                 </div>
             </div>
@@ -2859,10 +2859,10 @@ Bind the control's validity to `[invalid]` so the input reflects `data-invalid`
 error message and submit guard follow the standard reactive-forms pattern.
 
 ```typescript
-import { ChangeDetectionStrategy, Component, signal } from '@angular/core';
-import { FormControl, ReactiveFormsModule, Validators } from '@angular/forms';
 import { cn, demoButton, demoCombobox } from '../../storybook/styles';
 import { _importsAutocomplete } from '../index';
+import { ChangeDetectionStrategy, Component, signal } from '@angular/core';
+import { FormControl, ReactiveFormsModule, Validators } from '@angular/forms';
 
 /**
  * Reactive forms with validation. The form value **is** the input string; its validity is bound to the
@@ -2875,22 +2875,22 @@ import { _importsAutocomplete } from '../index';
     imports: [_importsAutocomplete, ReactiveFormsModule],
     template: `
         <form class="flex flex-col gap-3" (ngSubmit)="onSubmit()">
-            <div [formControl]="fruit" [invalid]="showError()" rdxAutocompleteRoot>
+            <div rdxAutocompleteRoot [formControl]="fruit" [invalid]="showError()">
                 <div
-                    [class]="cn(c.control, showError() && 'border-destructive focus-within:ring-destructive')"
                     rdxAutocompleteInputGroup
+                    [class]="cn(c.control, showError() && 'border-destructive focus-within:ring-destructive')"
                 >
-                    <input [class]="c.input" rdxAutocompleteInput placeholder="Search a fruit…" aria-label="Fruit" />
+                    <input rdxAutocompleteInput placeholder="Search a fruit…" aria-label="Fruit" [class]="c.input" />
                 </div>
 
-                <div *rdxAutocompletePortal [class]="c.positioner" rdxAutocompletePositioner>
-                    <div [class]="c.popup" rdxAutocompletePopup>
-                        <div [class]="c.list" rdxAutocompleteList aria-label="Fruits">
+                <div *rdxAutocompletePortal rdxAutocompletePositioner [class]="c.positioner">
+                    <div rdxAutocompletePopup [class]="c.popup">
+                        <div rdxAutocompleteList aria-label="Fruits" [class]="c.list">
                             @for (item of fruits; track item) {
-                                <div [class]="c.item" rdxAutocompleteItem>{{ item }}</div>
+                                <div rdxAutocompleteItem [class]="c.item">{{ item }}</div>
                             }
                         </div>
-                        <div [class]="c.empty" rdxAutocompleteEmpty>No fruit found.</div>
+                        <div rdxAutocompleteEmpty [class]="c.empty">No fruit found.</div>
                     </div>
                 </div>
             </div>
@@ -2899,7 +2899,7 @@ import { _importsAutocomplete } from '../index';
                 <p class="text-destructive text-sm">Please enter a fruit.</p>
             }
 
-            <button [class]="cn(b.base, b.primary, b.size.md, 'self-start')" type="submit">Submit</button>
+            <button type="submit" [class]="cn(b.base, b.primary, b.size.md, 'self-start')">Submit</button>
 
             @if (submitted()) {
                 <p class="text-muted-foreground text-sm">Submitted ✓</p>
@@ -2934,25 +2934,25 @@ export class AutocompleteValidation {
 ### Disabled
 
 ```typescript
-import { ChangeDetectionStrategy, Component, signal } from '@angular/core';
 import { demoCombobox } from '../../storybook/styles';
 import { _importsAutocomplete } from '../index';
+import { ChangeDetectionStrategy, Component, signal } from '@angular/core';
 
 @Component({
     changeDetection: ChangeDetectionStrategy.Eager,
     selector: 'autocomplete-disabled',
     imports: [_importsAutocomplete],
     template: `
-        <div [(value)]="value" disabled rdxAutocompleteRoot>
-            <div [class]="c.control" rdxAutocompleteInputGroup>
-                <input [class]="c.input" rdxAutocompleteInput placeholder="Disabled" aria-label="Fruit" />
+        <div disabled rdxAutocompleteRoot [(value)]="value">
+            <div rdxAutocompleteInputGroup [class]="c.control">
+                <input rdxAutocompleteInput placeholder="Disabled" aria-label="Fruit" [class]="c.input" />
             </div>
 
-            <div *rdxAutocompletePortal [class]="c.positioner" rdxAutocompletePositioner>
-                <div [class]="c.popup" rdxAutocompletePopup>
-                    <div [class]="c.list" rdxAutocompleteList aria-label="Fruits">
+            <div *rdxAutocompletePortal rdxAutocompletePositioner [class]="c.positioner">
+                <div rdxAutocompletePopup [class]="c.popup">
+                    <div rdxAutocompleteList aria-label="Fruits" [class]="c.list">
                         @for (fruit of fruits; track fruit) {
-                            <div [class]="c.item" rdxAutocompleteItem>{{ fruit }}</div>
+                            <div rdxAutocompleteItem [class]="c.item">{{ fruit }}</div>
                         }
                     </div>
                 </div>
@@ -3129,9 +3129,9 @@ styles — visual variants in the examples come from the centralized demo style
 **Guides/Styling** page).
 
 ```typescript
-import { ChangeDetectionStrategy, Component } from '@angular/core';
 import { cn, demoButton } from '../../storybook/styles';
 import { RdxButtonDirective } from '../src/button.directive';
+import { ChangeDetectionStrategy, Component } from '@angular/core';
 
 /**
  * Visual variants — the recommended `demoButton` styling from the centralized
@@ -3143,11 +3143,11 @@ import { RdxButtonDirective } from '../src/button.directive';
     imports: [RdxButtonDirective],
     template: `
         <div class="flex flex-wrap items-center gap-3">
-            <button [class]="cn(b.base, b.primary, b.size.md)" rdxButton>Primary</button>
-            <button [class]="cn(b.base, b.secondary, b.size.md)" rdxButton>Secondary</button>
-            <button [class]="cn(b.base, b.outline, b.size.md)" rdxButton>Outline</button>
-            <button [class]="cn(b.base, b.ghost, b.size.md)" rdxButton>Ghost</button>
-            <button [class]="cn(b.base, b.destructive, b.size.md)" rdxButton>Destructive</button>
+            <button rdxButton [class]="cn(b.base, b.primary, b.size.md)">Primary</button>
+            <button rdxButton [class]="cn(b.base, b.secondary, b.size.md)">Secondary</button>
+            <button rdxButton [class]="cn(b.base, b.outline, b.size.md)">Outline</button>
+            <button rdxButton [class]="cn(b.base, b.ghost, b.size.md)">Ghost</button>
+            <button rdxButton [class]="cn(b.base, b.destructive, b.size.md)">Destructive</button>
         </div>
     `
 })
@@ -3190,9 +3190,9 @@ Visual variants — `primary`, `secondary`, `outline`, `ghost`, and `destructive
 shared `demoButton` style layer, not the directive itself.
 
 ```typescript
-import { ChangeDetectionStrategy, Component } from '@angular/core';
 import { cn, demoButton } from '../../storybook/styles';
 import { RdxButtonDirective } from '../src/button.directive';
+import { ChangeDetectionStrategy, Component } from '@angular/core';
 
 /**
  * Visual variants — the recommended `demoButton` styling from the centralized
@@ -3204,11 +3204,11 @@ import { RdxButtonDirective } from '../src/button.directive';
     imports: [RdxButtonDirective],
     template: `
         <div class="flex flex-wrap items-center gap-3">
-            <button [class]="cn(b.base, b.primary, b.size.md)" rdxButton>Primary</button>
-            <button [class]="cn(b.base, b.secondary, b.size.md)" rdxButton>Secondary</button>
-            <button [class]="cn(b.base, b.outline, b.size.md)" rdxButton>Outline</button>
-            <button [class]="cn(b.base, b.ghost, b.size.md)" rdxButton>Ghost</button>
-            <button [class]="cn(b.base, b.destructive, b.size.md)" rdxButton>Destructive</button>
+            <button rdxButton [class]="cn(b.base, b.primary, b.size.md)">Primary</button>
+            <button rdxButton [class]="cn(b.base, b.secondary, b.size.md)">Secondary</button>
+            <button rdxButton [class]="cn(b.base, b.outline, b.size.md)">Outline</button>
+            <button rdxButton [class]="cn(b.base, b.ghost, b.size.md)">Ghost</button>
+            <button rdxButton [class]="cn(b.base, b.destructive, b.size.md)">Destructive</button>
         </div>
     `
 })
@@ -3223,10 +3223,10 @@ export class RdxButtonVariantsComponent {
 `sm`, `md`, `lg`, and a square `icon` size.
 
 ```typescript
-import { ChangeDetectionStrategy, Component } from '@angular/core';
-import { LucideDynamicIcon, LucidePlus } from '@lucide/angular';
 import { cn, demoButton } from '../../storybook/styles';
 import { RdxButtonDirective } from '../src/button.directive';
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { LucideDynamicIcon, LucidePlus } from '@lucide/angular';
 
 /**
  * Sizes, including a square icon button.
@@ -3237,10 +3237,10 @@ import { RdxButtonDirective } from '../src/button.directive';
     imports: [RdxButtonDirective, LucideDynamicIcon, LucidePlus],
     template: `
         <div class="flex flex-wrap items-center gap-3">
-            <button [class]="cn(b.base, b.primary, b.size.sm)" rdxButton>Small</button>
-            <button [class]="cn(b.base, b.primary, b.size.md)" rdxButton>Medium</button>
-            <button [class]="cn(b.base, b.primary, b.size.lg)" rdxButton>Large</button>
-            <button [class]="cn(b.base, b.primary, b.size.icon)" rdxButton aria-label="Add">
+            <button rdxButton [class]="cn(b.base, b.primary, b.size.sm)">Small</button>
+            <button rdxButton [class]="cn(b.base, b.primary, b.size.md)">Medium</button>
+            <button rdxButton [class]="cn(b.base, b.primary, b.size.lg)">Large</button>
+            <button rdxButton aria-label="Add" [class]="cn(b.base, b.primary, b.size.icon)">
                 <svg class="flex" lucidePlus size="16" />
             </button>
         </div>
@@ -3258,9 +3258,9 @@ The first button uses the native `disabled` attribute (removed from the tab orde
 `focusableWhenDisabled`, so it stays focusable via `aria-disabled` while its activation is suppressed.
 
 ```typescript
-import { ChangeDetectionStrategy, Component } from '@angular/core';
 import { cn, demoButton } from '../../storybook/styles';
 import { RdxButtonDirective } from '../src/button.directive';
+import { ChangeDetectionStrategy, Component } from '@angular/core';
 
 /**
  * Disabled handling. The first button uses the native `disabled` attribute
@@ -3273,8 +3273,8 @@ import { RdxButtonDirective } from '../src/button.directive';
     imports: [RdxButtonDirective],
     template: `
         <div class="flex flex-wrap items-center gap-3">
-            <button [class]="cn(b.base, b.primary, b.size.md)" rdxButton disabled>Disabled</button>
-            <button [class]="cn(b.base, b.outline, b.size.md)" rdxButton disabled focusableWhenDisabled>
+            <button rdxButton disabled [class]="cn(b.base, b.primary, b.size.md)">Disabled</button>
+            <button rdxButton disabled focusableWhenDisabled [class]="cn(b.base, b.outline, b.size.md)">
                 Disabled (focusable)
             </button>
         </div>
@@ -3292,9 +3292,9 @@ The directive applies button semantics to any element. Here an `<a>` renders as
 keeping native link behavior.
 
 ```typescript
-import { ChangeDetectionStrategy, Component } from '@angular/core';
 import { cn, demoButton } from '../../storybook/styles';
 import { RdxButtonDirective } from '../src/button.directive';
+import { ChangeDetectionStrategy, Component } from '@angular/core';
 
 /**
  * The directive works on any host. Here it renders an `<a>` as a button while
@@ -3305,7 +3305,7 @@ import { RdxButtonDirective } from '../src/button.directive';
     selector: 'rdx-button-as-link',
     imports: [RdxButtonDirective],
     template: `
-        <a [class]="cn(b.base, b.secondary, b.size.md)" rdxButton href="https://base-ui.com" target="_blank">
+        <a rdxButton href="https://base-ui.com" target="_blank" [class]="cn(b.base, b.secondary, b.size.md)">
             Open Base UI
         </a>
     `
@@ -3323,10 +3323,10 @@ with `focusableWhenDisabled` so focus stays on the button. Add `aria-busy` and r
 communicate the state.
 
 ```typescript
-import { ChangeDetectionStrategy, Component, signal } from '@angular/core';
-import { LucideDynamicIcon, LucidePlus } from '@lucide/angular';
 import { cn, demoButton } from '../../storybook/styles';
 import { RdxButtonDirective } from '../src/button.directive';
+import { ChangeDetectionStrategy, Component, signal } from '@angular/core';
+import { LucideDynamicIcon, LucidePlus } from '@lucide/angular';
 
 /**
  * Loading state. Following Base UI's guidance, the button becomes `disabled`
@@ -3339,18 +3339,18 @@ import { RdxButtonDirective } from '../src/button.directive';
     imports: [RdxButtonDirective, LucideDynamicIcon, LucidePlus],
     template: `
         <button
+            rdxButton
+            focusableWhenDisabled
             [disabled]="loading()"
             [attr.aria-busy]="loading() ? 'true' : null"
             [class]="cn(b.base, b.primary, b.size.md)"
             (click)="run()"
-            rdxButton
-            focusableWhenDisabled
         >
             <svg
                 class="flex"
+                size="16"
                 [lucideIcon]="loading() ? 'loader-circle' : 'save'"
                 [class.animate-spin]="loading()"
-                size="16"
             />
             {{ loading() ? 'Saving…' : 'Save' }}
         </button>
@@ -3398,21 +3398,21 @@ export class RdxButtonLoadingComponent {
 #### Displays dates and days of the week, facilitating date-related interactions.
 
 ```typescript
-import { ChangeDetectionStrategy, Component } from '@angular/core';
-import { CalendarDate, DateValue } from '@internationalized/date';
-import { LucideChevronLeft, LucideChevronRight } from '@lucide/angular';
 import { cn, demoCalendar } from '../../storybook/styles';
-import { RdxCalendarCellTriggerDirective } from '../src/calendar-cell-trigger.directive';
 import { RdxCalendarCellDirective } from '../src/calendar-cell.directive';
+import { RdxCalendarCellTriggerDirective } from '../src/calendar-cell-trigger.directive';
+import { RdxCalendarGridDirective } from '../src/calendar-grid.directive';
 import { RdxCalendarGridBodyDirective } from '../src/calendar-grid-body.directive';
 import { RdxCalendarGridHeadDirective } from '../src/calendar-grid-head.directive';
-import { RdxCalendarGridDirective } from '../src/calendar-grid.directive';
 import { RdxCalendarHeadCellDirective } from '../src/calendar-head-cell.directive';
 import { RdxCalendarHeaderDirective } from '../src/calendar-header.directive';
 import { RdxCalendarHeadingDirective } from '../src/calendar-heading.directive';
 import { RdxCalendarNextDirective } from '../src/calendar-next.directive';
 import { RdxCalendarPrevDirective } from '../src/calendar-prev.directive';
 import { RdxCalendarRootDirective } from '../src/calendar-root.directive';
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { CalendarDate, DateValue } from '@internationalized/date';
+import { LucideChevronLeft, LucideChevronRight } from '@lucide/angular';
 
 @Component({
     changeDetection: ChangeDetectionStrategy.Eager,
@@ -3433,37 +3433,37 @@ import { RdxCalendarRootDirective } from '../src/calendar-root.directive';
         LucideChevronRight
     ],
     template: `
-        <div #root="rdxCalendarRoot" [class]="c.root" [value]="date" rdxCalendarRoot fixedWeeks>
-            <div [class]="c.header" rdxCalendarHeader>
-                <button [class]="c.nav" type="button" rdxCalendarPrev>
+        <div #root="rdxCalendarRoot" rdxCalendarRoot fixedWeeks [class]="c.root" [value]="date">
+            <div rdxCalendarHeader [class]="c.header">
+                <button type="button" rdxCalendarPrev [class]="c.nav">
                     <svg lucideChevronLeft size="16" />
                 </button>
-                <div #head="rdxCalendarHeading" [class]="c.heading" rdxCalendarHeading>{{ head.headingValue() }}</div>
-                <button [class]="c.nav" type="button" rdxCalendarNext>
+                <div #head="rdxCalendarHeading" rdxCalendarHeading [class]="c.heading">{{ head.headingValue() }}</div>
+                <button type="button" rdxCalendarNext [class]="c.nav">
                     <svg lucideChevronRight size="16" />
                 </button>
             </div>
 
-            <table [class]="c.grid" rdxCalendarGrid>
+            <table rdxCalendarGrid [class]="c.grid">
                 @for (month of root.months(); track $index) {
                     <thead rdxCalendarGridHead>
                         <tr [class]="c.headRow">
                             @for (day of root.weekDays(); track $index) {
-                                <th [class]="c.headCell" rdxCalendarHeadCell>{{ day }}</th>
+                                <th rdxCalendarHeadCell [class]="c.headCell">{{ day }}</th>
                             }
                         </tr>
                     </thead>
-                    <tbody [class]="c.body" rdxCalendarGridBody>
+                    <tbody rdxCalendarGridBody [class]="c.body">
                         @for (weekDates of month.weeks; track $index) {
                             <tr [class]="c.weekRow">
                                 @for (weekDate of weekDates; track $index) {
-                                    <td [class]="c.cell" [date]="weekDate" rdxCalendarCell>
+                                    <td rdxCalendarCell [class]="c.cell" [date]="weekDate">
                                         <div
                                             #cell="rdxCalendarCellTrigger"
+                                            rdxCalendarCellTrigger
                                             [class]="c.day"
                                             [day]="weekDate"
                                             [month]="month.value"
-                                            rdxCalendarCellTrigger
                                         >
                                             {{ cell.dayValue() }}
                                         </div>
@@ -3633,21 +3633,21 @@ Import all parts and piece them together.
 This example showcases some of the available locales and how the calendar systems are displayed.
 
 ```typescript
-import { ChangeDetectionStrategy, Component, computed, signal } from '@angular/core';
-import { CalendarIdentifier, createCalendar, getLocalTimeZone, toCalendar, today } from '@internationalized/date';
-import { LucideChevronLeft, LucideChevronRight } from '@lucide/angular';
 import { cn, demoCalendar, demoInput } from '../../storybook/styles';
-import { RdxCalendarCellTriggerDirective } from '../src/calendar-cell-trigger.directive';
 import { RdxCalendarCellDirective } from '../src/calendar-cell.directive';
+import { RdxCalendarCellTriggerDirective } from '../src/calendar-cell-trigger.directive';
+import { RdxCalendarGridDirective } from '../src/calendar-grid.directive';
 import { RdxCalendarGridBodyDirective } from '../src/calendar-grid-body.directive';
 import { RdxCalendarGridHeadDirective } from '../src/calendar-grid-head.directive';
-import { RdxCalendarGridDirective } from '../src/calendar-grid.directive';
 import { RdxCalendarHeadCellDirective } from '../src/calendar-head-cell.directive';
 import { RdxCalendarHeaderDirective } from '../src/calendar-header.directive';
 import { RdxCalendarHeadingDirective } from '../src/calendar-heading.directive';
 import { RdxCalendarNextDirective } from '../src/calendar-next.directive';
 import { RdxCalendarPrevDirective } from '../src/calendar-prev.directive';
 import { RdxCalendarRootDirective } from '../src/calendar-root.directive';
+import { ChangeDetectionStrategy, Component, computed, signal } from '@angular/core';
+import { CalendarIdentifier, createCalendar, getLocalTimeZone, toCalendar, today } from '@internationalized/date';
+import { LucideChevronLeft, LucideChevronRight } from '@lucide/angular';
 
 @Component({
     changeDetection: ChangeDetectionStrategy.Eager,
@@ -3689,44 +3689,44 @@ import { RdxCalendarRootDirective } from '../src/calendar-root.directive';
 
             <div
                 #root="rdxCalendarRoot"
+                rdxCalendarRoot
+                fixedWeeks
                 [class]="c.root"
                 [value]="value()"
                 [locale]="locale()"
-                rdxCalendarRoot
-                fixedWeeks
             >
-                <div [class]="c.header" rdxCalendarHeader>
-                    <button [class]="c.nav" type="button" rdxCalendarPrev>
+                <div rdxCalendarHeader [class]="c.header">
+                    <button type="button" rdxCalendarPrev [class]="c.nav">
                         <svg lucideChevronLeft size="16" />
                     </button>
-                    <div #head="rdxCalendarHeading" [class]="c.heading" rdxCalendarHeading>
+                    <div #head="rdxCalendarHeading" rdxCalendarHeading [class]="c.heading">
                         {{ head.headingValue() }}
                     </div>
-                    <button [class]="c.nav" type="button" rdxCalendarNext>
+                    <button type="button" rdxCalendarNext [class]="c.nav">
                         <svg lucideChevronRight size="16" />
                     </button>
                 </div>
 
-                <table [class]="c.grid" rdxCalendarGrid>
+                <table rdxCalendarGrid [class]="c.grid">
                     @for (month of root.months(); track $index) {
                         <thead rdxCalendarGridHead>
                             <tr [class]="c.headRow">
                                 @for (day of root.weekDays(); track $index) {
-                                    <th [class]="c.headCell" rdxCalendarHeadCell>{{ day }}</th>
+                                    <th rdxCalendarHeadCell [class]="c.headCell">{{ day }}</th>
                                 }
                             </tr>
                         </thead>
-                        <tbody [class]="c.body" rdxCalendarGridBody>
+                        <tbody rdxCalendarGridBody [class]="c.body">
                             @for (weekDates of month.weeks; track $index) {
                                 <tr [class]="c.weekRow">
                                     @for (weekDate of weekDates; track $index) {
-                                        <td [class]="c.cell" [date]="weekDate" rdxCalendarCell>
+                                        <td rdxCalendarCell [class]="c.cell" [date]="weekDate">
                                             <div
                                                 #cell="rdxCalendarCellTrigger"
+                                                rdxCalendarCellTrigger
                                                 [class]="c.day"
                                                 [day]="weekDate"
                                                 [month]="month.value"
-                                                rdxCalendarCellTrigger
                                             >
                                                 {{ cell.dayValue() }}
                                             </div>
@@ -3850,21 +3850,21 @@ export class CalendarWithLocale {
 Set `multiple` to let the calendar hold an array of selected dates; clicking a selected date deselects it.
 
 ```typescript
-import { ChangeDetectionStrategy, Component, signal } from '@angular/core';
-import { CalendarDate } from '@internationalized/date';
-import { LucideChevronLeft, LucideChevronRight } from '@lucide/angular';
 import { cn, demoCalendar } from '../../storybook/styles';
-import { RdxCalendarCellTriggerDirective } from '../src/calendar-cell-trigger.directive';
 import { RdxCalendarCellDirective } from '../src/calendar-cell.directive';
+import { RdxCalendarCellTriggerDirective } from '../src/calendar-cell-trigger.directive';
+import { RdxCalendarGridDirective } from '../src/calendar-grid.directive';
 import { RdxCalendarGridBodyDirective } from '../src/calendar-grid-body.directive';
 import { RdxCalendarGridHeadDirective } from '../src/calendar-grid-head.directive';
-import { RdxCalendarGridDirective } from '../src/calendar-grid.directive';
 import { RdxCalendarHeadCellDirective } from '../src/calendar-head-cell.directive';
 import { RdxCalendarHeaderDirective } from '../src/calendar-header.directive';
 import { RdxCalendarHeadingDirective } from '../src/calendar-heading.directive';
 import { RdxCalendarNextDirective } from '../src/calendar-next.directive';
 import { RdxCalendarPrevDirective } from '../src/calendar-prev.directive';
 import { RdxCalendarRootDirective } from '../src/calendar-root.directive';
+import { ChangeDetectionStrategy, Component, signal } from '@angular/core';
+import { CalendarDate } from '@internationalized/date';
+import { LucideChevronLeft, LucideChevronRight } from '@lucide/angular';
 
 @Component({
     changeDetection: ChangeDetectionStrategy.Eager,
@@ -3885,37 +3885,37 @@ import { RdxCalendarRootDirective } from '../src/calendar-root.directive';
         LucideChevronRight
     ],
     template: `
-        <div #root="rdxCalendarRoot" [class]="c.root" [value]="value()" rdxCalendarRoot multiple fixedWeeks>
-            <div [class]="c.header" rdxCalendarHeader>
-                <button [class]="c.nav" type="button" rdxCalendarPrev>
+        <div #root="rdxCalendarRoot" rdxCalendarRoot multiple fixedWeeks [class]="c.root" [value]="value()">
+            <div rdxCalendarHeader [class]="c.header">
+                <button type="button" rdxCalendarPrev [class]="c.nav">
                     <svg lucideChevronLeft size="16" />
                 </button>
-                <div #head="rdxCalendarHeading" [class]="c.heading" rdxCalendarHeading>{{ head.headingValue() }}</div>
-                <button [class]="c.nav" type="button" rdxCalendarNext>
+                <div #head="rdxCalendarHeading" rdxCalendarHeading [class]="c.heading">{{ head.headingValue() }}</div>
+                <button type="button" rdxCalendarNext [class]="c.nav">
                     <svg lucideChevronRight size="16" />
                 </button>
             </div>
 
-            <table [class]="c.grid" rdxCalendarGrid>
+            <table rdxCalendarGrid [class]="c.grid">
                 @for (month of root.months(); track $index) {
                     <thead rdxCalendarGridHead>
                         <tr [class]="c.headRow">
                             @for (day of root.weekDays(); track $index) {
-                                <th [class]="c.headCell" rdxCalendarHeadCell>{{ day }}</th>
+                                <th rdxCalendarHeadCell [class]="c.headCell">{{ day }}</th>
                             }
                         </tr>
                     </thead>
-                    <tbody [class]="c.body" rdxCalendarGridBody>
+                    <tbody rdxCalendarGridBody [class]="c.body">
                         @for (weekDates of month.weeks; track $index) {
                             <tr [class]="c.weekRow">
                                 @for (weekDate of weekDates; track $index) {
-                                    <td [class]="c.cell" [date]="weekDate" rdxCalendarCell>
+                                    <td rdxCalendarCell [class]="c.cell" [date]="weekDate">
                                         <div
                                             #cell="rdxCalendarCellTrigger"
+                                            rdxCalendarCellTrigger
                                             [class]="c.day"
                                             [day]="weekDate"
                                             [month]="month.value"
-                                            rdxCalendarCellTrigger
                                         >
                                             {{ cell.dayValue() }}
                                         </div>
@@ -3942,22 +3942,22 @@ export class CalendarMultiple {
 Render an extra leading column with the ISO week number via `getWeekNumber`.
 
 ```typescript
-import { ChangeDetectionStrategy, Component } from '@angular/core';
-import { CalendarDate, DateValue } from '@internationalized/date';
-import { LucideChevronLeft, LucideChevronRight } from '@lucide/angular';
-import { getWeekNumber } from '@radix-ng/primitives/core';
 import { cn, demoCalendar } from '../../storybook/styles';
-import { RdxCalendarCellTriggerDirective } from '../src/calendar-cell-trigger.directive';
 import { RdxCalendarCellDirective } from '../src/calendar-cell.directive';
+import { RdxCalendarCellTriggerDirective } from '../src/calendar-cell-trigger.directive';
+import { RdxCalendarGridDirective } from '../src/calendar-grid.directive';
 import { RdxCalendarGridBodyDirective } from '../src/calendar-grid-body.directive';
 import { RdxCalendarGridHeadDirective } from '../src/calendar-grid-head.directive';
-import { RdxCalendarGridDirective } from '../src/calendar-grid.directive';
 import { RdxCalendarHeadCellDirective } from '../src/calendar-head-cell.directive';
 import { RdxCalendarHeaderDirective } from '../src/calendar-header.directive';
 import { RdxCalendarHeadingDirective } from '../src/calendar-heading.directive';
 import { RdxCalendarNextDirective } from '../src/calendar-next.directive';
 import { RdxCalendarPrevDirective } from '../src/calendar-prev.directive';
 import { RdxCalendarRootDirective } from '../src/calendar-root.directive';
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { CalendarDate, DateValue } from '@internationalized/date';
+import { LucideChevronLeft, LucideChevronRight } from '@lucide/angular';
+import { getWeekNumber } from '@radix-ng/primitives/core';
 
 @Component({
     changeDetection: ChangeDetectionStrategy.Eager,
@@ -3978,41 +3978,41 @@ import { RdxCalendarRootDirective } from '../src/calendar-root.directive';
         LucideChevronRight
     ],
     template: `
-        <div #root="rdxCalendarRoot" [class]="c.root" [value]="date" rdxCalendarRoot fixedWeeks>
-            <div [class]="c.header" rdxCalendarHeader>
-                <button [class]="c.nav" type="button" rdxCalendarPrev>
+        <div #root="rdxCalendarRoot" rdxCalendarRoot fixedWeeks [class]="c.root" [value]="date">
+            <div rdxCalendarHeader [class]="c.header">
+                <button type="button" rdxCalendarPrev [class]="c.nav">
                     <svg lucideChevronLeft size="16" />
                 </button>
-                <div #head="rdxCalendarHeading" [class]="c.heading" rdxCalendarHeading>{{ head.headingValue() }}</div>
-                <button [class]="c.nav" type="button" rdxCalendarNext>
+                <div #head="rdxCalendarHeading" rdxCalendarHeading [class]="c.heading">{{ head.headingValue() }}</div>
+                <button type="button" rdxCalendarNext [class]="c.nav">
                     <svg lucideChevronRight size="16" />
                 </button>
             </div>
 
-            <table [class]="c.grid" rdxCalendarGrid>
+            <table rdxCalendarGrid [class]="c.grid">
                 @for (month of root.months(); track $index) {
                     <thead rdxCalendarGridHead>
                         <tr class="mt-4 grid w-full grid-cols-8">
-                            <th [class]="c.headCell" rdxCalendarHeadCell>Wk</th>
+                            <th rdxCalendarHeadCell [class]="c.headCell">Wk</th>
                             @for (day of root.weekDays(); track $index) {
-                                <th [class]="c.headCell" rdxCalendarHeadCell>{{ day }}</th>
+                                <th rdxCalendarHeadCell [class]="c.headCell">{{ day }}</th>
                             }
                         </tr>
                     </thead>
-                    <tbody [class]="c.body" rdxCalendarGridBody>
+                    <tbody rdxCalendarGridBody [class]="c.body">
                         @for (weekDates of month.weeks; track $index) {
                             <tr class="grid grid-cols-8">
                                 <div class="text-muted-foreground flex items-center justify-center text-xs">
                                     {{ getWeekNumber(weekDates[0]) }}
                                 </div>
                                 @for (weekDate of weekDates; track $index) {
-                                    <td [class]="c.cell" [date]="weekDate" rdxCalendarCell>
+                                    <td rdxCalendarCell [class]="c.cell" [date]="weekDate">
                                         <div
                                             #cell="rdxCalendarCellTrigger"
+                                            rdxCalendarCellTrigger
                                             [class]="c.day"
                                             [day]="weekDate"
                                             [month]="month.value"
-                                            rdxCalendarCellTrigger
                                         >
                                             {{ cell.dayValue() }}
                                         </div>
@@ -4041,21 +4041,21 @@ Pass an `isDateDisabled` matcher — a `(date) => boolean` callback run for ever
 dates are not focusable or selectable. This example disables weekends.
 
 ```typescript
-import { ChangeDetectionStrategy, Component } from '@angular/core';
-import { CalendarDate, DateValue, isWeekend } from '@internationalized/date';
-import { LucideChevronLeft, LucideChevronRight } from '@lucide/angular';
 import { cn, demoCalendar } from '../../storybook/styles';
-import { RdxCalendarCellTriggerDirective } from '../src/calendar-cell-trigger.directive';
 import { RdxCalendarCellDirective } from '../src/calendar-cell.directive';
+import { RdxCalendarCellTriggerDirective } from '../src/calendar-cell-trigger.directive';
+import { RdxCalendarGridDirective } from '../src/calendar-grid.directive';
 import { RdxCalendarGridBodyDirective } from '../src/calendar-grid-body.directive';
 import { RdxCalendarGridHeadDirective } from '../src/calendar-grid-head.directive';
-import { RdxCalendarGridDirective } from '../src/calendar-grid.directive';
 import { RdxCalendarHeadCellDirective } from '../src/calendar-head-cell.directive';
 import { RdxCalendarHeaderDirective } from '../src/calendar-header.directive';
 import { RdxCalendarHeadingDirective } from '../src/calendar-heading.directive';
 import { RdxCalendarNextDirective } from '../src/calendar-next.directive';
 import { RdxCalendarPrevDirective } from '../src/calendar-prev.directive';
 import { RdxCalendarRootDirective } from '../src/calendar-root.directive';
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { CalendarDate, DateValue, isWeekend } from '@internationalized/date';
+import { LucideChevronLeft, LucideChevronRight } from '@lucide/angular';
 
 @Component({
     changeDetection: ChangeDetectionStrategy.Eager,
@@ -4078,42 +4078,42 @@ import { RdxCalendarRootDirective } from '../src/calendar-root.directive';
     template: `
         <div
             #root="rdxCalendarRoot"
+            rdxCalendarRoot
+            fixedWeeks
             [class]="c.root"
             [value]="date"
             [isDateDisabled]="isDateDisabled"
-            rdxCalendarRoot
-            fixedWeeks
         >
-            <div [class]="c.header" rdxCalendarHeader>
-                <button [class]="c.nav" type="button" rdxCalendarPrev>
+            <div rdxCalendarHeader [class]="c.header">
+                <button type="button" rdxCalendarPrev [class]="c.nav">
                     <svg lucideChevronLeft size="16" />
                 </button>
-                <div #head="rdxCalendarHeading" [class]="c.heading" rdxCalendarHeading>{{ head.headingValue() }}</div>
-                <button [class]="c.nav" type="button" rdxCalendarNext>
+                <div #head="rdxCalendarHeading" rdxCalendarHeading [class]="c.heading">{{ head.headingValue() }}</div>
+                <button type="button" rdxCalendarNext [class]="c.nav">
                     <svg lucideChevronRight size="16" />
                 </button>
             </div>
 
-            <table [class]="c.grid" rdxCalendarGrid>
+            <table rdxCalendarGrid [class]="c.grid">
                 @for (month of root.months(); track $index) {
                     <thead rdxCalendarGridHead>
                         <tr [class]="c.headRow">
                             @for (day of root.weekDays(); track $index) {
-                                <th [class]="c.headCell" rdxCalendarHeadCell>{{ day }}</th>
+                                <th rdxCalendarHeadCell [class]="c.headCell">{{ day }}</th>
                             }
                         </tr>
                     </thead>
-                    <tbody [class]="c.body" rdxCalendarGridBody>
+                    <tbody rdxCalendarGridBody [class]="c.body">
                         @for (weekDates of month.weeks; track $index) {
                             <tr [class]="c.weekRow">
                                 @for (weekDate of weekDates; track $index) {
-                                    <td [class]="c.cell" [date]="weekDate" rdxCalendarCell>
+                                    <td rdxCalendarCell [class]="c.cell" [date]="weekDate">
                                         <div
                                             #cell="rdxCalendarCellTrigger"
+                                            rdxCalendarCellTrigger
                                             [class]="c.day"
                                             [day]="weekDate"
                                             [month]="month.value"
-                                            rdxCalendarCellTrigger
                                         >
                                             {{ cell.dayValue() }}
                                         </div>
@@ -4144,21 +4144,21 @@ export class CalendarDisabledDates {
 (e.g. already booked). They render struck-through and ignore pointer interaction.
 
 ```typescript
-import { ChangeDetectionStrategy, Component } from '@angular/core';
-import { CalendarDate, DateValue } from '@internationalized/date';
-import { LucideChevronLeft, LucideChevronRight } from '@lucide/angular';
 import { cn, demoCalendar } from '../../storybook/styles';
-import { RdxCalendarCellTriggerDirective } from '../src/calendar-cell-trigger.directive';
 import { RdxCalendarCellDirective } from '../src/calendar-cell.directive';
+import { RdxCalendarCellTriggerDirective } from '../src/calendar-cell-trigger.directive';
+import { RdxCalendarGridDirective } from '../src/calendar-grid.directive';
 import { RdxCalendarGridBodyDirective } from '../src/calendar-grid-body.directive';
 import { RdxCalendarGridHeadDirective } from '../src/calendar-grid-head.directive';
-import { RdxCalendarGridDirective } from '../src/calendar-grid.directive';
 import { RdxCalendarHeadCellDirective } from '../src/calendar-head-cell.directive';
 import { RdxCalendarHeaderDirective } from '../src/calendar-header.directive';
 import { RdxCalendarHeadingDirective } from '../src/calendar-heading.directive';
 import { RdxCalendarNextDirective } from '../src/calendar-next.directive';
 import { RdxCalendarPrevDirective } from '../src/calendar-prev.directive';
 import { RdxCalendarRootDirective } from '../src/calendar-root.directive';
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { CalendarDate, DateValue } from '@internationalized/date';
+import { LucideChevronLeft, LucideChevronRight } from '@lucide/angular';
 
 @Component({
     changeDetection: ChangeDetectionStrategy.Eager,
@@ -4181,42 +4181,42 @@ import { RdxCalendarRootDirective } from '../src/calendar-root.directive';
     template: `
         <div
             #root="rdxCalendarRoot"
+            rdxCalendarRoot
+            fixedWeeks
             [class]="c.root"
             [value]="date"
             [isDateUnavailable]="isDateUnavailable"
-            rdxCalendarRoot
-            fixedWeeks
         >
-            <div [class]="c.header" rdxCalendarHeader>
-                <button [class]="c.nav" type="button" rdxCalendarPrev>
+            <div rdxCalendarHeader [class]="c.header">
+                <button type="button" rdxCalendarPrev [class]="c.nav">
                     <svg lucideChevronLeft size="16" />
                 </button>
-                <div #head="rdxCalendarHeading" [class]="c.heading" rdxCalendarHeading>{{ head.headingValue() }}</div>
-                <button [class]="c.nav" type="button" rdxCalendarNext>
+                <div #head="rdxCalendarHeading" rdxCalendarHeading [class]="c.heading">{{ head.headingValue() }}</div>
+                <button type="button" rdxCalendarNext [class]="c.nav">
                     <svg lucideChevronRight size="16" />
                 </button>
             </div>
 
-            <table [class]="c.grid" rdxCalendarGrid>
+            <table rdxCalendarGrid [class]="c.grid">
                 @for (month of root.months(); track $index) {
                     <thead rdxCalendarGridHead>
                         <tr [class]="c.headRow">
                             @for (day of root.weekDays(); track $index) {
-                                <th [class]="c.headCell" rdxCalendarHeadCell>{{ day }}</th>
+                                <th rdxCalendarHeadCell [class]="c.headCell">{{ day }}</th>
                             }
                         </tr>
                     </thead>
-                    <tbody [class]="c.body" rdxCalendarGridBody>
+                    <tbody rdxCalendarGridBody [class]="c.body">
                         @for (weekDates of month.weeks; track $index) {
                             <tr [class]="c.weekRow">
                                 @for (weekDate of weekDates; track $index) {
-                                    <td [class]="c.cell" [date]="weekDate" rdxCalendarCell>
+                                    <td rdxCalendarCell [class]="c.cell" [date]="weekDate">
                                         <div
                                             #cell="rdxCalendarCellTrigger"
+                                            rdxCalendarCellTrigger
                                             [class]="c.day"
                                             [day]="weekDate"
                                             [month]="month.value"
-                                            rdxCalendarCellTrigger
                                         >
                                             {{ cell.dayValue() }}
                                         </div>
@@ -4247,21 +4247,21 @@ Override how the previous/next buttons move the view with `propsPrevPage` / `pro
 `(placeholder) => DateValue` callback. This example jumps a whole year per click.
 
 ```typescript
-import { ChangeDetectionStrategy, Component } from '@angular/core';
-import { CalendarDate, DateValue } from '@internationalized/date';
-import { LucideChevronLeft, LucideChevronRight } from '@lucide/angular';
 import { cn, demoCalendar } from '../../storybook/styles';
-import { RdxCalendarCellTriggerDirective } from '../src/calendar-cell-trigger.directive';
 import { RdxCalendarCellDirective } from '../src/calendar-cell.directive';
+import { RdxCalendarCellTriggerDirective } from '../src/calendar-cell-trigger.directive';
+import { RdxCalendarGridDirective } from '../src/calendar-grid.directive';
 import { RdxCalendarGridBodyDirective } from '../src/calendar-grid-body.directive';
 import { RdxCalendarGridHeadDirective } from '../src/calendar-grid-head.directive';
-import { RdxCalendarGridDirective } from '../src/calendar-grid.directive';
 import { RdxCalendarHeadCellDirective } from '../src/calendar-head-cell.directive';
 import { RdxCalendarHeaderDirective } from '../src/calendar-header.directive';
 import { RdxCalendarHeadingDirective } from '../src/calendar-heading.directive';
 import { RdxCalendarNextDirective } from '../src/calendar-next.directive';
 import { RdxCalendarPrevDirective } from '../src/calendar-prev.directive';
 import { RdxCalendarRootDirective } from '../src/calendar-root.directive';
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { CalendarDate, DateValue } from '@internationalized/date';
+import { LucideChevronLeft, LucideChevronRight } from '@lucide/angular';
 
 @Component({
     changeDetection: ChangeDetectionStrategy.Eager,
@@ -4284,43 +4284,43 @@ import { RdxCalendarRootDirective } from '../src/calendar-root.directive';
     template: `
         <div
             #root="rdxCalendarRoot"
+            rdxCalendarRoot
+            fixedWeeks
             [class]="c.root"
             [value]="date"
             [propsNextPage]="nextYear"
             [propsPrevPage]="prevYear"
-            rdxCalendarRoot
-            fixedWeeks
         >
-            <div [class]="c.header" rdxCalendarHeader>
-                <button [class]="c.nav" type="button" rdxCalendarPrev>
+            <div rdxCalendarHeader [class]="c.header">
+                <button type="button" rdxCalendarPrev [class]="c.nav">
                     <svg lucideChevronLeft size="16" />
                 </button>
-                <div #head="rdxCalendarHeading" [class]="c.heading" rdxCalendarHeading>{{ head.headingValue() }}</div>
-                <button [class]="c.nav" type="button" rdxCalendarNext>
+                <div #head="rdxCalendarHeading" rdxCalendarHeading [class]="c.heading">{{ head.headingValue() }}</div>
+                <button type="button" rdxCalendarNext [class]="c.nav">
                     <svg lucideChevronRight size="16" />
                 </button>
             </div>
 
-            <table [class]="c.grid" rdxCalendarGrid>
+            <table rdxCalendarGrid [class]="c.grid">
                 @for (month of root.months(); track $index) {
                     <thead rdxCalendarGridHead>
                         <tr [class]="c.headRow">
                             @for (day of root.weekDays(); track $index) {
-                                <th [class]="c.headCell" rdxCalendarHeadCell>{{ day }}</th>
+                                <th rdxCalendarHeadCell [class]="c.headCell">{{ day }}</th>
                             }
                         </tr>
                     </thead>
-                    <tbody [class]="c.body" rdxCalendarGridBody>
+                    <tbody rdxCalendarGridBody [class]="c.body">
                         @for (weekDates of month.weeks; track $index) {
                             <tr [class]="c.weekRow">
                                 @for (weekDate of weekDates; track $index) {
-                                    <td [class]="c.cell" [date]="weekDate" rdxCalendarCell>
+                                    <td rdxCalendarCell [class]="c.cell" [date]="weekDate">
                                         <div
                                             #cell="rdxCalendarCellTrigger"
+                                            rdxCalendarCellTrigger
                                             [class]="c.day"
                                             [day]="weekDate"
                                             [month]="month.value"
-                                            rdxCalendarCellTrigger
                                         >
                                             {{ cell.dayValue() }}
                                         </div>
@@ -4352,21 +4352,21 @@ Set `numberOfMonths` to render several months at once. Arrow-key navigation flow
 boundary between months, and (without `pagedNavigation`) the prev/next buttons shift the view by one month.
 
 ```typescript
-import { ChangeDetectionStrategy, Component } from '@angular/core';
-import { CalendarDate, DateValue } from '@internationalized/date';
-import { LucideChevronLeft, LucideChevronRight } from '@lucide/angular';
 import { cn, demoCalendar } from '../../storybook/styles';
-import { RdxCalendarCellTriggerDirective } from '../src/calendar-cell-trigger.directive';
 import { RdxCalendarCellDirective } from '../src/calendar-cell.directive';
+import { RdxCalendarCellTriggerDirective } from '../src/calendar-cell-trigger.directive';
+import { RdxCalendarGridDirective } from '../src/calendar-grid.directive';
 import { RdxCalendarGridBodyDirective } from '../src/calendar-grid-body.directive';
 import { RdxCalendarGridHeadDirective } from '../src/calendar-grid-head.directive';
-import { RdxCalendarGridDirective } from '../src/calendar-grid.directive';
 import { RdxCalendarHeadCellDirective } from '../src/calendar-head-cell.directive';
 import { RdxCalendarHeaderDirective } from '../src/calendar-header.directive';
 import { RdxCalendarHeadingDirective } from '../src/calendar-heading.directive';
 import { RdxCalendarNextDirective } from '../src/calendar-next.directive';
 import { RdxCalendarPrevDirective } from '../src/calendar-prev.directive';
 import { RdxCalendarRootDirective } from '../src/calendar-root.directive';
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { CalendarDate, DateValue } from '@internationalized/date';
+import { LucideChevronLeft, LucideChevronRight } from '@lucide/angular';
 
 @Component({
     changeDetection: ChangeDetectionStrategy.Eager,
@@ -4388,19 +4388,19 @@ import { RdxCalendarRootDirective } from '../src/calendar-root.directive';
     ],
     template: `
         <div
-            class="border-border bg-background rounded-xl border p-4 shadow-sm"
             #root="rdxCalendarRoot"
-            [value]="date"
-            [numberOfMonths]="2"
+            class="border-border bg-background rounded-xl border p-4 shadow-sm"
             rdxCalendarRoot
             fixedWeeks
+            [value]="date"
+            [numberOfMonths]="2"
         >
-            <div [class]="c.header" rdxCalendarHeader>
-                <button [class]="c.nav" type="button" rdxCalendarPrev>
+            <div rdxCalendarHeader [class]="c.header">
+                <button type="button" rdxCalendarPrev [class]="c.nav">
                     <svg lucideChevronLeft size="16" />
                 </button>
-                <div #head="rdxCalendarHeading" [class]="c.heading" rdxCalendarHeading>{{ head.headingValue() }}</div>
-                <button [class]="c.nav" type="button" rdxCalendarNext>
+                <div #head="rdxCalendarHeading" rdxCalendarHeading [class]="c.heading">{{ head.headingValue() }}</div>
+                <button type="button" rdxCalendarNext [class]="c.nav">
                     <svg lucideChevronRight size="16" />
                 </button>
             </div>
@@ -4411,21 +4411,21 @@ import { RdxCalendarRootDirective } from '../src/calendar-root.directive';
                         <thead rdxCalendarGridHead>
                             <tr [class]="c.headRow">
                                 @for (day of root.weekDays(); track $index) {
-                                    <th [class]="c.headCell" rdxCalendarHeadCell>{{ day }}</th>
+                                    <th rdxCalendarHeadCell [class]="c.headCell">{{ day }}</th>
                                 }
                             </tr>
                         </thead>
-                        <tbody [class]="c.body" rdxCalendarGridBody>
+                        <tbody rdxCalendarGridBody [class]="c.body">
                             @for (weekDates of month.weeks; track $index) {
                                 <tr [class]="c.weekRow">
                                     @for (weekDate of weekDates; track $index) {
-                                        <td [class]="c.cell" [date]="weekDate" rdxCalendarCell>
+                                        <td rdxCalendarCell [class]="c.cell" [date]="weekDate">
                                             <div
                                                 #cell="rdxCalendarCellTrigger"
+                                                rdxCalendarCellTrigger
                                                 [class]="c.day"
                                                 [day]="weekDate"
                                                 [month]="month.value"
-                                                rdxCalendarCellTrigger
                                             >
                                                 {{ cell.dayValue() }}
                                             </div>
@@ -4556,15 +4556,15 @@ setChecked(change: RdxCheckboxCheckedChangeEvent) {
 The third "mixed" state. Clicking a checkbox in the indeterminate state resolves it to checked.
 
 ```typescript
+import { cn, demoButton, demoCheckbox } from '../../storybook/styles';
+import { RdxCheckboxIndicatorDirective } from '../src/checkbox-indicator';
+import { RdxCheckboxInputDirective } from '../src/checkbox-input';
+import { RdxCheckboxRootDirective } from '../src/checkbox-root';
 import { JsonPipe } from '@angular/common';
 import { ChangeDetectionStrategy, Component, computed, model } from '@angular/core';
 import { LucideDynamicIcon } from '@lucide/angular';
 import { RdxCheckboxButtonDirective } from '@radix-ng/primitives/checkbox';
 import { RdxLabelDirective } from '@radix-ng/primitives/label';
-import { cn, demoButton, demoCheckbox } from '../../storybook/styles';
-import { RdxCheckboxIndicatorDirective } from '../src/checkbox-indicator';
-import { RdxCheckboxInputDirective } from '../src/checkbox-input';
-import { RdxCheckboxRootDirective } from '../src/checkbox-root';
 
 @Component({
     changeDetection: ChangeDetectionStrategy.Eager,
@@ -4581,13 +4581,13 @@ import { RdxCheckboxRootDirective } from '../src/checkbox-root';
     template: `
         <div class="flex items-center gap-3">
             <div
+                rdxCheckboxRoot
                 [checked]="checked()"
                 [indeterminate]="indeterminate()"
                 (onCheckedChange)="checked.set($event.checked); indeterminate.set(false)"
-                rdxCheckboxRoot
             >
-                <button id="r1" [class]="c.button" rdxCheckboxButton>
-                    <svg [class]="c.indicator" [lucideIcon]="iconName()" rdxCheckboxIndicator size="16" />
+                <button id="r1" rdxCheckboxButton [class]="c.button">
+                    <svg rdxCheckboxIndicator size="16" [class]="c.indicator" [lucideIcon]="iconName()" />
                 </button>
                 <input rdxCheckboxInput />
             </div>
@@ -4601,7 +4601,7 @@ import { RdxCheckboxRootDirective } from '../src/checkbox-root';
             <p>indeterminate:&nbsp;{{ indeterminate() | json }}</p>
         </section>
 
-        <button [class]="cn(b.base, b.primary, b.size.md, 'mt-3')" (click)="toggleIndeterminate()" type="button">
+        <button type="button" [class]="cn(b.base, b.primary, b.size.md, 'mt-3')" (click)="toggleIndeterminate()">
             Toggle Indeterminate state
         </button>
     `
@@ -4629,15 +4629,15 @@ The indicator is removed from layout when unchecked. Add `keepMounted` to keep i
 CSS transitions or measurement, matching Base UI's `Checkbox.Indicator keepMounted` prop.
 
 ```typescript
+import { demoCheckbox } from '../../storybook/styles';
+import { RdxCheckboxIndicatorDirective } from '../src/checkbox-indicator';
+import { RdxCheckboxInputDirective } from '../src/checkbox-input';
+import { RdxCheckboxRootDirective } from '../src/checkbox-root';
 import { JsonPipe } from '@angular/common';
 import { ChangeDetectionStrategy, Component, model } from '@angular/core';
 import { LucideCheck as Check, LucideDynamicIcon } from '@lucide/angular';
 import { RdxCheckboxButtonDirective } from '@radix-ng/primitives/checkbox';
 import { RdxLabelDirective } from '@radix-ng/primitives/label';
-import { demoCheckbox } from '../../storybook/styles';
-import { RdxCheckboxIndicatorDirective } from '../src/checkbox-indicator';
-import { RdxCheckboxInputDirective } from '../src/checkbox-input';
-import { RdxCheckboxRootDirective } from '../src/checkbox-root';
 
 @Component({
     changeDetection: ChangeDetectionStrategy.Eager,
@@ -4653,9 +4653,9 @@ import { RdxCheckboxRootDirective } from '../src/checkbox-root';
     ],
     template: `
         <div class="flex items-center gap-3">
-            <div [checked]="checked()" (onCheckedChange)="checked.set($event.checked)" rdxCheckboxRoot>
-                <button id="r1" [class]="c.button" rdxCheckboxButton>
-                    <svg [class]="c.indicator" [lucideIcon]="Check" keepMounted rdxCheckboxIndicator size="16" />
+            <div rdxCheckboxRoot [checked]="checked()" (onCheckedChange)="checked.set($event.checked)">
+                <button id="r1" rdxCheckboxButton [class]="c.button">
+                    <svg keepMounted rdxCheckboxIndicator size="16" [class]="c.indicator" [lucideIcon]="Check" />
                 </button>
                 <input rdxCheckboxInput />
             </div>
@@ -4681,15 +4681,15 @@ export class CheckboxKeepMountedExample {
 Two-way bind the root with `[(ngModel)]`.
 
 ```typescript
-import { ChangeDetectionStrategy, Component } from '@angular/core';
-import { FormsModule } from '@angular/forms';
-import { LucideCheck } from '@lucide/angular';
-import { RdxLabelDirective } from '@radix-ng/primitives/label';
 import { demoCheckbox } from '../../storybook/styles';
 import { RdxCheckboxButtonDirective } from '../src/checkbox-button';
 import { RdxCheckboxIndicatorDirective } from '../src/checkbox-indicator';
 import { RdxCheckboxInputDirective } from '../src/checkbox-input';
 import { RdxCheckboxRootDirective } from '../src/checkbox-root';
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { FormsModule } from '@angular/forms';
+import { LucideCheck } from '@lucide/angular';
+import { RdxLabelDirective } from '@radix-ng/primitives/label';
 
 /**
  * Template-driven forms: two-way bind the root with `[(ngModel)]`.
@@ -4708,9 +4708,9 @@ import { RdxCheckboxRootDirective } from '../src/checkbox-root';
     ],
     template: `
         <div class="flex items-center gap-3">
-            <div [(ngModel)]="subscribed" rdxCheckboxRoot>
-                <button id="sub" [class]="c.button" rdxCheckboxButton>
-                    <svg [class]="c.indicator" rdxCheckboxIndicator size="16" lucideCheck />
+            <div rdxCheckboxRoot [(ngModel)]="subscribed">
+                <button id="sub" rdxCheckboxButton [class]="c.button">
+                    <svg rdxCheckboxIndicator size="16" lucideCheck [class]="c.indicator" />
                 </button>
                 <input rdxCheckboxInput />
             </div>
@@ -4734,16 +4734,16 @@ export class CheckboxNgModelExample {
 Bind the root with `formControlName`; `disabled` reacts to the control's enable/disable state.
 
 ```typescript
+import { cn, demoButton, demoCheckbox } from '../../storybook/styles';
+import { RdxCheckboxIndicatorDirective } from '../src/checkbox-indicator';
+import { RdxCheckboxInputDirective } from '../src/checkbox-input';
+import { RdxCheckboxRootDirective } from '../src/checkbox-root';
 import { JsonPipe } from '@angular/common';
 import { ChangeDetectionStrategy, Component, inject } from '@angular/core';
 import { FormBuilder, FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { LucideCheck } from '@lucide/angular';
 import { RdxCheckboxButtonDirective } from '@radix-ng/primitives/checkbox';
 import { RdxLabelDirective } from '@radix-ng/primitives/label';
-import { cn, demoButton, demoCheckbox } from '../../storybook/styles';
-import { RdxCheckboxIndicatorDirective } from '../src/checkbox-indicator';
-import { RdxCheckboxInputDirective } from '../src/checkbox-input';
-import { RdxCheckboxRootDirective } from '../src/checkbox-root';
 
 @Component({
     changeDetection: ChangeDetectionStrategy.Eager,
@@ -4752,8 +4752,8 @@ import { RdxCheckboxRootDirective } from '../src/checkbox-root';
         <section [formGroup]="personality">
             <div class="flex items-center gap-3 pb-3">
                 <div rdxCheckboxRoot formControlName="fun">
-                    <button id="r1" [class]="c.button" rdxCheckboxButton>
-                        <svg [class]="c.indicator" rdxCheckboxIndicator size="16" lucideCheck />
+                    <button id="r1" rdxCheckboxButton [class]="c.button">
+                        <svg rdxCheckboxIndicator size="16" lucideCheck [class]="c.indicator" />
                     </button>
                     <input rdxCheckboxInput />
                 </div>
@@ -4762,8 +4762,8 @@ import { RdxCheckboxRootDirective } from '../src/checkbox-root';
 
             <div class="flex items-center gap-3 pb-3">
                 <div rdxCheckboxRoot formControlName="serious">
-                    <button id="r2" [class]="c.button" rdxCheckboxButton>
-                        <svg [class]="c.indicator" rdxCheckboxIndicator size="16" lucideCheck />
+                    <button id="r2" rdxCheckboxButton [class]="c.button">
+                        <svg rdxCheckboxIndicator size="16" lucideCheck [class]="c.indicator" />
                     </button>
                     <input rdxCheckboxInput />
                 </div>
@@ -4774,8 +4774,8 @@ import { RdxCheckboxRootDirective } from '../src/checkbox-root';
 
             <div class="flex items-center gap-3 pb-3">
                 <div rdxCheckboxRoot formControlName="smart" form="smart">
-                    <button id="r3" [class]="c.button" rdxCheckboxButton>
-                        <svg [class]="c.indicator" rdxCheckboxIndicator size="16" lucideCheck />
+                    <button id="r3" rdxCheckboxButton [class]="c.button">
+                        <svg rdxCheckboxIndicator size="16" lucideCheck [class]="c.indicator" />
                     </button>
                     <input rdxCheckboxInput />
                 </div>
@@ -4788,7 +4788,7 @@ import { RdxCheckboxRootDirective } from '../src/checkbox-root';
             {{ personality.value | json }}
         </section>
 
-        <button [class]="cn(b.base, b.primary, b.size.md)" (click)="toggleDisable()" type="button">
+        <button type="button" [class]="cn(b.base, b.primary, b.size.md)" (click)="toggleDisable()">
             Toggle disabled state
         </button>
     `,
@@ -4831,15 +4831,15 @@ export class CheckboxReactiveFormsExampleComponent {
 `Validators.requiredTrue` enforces acceptance; the error shows once the field is touched and submit is guarded.
 
 ```typescript
-import { ChangeDetectionStrategy, Component, inject, signal } from '@angular/core';
-import { FormBuilder, ReactiveFormsModule, Validators } from '@angular/forms';
-import { LucideCheck } from '@lucide/angular';
-import { RdxLabelDirective } from '@radix-ng/primitives/label';
 import { cn, demoButton, demoCheckbox } from '../../storybook/styles';
 import { RdxCheckboxButtonDirective } from '../src/checkbox-button';
 import { RdxCheckboxIndicatorDirective } from '../src/checkbox-indicator';
 import { RdxCheckboxInputDirective } from '../src/checkbox-input';
 import { RdxCheckboxRootDirective } from '../src/checkbox-root';
+import { ChangeDetectionStrategy, Component, inject, signal } from '@angular/core';
+import { FormBuilder, ReactiveFormsModule, Validators } from '@angular/forms';
+import { LucideCheck } from '@lucide/angular';
+import { RdxLabelDirective } from '@radix-ng/primitives/label';
 
 /**
  * Reactive forms with validation: `Validators.requiredTrue` forces the box to be
@@ -4861,8 +4861,8 @@ import { RdxCheckboxRootDirective } from '../src/checkbox-root';
         <form class="flex flex-col gap-3" [formGroup]="form" (ngSubmit)="onSubmit()">
             <div class="flex items-center gap-3">
                 <div rdxCheckboxRoot formControlName="terms">
-                    <button id="terms" [class]="c.button" rdxCheckboxButton>
-                        <svg [class]="c.indicator" rdxCheckboxIndicator size="16" lucideCheck />
+                    <button id="terms" rdxCheckboxButton [class]="c.button">
+                        <svg rdxCheckboxIndicator size="16" lucideCheck [class]="c.indicator" />
                     </button>
                     <input rdxCheckboxInput />
                 </div>
@@ -4875,7 +4875,7 @@ import { RdxCheckboxRootDirective } from '../src/checkbox-root';
                 <p class="text-destructive text-sm">You must accept the terms to continue.</p>
             }
 
-            <button [class]="cn(b.base, b.primary, b.size.md, 'self-start')" type="submit">Submit</button>
+            <button type="submit" [class]="cn(b.base, b.primary, b.size.md, 'self-start')">Submit</button>
 
             @if (submitted()) {
                 <p class="text-muted-foreground text-sm">Submitted ✓</p>
@@ -4926,14 +4926,14 @@ A parent checkbox derived from its children — `indeterminate` when only some a
 parent/child logic (and the flat all ↔ none toggle) is wired **by hand** in the component.
 
 ```typescript
-import { ChangeDetectionStrategy, Component, computed, signal } from '@angular/core';
-import { LucideCheck, LucideDynamicIcon } from '@lucide/angular';
-import { RdxLabelDirective } from '@radix-ng/primitives/label';
 import { demoCheckbox } from '../../storybook/styles';
 import { RdxCheckboxButtonDirective } from '../src/checkbox-button';
 import { RdxCheckboxIndicatorDirective } from '../src/checkbox-indicator';
 import { RdxCheckboxInputDirective } from '../src/checkbox-input';
 import { CheckedState, RdxCheckboxRootDirective } from '../src/checkbox-root';
+import { ChangeDetectionStrategy, Component, computed, signal } from '@angular/core';
+import { LucideCheck, LucideDynamicIcon } from '@lucide/angular';
+import { RdxLabelDirective } from '@radix-ng/primitives/label';
 
 interface Item {
     id: string;
@@ -4961,17 +4961,17 @@ interface Item {
         <div class="flex flex-col gap-3">
             <div class="flex items-center gap-3">
                 <div
+                    rdxCheckboxRoot
                     [checked]="parentState() === true"
                     [indeterminate]="parentState() === 'indeterminate'"
                     (onCheckedChange)="toggleAll($event)"
-                    rdxCheckboxRoot
                 >
-                    <button id="all" [class]="c.button" rdxCheckboxButton>
+                    <button id="all" rdxCheckboxButton [class]="c.button">
                         <svg
-                            [class]="c.indicator"
-                            [lucideIcon]="parentState() === 'indeterminate' ? 'minus' : 'check'"
                             rdxCheckboxIndicator
                             size="16"
+                            [class]="c.indicator"
+                            [lucideIcon]="parentState() === 'indeterminate' ? 'minus' : 'check'"
                         />
                     </button>
                     <input rdxCheckboxInput />
@@ -4982,13 +4982,13 @@ interface Item {
             <div class="ml-6 flex flex-col gap-3">
                 @for (item of items(); track item.id) {
                     <div class="flex items-center gap-3">
-                        <div [checked]="item.checked" (onCheckedChange)="toggleItem(item.id, $event)" rdxCheckboxRoot>
-                            <button [class]="c.button" [id]="item.id" rdxCheckboxButton>
-                                <svg [class]="c.indicator" rdxCheckboxIndicator size="16" lucideCheck />
+                        <div rdxCheckboxRoot [checked]="item.checked" (onCheckedChange)="toggleItem(item.id, $event)">
+                            <button rdxCheckboxButton [class]="c.button" [id]="item.id">
+                                <svg rdxCheckboxIndicator size="16" lucideCheck [class]="c.indicator" />
                             </button>
                             <input rdxCheckboxInput />
                         </div>
-                        <label class="text-foreground text-sm font-medium" [htmlFor]="item.id" rdxLabel>
+                        <label class="text-foreground text-sm font-medium" rdxLabel [htmlFor]="item.id">
                             {{ item.label }}
                         </label>
                     </div>
@@ -5037,14 +5037,14 @@ back to the partial), disabled-but-checked children are preserved, and the group
 control, so `[(value)]`, `ngModel`, and reactive forms bind to the `string[]` value.
 
 ```typescript
-import { ChangeDetectionStrategy, Component, signal } from '@angular/core';
-import { LucideCheck, LucideDynamicIcon } from '@lucide/angular';
-import { RdxLabelDirective } from '@radix-ng/primitives/label';
 import { demoCheckbox } from '../../storybook/styles';
 import { RdxCheckboxButtonDirective } from '../src/checkbox-button';
 import { RdxCheckboxGroupDirective } from '../src/checkbox-group';
 import { RdxCheckboxIndicatorDirective } from '../src/checkbox-indicator';
 import { RdxCheckboxRootDirective } from '../src/checkbox-root';
+import { ChangeDetectionStrategy, Component, signal } from '@angular/core';
+import { LucideCheck, LucideDynamicIcon } from '@lucide/angular';
+import { RdxLabelDirective } from '@radix-ng/primitives/label';
 
 /**
  * `rdxCheckboxGroup` holds the array of checked names. Each child participates by its `name`, and
@@ -5067,15 +5067,15 @@ import { RdxCheckboxRootDirective } from '../src/checkbox-root';
         LucideCheck
     ],
     template: `
-        <div class="flex flex-col gap-3" #group="rdxCheckboxGroup" [(value)]="value" [allValues]="all" rdxCheckboxGroup>
+        <div #group="rdxCheckboxGroup" class="flex flex-col gap-3" rdxCheckboxGroup [allValues]="all" [(value)]="value">
             <div class="flex items-center gap-3">
                 <div parent rdxCheckboxRoot>
-                    <button id="all" [class]="c.button" rdxCheckboxButton>
+                    <button id="all" rdxCheckboxButton [class]="c.button">
                         <svg
-                            [class]="c.indicator"
-                            [lucideIcon]="group.parentState() === 'indeterminate' ? 'minus' : 'check'"
                             rdxCheckboxIndicator
                             size="16"
+                            [class]="c.indicator"
+                            [lucideIcon]="group.parentState() === 'indeterminate' ? 'minus' : 'check'"
                         />
                     </button>
                 </div>
@@ -5085,12 +5085,12 @@ import { RdxCheckboxRootDirective } from '../src/checkbox-root';
             <div class="ml-6 flex flex-col gap-3">
                 @for (item of items; track item.name) {
                     <div class="flex items-center gap-3">
-                        <div [name]="item.name" rdxCheckboxRoot>
-                            <button [class]="c.button" [id]="item.name" rdxCheckboxButton>
-                                <svg [class]="c.indicator" rdxCheckboxIndicator size="16" lucideCheck />
+                        <div rdxCheckboxRoot [name]="item.name">
+                            <button rdxCheckboxButton [class]="c.button" [id]="item.name">
+                                <svg rdxCheckboxIndicator size="16" lucideCheck [class]="c.indicator" />
                             </button>
                         </div>
-                        <label class="text-foreground text-sm font-medium" [htmlFor]="item.name" rdxLabel>
+                        <label class="text-foreground text-sm font-medium" rdxLabel [htmlFor]="item.name">
                             {{ item.label }}
                         </label>
                     </div>
@@ -5400,37 +5400,37 @@ selection when closed. For free-form entry whose value is the typed text, reach
 [Autocomplete](?path=/docs/primitives-autocomplete--docs).
 
 ```typescript
-import { ChangeDetectionStrategy, Component, signal } from '@angular/core';
-import { LucideCheck, LucideChevronDown } from '@lucide/angular';
 import { demoCombobox } from '../../storybook/styles';
 import { _importsCombobox } from '../index';
+import { ChangeDetectionStrategy, Component, signal } from '@angular/core';
+import { LucideCheck, LucideChevronDown } from '@lucide/angular';
 
 @Component({
     changeDetection: ChangeDetectionStrategy.Eager,
     selector: 'combobox-default',
     imports: [_importsCombobox, LucideChevronDown, LucideCheck],
     template: `
-        <div [(value)]="value" rdxComboboxRoot>
+        <div rdxComboboxRoot [(value)]="value">
             <div [class]="c.control">
-                <input [class]="c.input" rdxComboboxInput placeholder="Search a fruit…" aria-label="Fruit" />
-                <button [class]="c.trigger" rdxComboboxTrigger aria-label="Open">
+                <input rdxComboboxInput placeholder="Search a fruit…" aria-label="Fruit" [class]="c.input" />
+                <button rdxComboboxTrigger aria-label="Open" [class]="c.trigger">
                     <svg lucideChevronDown size="16"></svg>
                 </button>
             </div>
 
-            <div *rdxComboboxPortal [class]="c.positioner" rdxComboboxPositioner>
-                <div [class]="c.popup" rdxComboboxPopup>
-                    <div [class]="c.list" rdxComboboxList aria-label="Fruits">
+            <div *rdxComboboxPortal rdxComboboxPositioner [class]="c.positioner">
+                <div rdxComboboxPopup [class]="c.popup">
+                    <div rdxComboboxList aria-label="Fruits" [class]="c.list">
                         @for (fruit of fruits; track fruit) {
-                            <div [class]="c.item" [value]="fruit" rdxComboboxItem>
-                                <span [class]="c.itemIndicator" rdxComboboxItemIndicator>
+                            <div rdxComboboxItem [class]="c.item" [value]="fruit">
+                                <span rdxComboboxItemIndicator [class]="c.itemIndicator">
                                     <svg lucideCheck size="14"></svg>
                                 </span>
                                 {{ fruit }}
                             </div>
                         }
                     </div>
-                    <div [class]="c.empty" rdxComboboxEmpty>No fruit found.</div>
+                    <div rdxComboboxEmpty [class]="c.empty">No fruit found.</div>
                 </div>
             </div>
         </div>
@@ -5543,37 +5543,37 @@ the wrapping element so the popup aligns to the whole control instead of the inl
 Single selection with built-in substring filtering. Type to filter, ArrowDown / Enter to pick.
 
 ```typescript
-import { ChangeDetectionStrategy, Component, signal } from '@angular/core';
-import { LucideCheck, LucideChevronDown } from '@lucide/angular';
 import { demoCombobox } from '../../storybook/styles';
 import { _importsCombobox } from '../index';
+import { ChangeDetectionStrategy, Component, signal } from '@angular/core';
+import { LucideCheck, LucideChevronDown } from '@lucide/angular';
 
 @Component({
     changeDetection: ChangeDetectionStrategy.Eager,
     selector: 'combobox-default',
     imports: [_importsCombobox, LucideChevronDown, LucideCheck],
     template: `
-        <div [(value)]="value" rdxComboboxRoot>
+        <div rdxComboboxRoot [(value)]="value">
             <div [class]="c.control">
-                <input [class]="c.input" rdxComboboxInput placeholder="Search a fruit…" aria-label="Fruit" />
-                <button [class]="c.trigger" rdxComboboxTrigger aria-label="Open">
+                <input rdxComboboxInput placeholder="Search a fruit…" aria-label="Fruit" [class]="c.input" />
+                <button rdxComboboxTrigger aria-label="Open" [class]="c.trigger">
                     <svg lucideChevronDown size="16"></svg>
                 </button>
             </div>
 
-            <div *rdxComboboxPortal [class]="c.positioner" rdxComboboxPositioner>
-                <div [class]="c.popup" rdxComboboxPopup>
-                    <div [class]="c.list" rdxComboboxList aria-label="Fruits">
+            <div *rdxComboboxPortal rdxComboboxPositioner [class]="c.positioner">
+                <div rdxComboboxPopup [class]="c.popup">
+                    <div rdxComboboxList aria-label="Fruits" [class]="c.list">
                         @for (fruit of fruits; track fruit) {
-                            <div [class]="c.item" [value]="fruit" rdxComboboxItem>
-                                <span [class]="c.itemIndicator" rdxComboboxItemIndicator>
+                            <div rdxComboboxItem [class]="c.item" [value]="fruit">
+                                <span rdxComboboxItemIndicator [class]="c.itemIndicator">
                                     <svg lucideCheck size="14"></svg>
                                 </span>
                                 {{ fruit }}
                             </div>
                         }
                     </div>
-                    <div [class]="c.empty" rdxComboboxEmpty>No fruit found.</div>
+                    <div rdxComboboxEmpty [class]="c.empty">No fruit found.</div>
                 </div>
             </div>
         </div>
@@ -5591,30 +5591,30 @@ export class ComboboxDefault {
 The whole control is disabled and won't open.
 
 ```typescript
-import { ChangeDetectionStrategy, Component, signal } from '@angular/core';
-import { LucideCheck, LucideChevronDown } from '@lucide/angular';
 import { demoCombobox } from '../../storybook/styles';
 import { _importsCombobox } from '../index';
+import { ChangeDetectionStrategy, Component, signal } from '@angular/core';
+import { LucideCheck, LucideChevronDown } from '@lucide/angular';
 
 @Component({
     changeDetection: ChangeDetectionStrategy.Eager,
     selector: 'combobox-disabled',
     imports: [_importsCombobox, LucideChevronDown, LucideCheck],
     template: `
-        <div [(value)]="value" disabled rdxComboboxRoot>
+        <div disabled rdxComboboxRoot [(value)]="value">
             <div [class]="c.control">
-                <input [class]="c.input" rdxComboboxInput placeholder="Search a fruit…" aria-label="Fruit" />
-                <button [class]="c.trigger" rdxComboboxTrigger aria-label="Open">
+                <input rdxComboboxInput placeholder="Search a fruit…" aria-label="Fruit" [class]="c.input" />
+                <button rdxComboboxTrigger aria-label="Open" [class]="c.trigger">
                     <svg lucideChevronDown size="16"></svg>
                 </button>
             </div>
 
-            <div *rdxComboboxPortal [class]="c.positioner" rdxComboboxPositioner>
-                <div [class]="c.popup" rdxComboboxPopup>
-                    <div [class]="c.list" rdxComboboxList aria-label="Fruits">
+            <div *rdxComboboxPortal rdxComboboxPositioner [class]="c.positioner">
+                <div rdxComboboxPopup [class]="c.popup">
+                    <div rdxComboboxList aria-label="Fruits" [class]="c.list">
                         @for (fruit of fruits; track fruit) {
-                            <div [class]="c.item" [value]="fruit" rdxComboboxItem>
-                                <span [class]="c.itemIndicator" rdxComboboxItemIndicator>
+                            <div rdxComboboxItem [class]="c.item" [value]="fruit">
+                                <span rdxComboboxItemIndicator [class]="c.itemIndicator">
                                     <svg lucideCheck size="14"></svg>
                                 </span>
                                 {{ fruit }}
@@ -5639,10 +5639,10 @@ Options organized into sections with `RdxComboboxGroup` / `RdxComboboxGroupLabel
 heading automatically once all of its items are filtered out.
 
 ```typescript
-import { ChangeDetectionStrategy, Component, signal } from '@angular/core';
-import { LucideCheck, LucideChevronDown } from '@lucide/angular';
 import { demoCombobox } from '../../storybook/styles';
 import { _importsCombobox } from '../index';
+import { ChangeDetectionStrategy, Component, signal } from '@angular/core';
+import { LucideCheck, LucideChevronDown } from '@lucide/angular';
 
 /** Options organized into sections with `RdxComboboxGroup` / `RdxComboboxGroupLabel`. A group hides
  * its heading automatically when all of its items are filtered out. */
@@ -5651,22 +5651,22 @@ import { _importsCombobox } from '../index';
     selector: 'combobox-grouped',
     imports: [_importsCombobox, LucideChevronDown, LucideCheck],
     template: `
-        <div [(value)]="value" rdxComboboxRoot>
+        <div rdxComboboxRoot [(value)]="value">
             <div [class]="c.control">
-                <input [class]="c.input" rdxComboboxInput placeholder="Search produce…" aria-label="Produce" />
-                <button [class]="c.trigger" rdxComboboxTrigger aria-label="Open">
+                <input rdxComboboxInput placeholder="Search produce…" aria-label="Produce" [class]="c.input" />
+                <button rdxComboboxTrigger aria-label="Open" [class]="c.trigger">
                     <svg lucideChevronDown size="16"></svg>
                 </button>
             </div>
 
-            <div *rdxComboboxPortal [class]="c.positioner" rdxComboboxPositioner>
-                <div [class]="c.popup" rdxComboboxPopup>
-                    <div [class]="c.list" rdxComboboxList aria-label="Produce">
+            <div *rdxComboboxPortal rdxComboboxPositioner [class]="c.positioner">
+                <div rdxComboboxPopup [class]="c.popup">
+                    <div rdxComboboxList aria-label="Produce" [class]="c.list">
                         <div rdxComboboxGroup>
-                            <div [class]="c.groupLabel" rdxComboboxGroupLabel>Fruits</div>
+                            <div rdxComboboxGroupLabel [class]="c.groupLabel">Fruits</div>
                             @for (fruit of fruits; track fruit) {
-                                <div [class]="c.item" [value]="fruit" rdxComboboxItem>
-                                    <span [class]="c.itemIndicator" rdxComboboxItemIndicator>
+                                <div rdxComboboxItem [class]="c.item" [value]="fruit">
+                                    <span rdxComboboxItemIndicator [class]="c.itemIndicator">
                                         <svg lucideCheck size="14"></svg>
                                     </span>
                                     {{ fruit }}
@@ -5674,10 +5674,10 @@ import { _importsCombobox } from '../index';
                             }
                         </div>
                         <div rdxComboboxGroup>
-                            <div [class]="c.groupLabel" rdxComboboxGroupLabel>Vegetables</div>
+                            <div rdxComboboxGroupLabel [class]="c.groupLabel">Vegetables</div>
                             @for (vegetable of vegetables; track vegetable) {
-                                <div [class]="c.item" [value]="vegetable" rdxComboboxItem>
-                                    <span [class]="c.itemIndicator" rdxComboboxItemIndicator>
+                                <div rdxComboboxItem [class]="c.item" [value]="vegetable">
+                                    <span rdxComboboxItemIndicator [class]="c.itemIndicator">
                                         <svg lucideCheck size="14"></svg>
                                     </span>
                                     {{ vegetable }}
@@ -5685,7 +5685,7 @@ import { _importsCombobox } from '../index';
                             }
                         </div>
                     </div>
-                    <div [class]="c.empty" rdxComboboxEmpty>No produce found.</div>
+                    <div rdxComboboxEmpty [class]="c.empty">No produce found.</div>
                 </div>
             </div>
         </div>
@@ -5705,10 +5705,10 @@ A 2D grid (`grid`): wrap items in `RdxComboboxRow` and the list becomes `role="g
 `ArrowDown` move between rows keeping the column; `ArrowLeft` / `ArrowRight` move within a row.
 
 ```typescript
-import { ChangeDetectionStrategy, Component, signal } from '@angular/core';
-import { LucideChevronDown } from '@lucide/angular';
 import { cn, demoCombobox } from '../../storybook/styles';
 import { _importsCombobox } from '../index';
+import { ChangeDetectionStrategy, Component, signal } from '@angular/core';
+import { LucideChevronDown } from '@lucide/angular';
 
 /**
  * A 2D grid list (`grid`): `ArrowUp`/`ArrowDown` move between rows keeping the column, `ArrowLeft`/
@@ -5720,26 +5720,26 @@ import { _importsCombobox } from '../index';
     selector: 'combobox-grid',
     imports: [_importsCombobox, LucideChevronDown],
     template: `
-        <div [(value)]="value" grid rdxComboboxRoot>
+        <div grid rdxComboboxRoot [(value)]="value">
             <div [class]="c.control">
-                <input [class]="c.input" rdxComboboxInput placeholder="Pick a size…" aria-label="Size" />
-                <button [class]="c.trigger" rdxComboboxTrigger aria-label="Open">
+                <input rdxComboboxInput placeholder="Pick a size…" aria-label="Size" [class]="c.input" />
+                <button rdxComboboxTrigger aria-label="Open" [class]="c.trigger">
                     <svg lucideChevronDown size="16"></svg>
                 </button>
             </div>
 
-            <div *rdxComboboxPortal [class]="c.positioner" rdxComboboxPositioner>
-                <div [class]="c.popup" rdxComboboxPopup>
-                    <div [class]="list" rdxComboboxList aria-label="Sizes">
+            <div *rdxComboboxPortal rdxComboboxPositioner [class]="c.positioner">
+                <div rdxComboboxPopup [class]="c.popup">
+                    <div rdxComboboxList aria-label="Sizes" [class]="list">
                         @for (row of rows; track $index) {
-                            <div [class]="rowClass" rdxComboboxRow>
+                            <div rdxComboboxRow [class]="rowClass">
                                 @for (size of row; track size) {
-                                    <div [class]="cell" [value]="size" rdxComboboxItem>{{ size }}</div>
+                                    <div rdxComboboxItem [class]="cell" [value]="size">{{ size }}</div>
                                 }
                             </div>
                         }
                     </div>
-                    <div [class]="c.empty" rdxComboboxEmpty>No size found.</div>
+                    <div rdxComboboxEmpty [class]="c.empty">No size found.</div>
                 </div>
             </div>
         </div>
@@ -5769,24 +5769,24 @@ Multiple selection: picks become chips before the input, the popup stays open be
 and Backspace in an empty input removes the last chip.
 
 ```typescript
-import { ChangeDetectionStrategy, Component, signal } from '@angular/core';
-import { LucideCheck, LucideChevronDown, LucideX } from '@lucide/angular';
 import { cn, demoCombobox } from '../../storybook/styles';
 import { _importsCombobox } from '../index';
+import { ChangeDetectionStrategy, Component, signal } from '@angular/core';
+import { LucideCheck, LucideChevronDown, LucideX } from '@lucide/angular';
 
 @Component({
     changeDetection: ChangeDetectionStrategy.Eager,
     selector: 'combobox-multiple',
     imports: [_importsCombobox, LucideChevronDown, LucideCheck, LucideX],
     template: `
-        <div [(value)]="value" multiple rdxComboboxRoot>
-            <div [class]="control" rdxComboboxAnchor>
+        <div multiple rdxComboboxRoot [(value)]="value">
+            <div rdxComboboxAnchor [class]="control">
                 @if (value().length) {
-                    <div [class]="c.chips" rdxComboboxChips>
+                    <div rdxComboboxChips [class]="c.chips">
                         @for (fruit of value(); track fruit) {
-                            <span [class]="c.chip" [value]="fruit" rdxComboboxChip>
+                            <span rdxComboboxChip [class]="c.chip" [value]="fruit">
                                 {{ fruit }}
-                                <button [class]="c.chipRemove" rdxComboboxChipRemove aria-label="Remove">
+                                <button rdxComboboxChipRemove aria-label="Remove" [class]="c.chipRemove">
                                     <svg lucideX size="12"></svg>
                                 </button>
                             </span>
@@ -5794,29 +5794,29 @@ import { _importsCombobox } from '../index';
                     </div>
                 }
                 <input
-                    [class]="c.inputInline"
-                    [placeholder]="value().length ? '' : 'Add fruits…'"
                     rdxComboboxInput
                     aria-label="Fruits"
+                    [class]="c.inputInline"
+                    [placeholder]="value().length ? '' : 'Add fruits…'"
                 />
-                <button [class]="c.trigger" rdxComboboxTrigger aria-label="Open">
+                <button rdxComboboxTrigger aria-label="Open" [class]="c.trigger">
                     <svg lucideChevronDown size="16"></svg>
                 </button>
             </div>
 
-            <div *rdxComboboxPortal [class]="c.positioner" rdxComboboxPositioner>
-                <div [class]="c.popup" rdxComboboxPopup>
-                    <div [class]="c.list" rdxComboboxList aria-label="Fruits">
+            <div *rdxComboboxPortal rdxComboboxPositioner [class]="c.positioner">
+                <div rdxComboboxPopup [class]="c.popup">
+                    <div rdxComboboxList aria-label="Fruits" [class]="c.list">
                         @for (fruit of fruits; track fruit) {
-                            <div [class]="c.item" [value]="fruit" rdxComboboxItem>
-                                <span [class]="c.itemIndicator" rdxComboboxItemIndicator>
+                            <div rdxComboboxItem [class]="c.item" [value]="fruit">
+                                <span rdxComboboxItemIndicator [class]="c.itemIndicator">
                                     <svg lucideCheck size="14"></svg>
                                 </span>
                                 {{ fruit }}
                             </div>
                         }
                     </div>
-                    <div [class]="c.empty" rdxComboboxEmpty>No fruit found.</div>
+                    <div rdxComboboxEmpty [class]="c.empty">No fruit found.</div>
                 </div>
             </div>
         </div>
@@ -5837,10 +5837,10 @@ Nothing loads until the user types — `RdxComboboxStatus` shows the "start typi
 loading / counts, while the just-selected item is kept available so it survives new result streams.
 
 ```typescript
-import { ChangeDetectionStrategy, Component, computed, signal } from '@angular/core';
-import { LucideCheck, LucideChevronDown, LucideX } from '@lucide/angular';
 import { cn, demoCombobox } from '../../storybook/styles';
 import { _importsCombobox } from '../index';
+import { ChangeDetectionStrategy, Component, computed, signal } from '@angular/core';
+import { LucideCheck, LucideChevronDown, LucideX } from '@lucide/angular';
 
 interface DirectoryUser {
     id: string;
@@ -5862,33 +5862,33 @@ interface DirectoryUser {
     imports: [_importsCombobox, LucideChevronDown, LucideCheck, LucideX],
     template: `
         <div
-            [(value)]="value"
+            isItemEqualToValue="id"
+            rdxComboboxRoot
             [items]="items()"
             [itemToStringLabel]="labelOf"
             [filter]="null"
+            [(value)]="value"
             (onValueChange)="onValueChange()"
             (onInputValueChange)="search($event.value)"
             (onOpenChangeComplete)="onOpenChangeComplete($event)"
-            isItemEqualToValue="id"
-            rdxComboboxRoot
         >
             <div class="flex flex-col gap-1">
                 <label class="text-foreground text-sm font-medium" for="async-reviewer">Assign reviewer</label>
                 <div [class]="c.control">
-                    <input id="async-reviewer" [class]="input" rdxComboboxInput placeholder="e.g. Michael" />
+                    <input id="async-reviewer" rdxComboboxInput placeholder="e.g. Michael" [class]="input" />
                     @if (value()) {
-                        <button [class]="c.clear" rdxComboboxClear aria-label="Clear selection">
+                        <button rdxComboboxClear aria-label="Clear selection" [class]="c.clear">
                             <svg lucideX size="14"></svg>
                         </button>
                     }
-                    <button [class]="c.trigger" rdxComboboxTrigger aria-label="Open">
+                    <button rdxComboboxTrigger aria-label="Open" [class]="c.trigger">
                         <svg lucideChevronDown size="16"></svg>
                     </button>
                 </div>
             </div>
 
-            <div *rdxComboboxPortal [class]="c.positioner" rdxComboboxPositioner>
-                <div [class]="c.popup" [attr.aria-busy]="loading() ? 'true' : null" rdxComboboxPopup>
+            <div *rdxComboboxPortal rdxComboboxPositioner [class]="c.positioner">
+                <div rdxComboboxPopup [class]="c.popup" [attr.aria-busy]="loading() ? 'true' : null">
                     <div rdxComboboxStatus>
                         @if (loading()) {
                             <div class="text-muted-foreground flex items-center gap-2 px-2 py-1.5 text-sm">
@@ -5904,12 +5904,12 @@ interface DirectoryUser {
                     </div>
 
                     @if (emptyMessage(); as message) {
-                        <div [class]="c.empty" rdxComboboxEmpty>{{ message }}</div>
+                        <div rdxComboboxEmpty [class]="c.empty">{{ message }}</div>
                     }
 
-                    <div [class]="c.list" rdxComboboxList aria-label="People">
+                    <div rdxComboboxList aria-label="People" [class]="c.list">
                         @for (user of items(); track user.id) {
-                            <div [class]="item" [value]="user" [textValue]="user.name" rdxComboboxItem>
+                            <div rdxComboboxItem [class]="item" [value]="user" [textValue]="user.name">
                                 <span
                                     class="col-start-1 mt-0.5 flex size-3.5 items-center justify-center"
                                     rdxComboboxItemIndicator
@@ -6148,10 +6148,10 @@ External filtering combined with `multiple` — nothing loads until the user typ
 chips, and already-selected people stay available as new results stream in.
 
 ```typescript
-import { ChangeDetectionStrategy, Component, computed, signal } from '@angular/core';
-import { LucideCheck, LucideX } from '@lucide/angular';
 import { cn, demoCombobox } from '../../storybook/styles';
 import { _importsCombobox } from '../index';
+import { ChangeDetectionStrategy, Component, computed, signal } from '@angular/core';
+import { LucideCheck, LucideX } from '@lucide/angular';
 
 interface DirectoryUser {
     id: string;
@@ -6173,25 +6173,25 @@ interface DirectoryUser {
     imports: [_importsCombobox, LucideCheck, LucideX],
     template: `
         <div
-            [(value)]="value"
+            multiple
+            rdxComboboxRoot
             [items]="items()"
             [itemToStringLabel]="labelOf"
             [filter]="null"
+            [(value)]="value"
             (onValueChange)="onValueChange($event.value)"
             (onInputValueChange)="search($event.value)"
             (onOpenChangeComplete)="onOpenChangeComplete($event)"
-            multiple
-            rdxComboboxRoot
         >
             <div class="flex flex-col gap-1">
                 <label class="text-foreground text-sm font-medium" for="async-reviewers">Assign reviewers</label>
-                <div [class]="control" rdxComboboxAnchor>
+                <div rdxComboboxAnchor [class]="control">
                     @if (value().length) {
-                        <div [class]="c.chips" rdxComboboxChips>
+                        <div rdxComboboxChips [class]="c.chips">
                             @for (user of value(); track user.id) {
-                                <span [class]="c.chip" [value]="user" rdxComboboxChip>
+                                <span rdxComboboxChip [class]="c.chip" [value]="user">
                                     {{ user.name }}
-                                    <button [class]="c.chipRemove" rdxComboboxChipRemove aria-label="Remove">
+                                    <button rdxComboboxChipRemove aria-label="Remove" [class]="c.chipRemove">
                                         <svg lucideX size="12"></svg>
                                     </button>
                                 </span>
@@ -6200,15 +6200,15 @@ interface DirectoryUser {
                     }
                     <input
                         id="async-reviewers"
+                        rdxComboboxInput
                         [class]="c.inputInline"
                         [placeholder]="value().length ? '' : 'e.g. Michael'"
-                        rdxComboboxInput
                     />
                 </div>
             </div>
 
-            <div *rdxComboboxPortal [class]="c.positioner" rdxComboboxPositioner>
-                <div [class]="c.popup" [attr.aria-busy]="loading() ? 'true' : null" rdxComboboxPopup>
+            <div *rdxComboboxPortal rdxComboboxPositioner [class]="c.positioner">
+                <div rdxComboboxPopup [class]="c.popup" [attr.aria-busy]="loading() ? 'true' : null">
                     <div rdxComboboxStatus>
                         @if (loading()) {
                             <div class="text-muted-foreground flex items-center gap-2 px-2 py-1.5 text-sm">
@@ -6224,12 +6224,12 @@ interface DirectoryUser {
                     </div>
 
                     @if (emptyMessage(); as message) {
-                        <div [class]="c.empty" rdxComboboxEmpty>{{ message }}</div>
+                        <div rdxComboboxEmpty [class]="c.empty">{{ message }}</div>
                     }
 
-                    <div [class]="c.list" rdxComboboxList aria-label="People">
+                    <div rdxComboboxList aria-label="People" [class]="c.list">
                         @for (user of items(); track user.id) {
-                            <div [class]="item" [value]="user" [textValue]="user.name" rdxComboboxItem>
+                            <div rdxComboboxItem [class]="item" [value]="user" [textValue]="user.name">
                                 <span
                                     class="col-start-1 mt-0.5 flex size-3.5 items-center justify-center"
                                     rdxComboboxItemIndicator
@@ -6482,11 +6482,11 @@ appears; choosing it opens a modal dialog (prefilled with the query) to confirm
 is then added and selected — mirroring the Base UI pattern.
 
 ```typescript
+import { cn, demoButton, demoCombobox, demoDialog } from '../../storybook/styles';
+import { _importsCombobox } from '../index';
 import { ChangeDetectionStrategy, Component, computed, signal } from '@angular/core';
 import { LucideCheck, LucideChevronDown, LucidePlus, LucideX } from '@lucide/angular';
 import { dialogImports } from '@radix-ng/primitives/dialog';
-import { cn, demoButton, demoCombobox, demoDialog } from '../../storybook/styles';
-import { _importsCombobox } from '../index';
 
 /** Sentinel value for the "create" row, intercepted in `onValueChange`. */
 const CREATE = '__rdx_create__';
@@ -6502,20 +6502,20 @@ const CREATE = '__rdx_create__';
     imports: [_importsCombobox, ...dialogImports, LucideChevronDown, LucideCheck, LucidePlus, LucideX],
     template: `
         <div
+            multiple
+            rdxComboboxRoot
             [(value)]="value"
             [(open)]="open"
             (onInputValueChange)="query.set($event.value)"
             (onValueChange)="onValueChange($event.value)"
-            multiple
-            rdxComboboxRoot
         >
-            <div [class]="control" rdxComboboxAnchor>
+            <div rdxComboboxAnchor [class]="control">
                 @if (value().length) {
-                    <div [class]="c.chips" rdxComboboxChips>
+                    <div rdxComboboxChips [class]="c.chips">
                         @for (label of value(); track label) {
-                            <span [class]="c.chip" [value]="label" rdxComboboxChip>
+                            <span rdxComboboxChip [class]="c.chip" [value]="label">
                                 {{ label }}
-                                <button [class]="c.chipRemove" rdxComboboxChipRemove aria-label="Remove">
+                                <button rdxComboboxChipRemove aria-label="Remove" [class]="c.chipRemove">
                                     <svg lucideX size="12"></svg>
                                 </button>
                             </span>
@@ -6523,29 +6523,29 @@ const CREATE = '__rdx_create__';
                     </div>
                 }
                 <input
-                    [class]="c.inputInline"
-                    [placeholder]="value().length ? '' : 'e.g. bug'"
                     rdxComboboxInput
                     aria-label="Labels"
+                    [class]="c.inputInline"
+                    [placeholder]="value().length ? '' : 'e.g. bug'"
                 />
-                <button [class]="c.trigger" rdxComboboxTrigger aria-label="Open">
+                <button rdxComboboxTrigger aria-label="Open" [class]="c.trigger">
                     <svg lucideChevronDown size="16"></svg>
                 </button>
             </div>
 
-            <div *rdxComboboxPortal [class]="c.positioner" rdxComboboxPositioner>
-                <div [class]="c.popup" rdxComboboxPopup>
-                    <div [class]="c.list" rdxComboboxList aria-label="Labels">
+            <div *rdxComboboxPortal rdxComboboxPositioner [class]="c.positioner">
+                <div rdxComboboxPopup [class]="c.popup">
+                    <div rdxComboboxList aria-label="Labels" [class]="c.list">
                         @for (label of options(); track label) {
-                            <div [class]="c.item" [value]="label" rdxComboboxItem>
-                                <span [class]="c.itemIndicator" rdxComboboxItemIndicator>
+                            <div rdxComboboxItem [class]="c.item" [value]="label">
+                                <span rdxComboboxItemIndicator [class]="c.itemIndicator">
                                     <svg lucideCheck size="14"></svg>
                                 </span>
                                 {{ label }}
                             </div>
                         }
                         @if (showCreate()) {
-                            <div [class]="c.item" [value]="CREATE" [textValue]="query()" rdxComboboxItem>
+                            <div rdxComboboxItem [class]="c.item" [value]="CREATE" [textValue]="query()">
                                 <span [class]="c.itemIndicator">
                                     <svg lucidePlus size="14"></svg>
                                 </span>
@@ -6553,30 +6553,30 @@ const CREATE = '__rdx_create__';
                             </div>
                         }
                     </div>
-                    <div [class]="c.empty" rdxComboboxEmpty>No labels found.</div>
+                    <div rdxComboboxEmpty [class]="c.empty">No labels found.</div>
                 </div>
             </div>
         </div>
 
-        <div [(open)]="dialogOpen" rdxDialogRoot>
+        <div rdxDialogRoot [(open)]="dialogOpen">
             <ng-template rdxDialogPortal>
-                <div [class]="cn(d.backdrop, d.backdropAnimated)" rdxDialogBackdrop></div>
-                <div [class]="cn(d.popup, d.popupAnimated)" rdxDialogPopup>
-                    <h2 [class]="d.title" rdxDialogTitle>Create new label</h2>
-                    <p [class]="d.description" rdxDialogDescription>Add a new label to select.</p>
+                <div rdxDialogBackdrop [class]="cn(d.backdrop, d.backdropAnimated)"></div>
+                <div rdxDialogPopup [class]="cn(d.popup, d.popupAnimated)">
+                    <h2 rdxDialogTitle [class]="d.title">Create new label</h2>
+                    <p rdxDialogDescription [class]="d.description">Add a new label to select.</p>
                     <form (submit)="confirmCreate($event)">
                         <input
+                            placeholder="Label name"
+                            aria-label="Label name"
                             [class]="dialogInput"
                             [value]="newLabel()"
                             (input)="newLabel.set($any($event.target).value)"
-                            placeholder="Label name"
-                            aria-label="Label name"
                         />
                         <div [class]="d.footer">
-                            <button [class]="cn(b.base, b.outline, b.size.sm)" type="button" rdxDialogClose>
+                            <button type="button" rdxDialogClose [class]="cn(b.base, b.outline, b.size.sm)">
                                 Cancel
                             </button>
-                            <button [class]="cn(b.base, b.primary, b.size.sm)" type="submit">Create</button>
+                            <button type="submit" [class]="cn(b.base, b.primary, b.size.sm)">Create</button>
                         </div>
                     </form>
                 </div>
@@ -6645,10 +6645,10 @@ popup. Put `rdxComboboxAnchor` on the trigger so the popup anchors to it; the in
 the popup opens.
 
 ```typescript
-import { ChangeDetectionStrategy, Component, signal } from '@angular/core';
-import { LucideCheck, LucideChevronDown } from '@lucide/angular';
 import { demoCombobox } from '../../storybook/styles';
 import { _importsCombobox } from '../index';
+import { ChangeDetectionStrategy, Component, signal } from '@angular/core';
+import { LucideCheck, LucideChevronDown } from '@lucide/angular';
 
 /**
  * A select-like pattern where the trigger shows the current value and the **search input lives inside
@@ -6660,30 +6660,30 @@ import { _importsCombobox } from '../index';
     selector: 'combobox-input-in-popup',
     imports: [_importsCombobox, LucideChevronDown, LucideCheck],
     template: `
-        <div class="flex flex-col items-start gap-1" [(value)]="value" rdxComboboxRoot>
+        <div class="flex flex-col items-start gap-1" rdxComboboxRoot [(value)]="value">
             <span class="text-foreground text-sm font-medium" rdxComboboxLabel>Fruit</span>
-            <button [class]="c.selectTrigger" rdxComboboxTrigger rdxComboboxAnchor>
+            <button rdxComboboxTrigger rdxComboboxAnchor [class]="c.selectTrigger">
                 <span #selectedValue="rdxComboboxValue" rdxComboboxValue placeholder="Select a fruit">
                     {{ selectedValue.slotText() }}
                 </span>
                 <svg lucideChevronDown size="16"></svg>
             </button>
 
-            <div *rdxComboboxPortal [class]="c.positioner" rdxComboboxPositioner>
-                <div [class]="c.popup + ' p-0'" rdxComboboxPopup>
+            <div *rdxComboboxPortal rdxComboboxPositioner [class]="c.positioner">
+                <div rdxComboboxPopup [class]="c.popup + ' p-0'">
                     <div [class]="c.searchHeader">
-                        <input [class]="c.popupInput" rdxComboboxInput placeholder="Search…" aria-label="Fruit" />
+                        <input rdxComboboxInput placeholder="Search…" aria-label="Fruit" [class]="c.popupInput" />
                     </div>
-                    <div [class]="c.list + ' p-1'" rdxComboboxList aria-label="Fruits">
+                    <div rdxComboboxList aria-label="Fruits" [class]="c.list + ' p-1'">
                         @for (fruit of fruits; track fruit) {
-                            <div [class]="c.item" [value]="fruit" rdxComboboxItem>
-                                <span [class]="c.itemIndicator" rdxComboboxItemIndicator>
+                            <div rdxComboboxItem [class]="c.item" [value]="fruit">
+                                <span rdxComboboxItemIndicator [class]="c.itemIndicator">
                                     <svg lucideCheck size="14"></svg>
                                 </span>
                                 {{ fruit }}
                             </div>
                         }
-                        <div [class]="c.empty" rdxComboboxEmpty>No fruit found.</div>
+                        <div rdxComboboxEmpty [class]="c.empty">No fruit found.</div>
                     </div>
                 </div>
             </div>
@@ -6704,10 +6704,10 @@ as an activation signal and (by default) fills the input. Paired with `autoHighl
 first match is always ready for `Enter`.
 
 ```typescript
-import { ChangeDetectionStrategy, Component, signal } from '@angular/core';
-import { LucideArrowRight } from '@lucide/angular';
 import { demoCombobox } from '../../storybook/styles';
 import { _importsCombobox } from '../index';
+import { ChangeDetectionStrategy, Component, signal } from '@angular/core';
+import { LucideArrowRight } from '@lucide/angular';
 
 /**
  * A command/search palette: `selectionMode="none"` (no value is committed — it filters and runs an
@@ -6720,20 +6720,20 @@ import { _importsCombobox } from '../index';
     template: `
         <div
             class="flex w-64 flex-col gap-2"
-            (onValueChange)="run($event.value)"
             selectionMode="none"
             autoHighlight="always"
             rdxComboboxRoot
+            (onValueChange)="run($event.value)"
         >
             <div [class]="c.control">
-                <input [class]="c.input" rdxComboboxInput placeholder="Run a command…" aria-label="Command" />
+                <input rdxComboboxInput placeholder="Run a command…" aria-label="Command" [class]="c.input" />
             </div>
 
-            <div *rdxComboboxPortal [class]="c.positioner" rdxComboboxPositioner>
-                <div [class]="c.popup" rdxComboboxPopup>
-                    <div [class]="c.list" rdxComboboxList aria-label="Commands">
+            <div *rdxComboboxPortal rdxComboboxPositioner [class]="c.positioner">
+                <div rdxComboboxPopup [class]="c.popup">
+                    <div rdxComboboxList aria-label="Commands" [class]="c.list">
                         @for (command of commands; track command) {
-                            <div [class]="c.item" [value]="command" rdxComboboxItem>
+                            <div rdxComboboxItem [class]="c.item" [value]="command">
                                 <span [class]="c.itemIndicator">
                                     <svg lucideArrowRight size="14"></svg>
                                 </span>
@@ -6741,7 +6741,7 @@ import { _importsCombobox } from '../index';
                             </div>
                         }
                     </div>
-                    <div [class]="c.empty" rdxComboboxEmpty>No commands.</div>
+                    <div rdxComboboxEmpty [class]="c.empty">No commands.</div>
                 </div>
             </div>
 
@@ -6770,10 +6770,10 @@ With `modal`, page scroll is locked and content outside the popup is inert while
 clicking it dismisses.
 
 ```typescript
-import { ChangeDetectionStrategy, Component, signal } from '@angular/core';
-import { LucideCheck, LucideChevronDown } from '@lucide/angular';
 import { demoCombobox } from '../../storybook/styles';
 import { _importsCombobox } from '../index';
+import { ChangeDetectionStrategy, Component, signal } from '@angular/core';
+import { LucideCheck, LucideChevronDown } from '@lucide/angular';
 
 /**
  * Modal combobox: while open, page scroll is locked and content outside the popup is inert. A
@@ -6784,29 +6784,29 @@ import { _importsCombobox } from '../index';
     selector: 'combobox-modal',
     imports: [_importsCombobox, LucideChevronDown, LucideCheck],
     template: `
-        <div [(value)]="value" modal rdxComboboxRoot>
+        <div modal rdxComboboxRoot [(value)]="value">
             <div [class]="c.control">
-                <input [class]="c.input" rdxComboboxInput placeholder="Search a fruit…" aria-label="Fruit" />
-                <button [class]="c.trigger" rdxComboboxTrigger aria-label="Open">
+                <input rdxComboboxInput placeholder="Search a fruit…" aria-label="Fruit" [class]="c.input" />
+                <button rdxComboboxTrigger aria-label="Open" [class]="c.trigger">
                     <svg lucideChevronDown size="16"></svg>
                 </button>
             </div>
 
             <ng-template rdxComboboxPortal>
-                <div [class]="c.backdrop" rdxComboboxBackdrop></div>
-                <div [class]="c.positioner" rdxComboboxPositioner>
-                    <div [class]="c.popup" rdxComboboxPopup>
-                        <div [class]="c.list" rdxComboboxList aria-label="Fruits">
+                <div rdxComboboxBackdrop [class]="c.backdrop"></div>
+                <div rdxComboboxPositioner [class]="c.positioner">
+                    <div rdxComboboxPopup [class]="c.popup">
+                        <div rdxComboboxList aria-label="Fruits" [class]="c.list">
                             @for (fruit of fruits; track fruit) {
-                                <div [class]="c.item" [value]="fruit" rdxComboboxItem>
-                                    <span [class]="c.itemIndicator" rdxComboboxItemIndicator>
+                                <div rdxComboboxItem [class]="c.item" [value]="fruit">
+                                    <span rdxComboboxItemIndicator [class]="c.itemIndicator">
                                         <svg lucideCheck size="14"></svg>
                                     </span>
                                     {{ fruit }}
                                 </div>
                             }
                         </div>
-                        <div [class]="c.empty" rdxComboboxEmpty>No fruit found.</div>
+                        <div rdxComboboxEmpty [class]="c.empty">No fruit found.</div>
                     </div>
                 </div>
             </ng-template>
@@ -6841,10 +6841,10 @@ protected onOpenChange(change: { open: boolean; eventDetails: { cancel(): void }
 Live demo:
 
 ```typescript
-import { ChangeDetectionStrategy, Component, signal } from '@angular/core';
-import { LucideCheck, LucideChevronDown } from '@lucide/angular';
 import { demoCombobox } from '../../storybook/styles';
 import { _importsCombobox, RdxComboboxOpenChange } from '../index';
+import { ChangeDetectionStrategy, Component, signal } from '@angular/core';
+import { LucideCheck, LucideChevronDown } from '@lucide/angular';
 
 interface ComboboxOpenChangeLogEntry {
     label: string;
@@ -6863,44 +6863,44 @@ interface ComboboxOpenChangeLogEntry {
                 <div class="flex flex-col gap-3">
                     <div
                         #root="rdxComboboxRoot"
+                        rdxComboboxRoot
                         [(open)]="open"
                         [(value)]="value"
                         (onOpenChange)="handleOpenChange($event)"
-                        rdxComboboxRoot
                     >
                         <div [class]="c.control">
                             <input
-                                [class]="c.input"
                                 rdxComboboxInput
                                 placeholder="Search a framework…"
                                 aria-label="Framework"
+                                [class]="c.input"
                             />
-                            <button [class]="c.trigger" rdxComboboxTrigger aria-label="Open">
+                            <button rdxComboboxTrigger aria-label="Open" [class]="c.trigger">
                                 <svg lucideChevronDown size="16"></svg>
                             </button>
                         </div>
 
-                        <div *rdxComboboxPortal [class]="c.positioner" rdxComboboxPositioner>
-                            <div [class]="c.popup" rdxComboboxPopup>
-                                <div [class]="c.list" rdxComboboxList aria-label="Frameworks">
+                        <div *rdxComboboxPortal rdxComboboxPositioner [class]="c.positioner">
+                            <div rdxComboboxPopup [class]="c.popup">
+                                <div rdxComboboxList aria-label="Frameworks" [class]="c.list">
                                     @for (framework of frameworks; track framework) {
-                                        <div [class]="c.item" [value]="framework" rdxComboboxItem>
-                                            <span [class]="c.itemIndicator" rdxComboboxItemIndicator>
+                                        <div rdxComboboxItem [class]="c.item" [value]="framework">
+                                            <span rdxComboboxItemIndicator [class]="c.itemIndicator">
                                                 <svg lucideCheck size="14"></svg>
                                             </span>
                                             {{ framework }}
                                         </div>
                                     }
                                 </div>
-                                <div [class]="c.empty" rdxComboboxEmpty>No match found.</div>
+                                <div rdxComboboxEmpty [class]="c.empty">No match found.</div>
                             </div>
                         </div>
 
                         <div class="grid gap-2 pt-3">
                             <button
                                 class="border-border bg-background text-foreground hover:bg-muted inline-flex h-8 items-center justify-between rounded-md border px-3 text-xs"
-                                (click)="cancelClose.update((value) => !value)"
                                 type="button"
+                                (click)="cancelClose.update((value) => !value)"
                             >
                                 <span>Cancel close</span>
                                 <span class="text-muted-foreground">{{ cancelClose() ? 'on' : 'off' }}</span>
@@ -6908,8 +6908,8 @@ interface ComboboxOpenChangeLogEntry {
 
                             <button
                                 class="border-border bg-background text-foreground hover:bg-muted inline-flex h-8 items-center justify-between rounded-md border px-3 text-xs"
-                                (click)="keepMountedOnClose.update((value) => !value)"
                                 type="button"
+                                (click)="keepMountedOnClose.update((value) => !value)"
                             >
                                 <span>Keep mounted on close</span>
                                 <span class="text-muted-foreground">{{ keepMountedOnClose() ? 'on' : 'off' }}</span>
@@ -6941,8 +6941,8 @@ interface ComboboxOpenChangeLogEntry {
                         </div>
                         <button
                             class="text-muted-foreground hover:text-foreground inline-flex h-7 items-center rounded-md px-2 text-xs"
-                            (click)="logs.set([])"
                             type="button"
+                            (click)="logs.set([])"
                         >
                             Clear
                         </button>
@@ -7016,11 +7016,11 @@ export class ComboboxOpenChange {
 The root is a `ControlValueAccessor`, so it binds to a `FormControl` like any other control.
 
 ```typescript
+import { demoCombobox } from '../../storybook/styles';
+import { _importsCombobox } from '../index';
 import { ChangeDetectionStrategy, Component } from '@angular/core';
 import { FormControl, ReactiveFormsModule } from '@angular/forms';
 import { LucideCheck, LucideChevronDown } from '@lucide/angular';
-import { demoCombobox } from '../../storybook/styles';
-import { _importsCombobox } from '../index';
 
 @Component({
     changeDetection: ChangeDetectionStrategy.Eager,
@@ -7028,27 +7028,27 @@ import { _importsCombobox } from '../index';
     imports: [_importsCombobox, ReactiveFormsModule, LucideChevronDown, LucideCheck],
     template: `
         <form class="flex flex-col gap-3">
-            <div [formControl]="fruit" rdxComboboxRoot>
+            <div rdxComboboxRoot [formControl]="fruit">
                 <div [class]="c.control">
-                    <input [class]="c.input" rdxComboboxInput placeholder="Pick a fruit…" aria-label="Fruit" />
-                    <button [class]="c.trigger" rdxComboboxTrigger aria-label="Open">
+                    <input rdxComboboxInput placeholder="Pick a fruit…" aria-label="Fruit" [class]="c.input" />
+                    <button rdxComboboxTrigger aria-label="Open" [class]="c.trigger">
                         <svg lucideChevronDown size="16"></svg>
                     </button>
                 </div>
 
-                <div *rdxComboboxPortal [class]="c.positioner" rdxComboboxPositioner>
-                    <div [class]="c.popup" rdxComboboxPopup>
-                        <div [class]="c.list" rdxComboboxList aria-label="Fruits">
+                <div *rdxComboboxPortal rdxComboboxPositioner [class]="c.positioner">
+                    <div rdxComboboxPopup [class]="c.popup">
+                        <div rdxComboboxList aria-label="Fruits" [class]="c.list">
                             @for (f of fruits; track f) {
-                                <div [class]="c.item" [value]="f" rdxComboboxItem>
-                                    <span [class]="c.itemIndicator" rdxComboboxItemIndicator>
+                                <div rdxComboboxItem [class]="c.item" [value]="f">
+                                    <span rdxComboboxItemIndicator [class]="c.itemIndicator">
                                         <svg lucideCheck size="14"></svg>
                                     </span>
                                     {{ f }}
                                 </div>
                             }
                         </div>
-                        <div [class]="c.empty" rdxComboboxEmpty>No fruit found.</div>
+                        <div rdxComboboxEmpty [class]="c.empty">No fruit found.</div>
                     </div>
                 </div>
             </div>
@@ -7073,11 +7073,11 @@ Bind the control's validity to `[invalid]` so the input reflects `data-invalid`
 error message and submit guard follow the standard reactive-forms pattern.
 
 ```typescript
+import { cn, demoButton, demoCombobox } from '../../storybook/styles';
+import { _importsCombobox } from '../index';
 import { ChangeDetectionStrategy, Component, signal } from '@angular/core';
 import { FormControl, ReactiveFormsModule, Validators } from '@angular/forms';
 import { LucideCheck, LucideChevronDown } from '@lucide/angular';
-import { cn, demoButton, demoCombobox } from '../../storybook/styles';
-import { _importsCombobox } from '../index';
 
 /**
  * Reactive forms with validation. The control's validity is bound to the combobox `[invalid]` input,
@@ -7090,27 +7090,27 @@ import { _importsCombobox } from '../index';
     imports: [_importsCombobox, ReactiveFormsModule, LucideChevronDown, LucideCheck],
     template: `
         <form class="flex flex-col gap-3" (ngSubmit)="onSubmit()">
-            <div [formControl]="fruit" [invalid]="showError()" rdxComboboxRoot>
+            <div rdxComboboxRoot [formControl]="fruit" [invalid]="showError()">
                 <div [class]="cn(c.control, showError() && 'border-destructive focus-within:ring-destructive')">
-                    <input [class]="c.input" rdxComboboxInput placeholder="Pick a fruit…" aria-label="Fruit" />
-                    <button [class]="c.trigger" rdxComboboxTrigger aria-label="Open">
+                    <input rdxComboboxInput placeholder="Pick a fruit…" aria-label="Fruit" [class]="c.input" />
+                    <button rdxComboboxTrigger aria-label="Open" [class]="c.trigger">
                         <svg lucideChevronDown size="16"></svg>
                     </button>
                 </div>
 
-                <div *rdxComboboxPortal [class]="c.positioner" rdxComboboxPositioner>
-                    <div [class]="c.popup" rdxComboboxPopup>
-                        <div [class]="c.list" rdxComboboxList aria-label="Fruits">
+                <div *rdxComboboxPortal rdxComboboxPositioner [class]="c.positioner">
+                    <div rdxComboboxPopup [class]="c.popup">
+                        <div rdxComboboxList aria-label="Fruits" [class]="c.list">
                             @for (f of fruits; track f) {
-                                <div [class]="c.item" [value]="f" rdxComboboxItem>
-                                    <span [class]="c.itemIndicator" rdxComboboxItemIndicator>
+                                <div rdxComboboxItem [class]="c.item" [value]="f">
+                                    <span rdxComboboxItemIndicator [class]="c.itemIndicator">
                                         <svg lucideCheck size="14"></svg>
                                     </span>
                                     {{ f }}
                                 </div>
                             }
                         </div>
-                        <div [class]="c.empty" rdxComboboxEmpty>No fruit found.</div>
+                        <div rdxComboboxEmpty [class]="c.empty">No fruit found.</div>
                     </div>
                 </div>
             </div>
@@ -7119,7 +7119,7 @@ import { _importsCombobox } from '../index';
                 <p class="text-destructive text-sm">Please pick a fruit.</p>
             }
 
-            <button [class]="cn(b.base, b.primary, b.size.md, 'self-start')" type="submit">Submit</button>
+            <button type="submit" [class]="cn(b.base, b.primary, b.size.md, 'self-start')">Submit</button>
 
             @if (submitted()) {
                 <p class="text-muted-foreground text-sm">Submitted ✓</p>
@@ -7156,10 +7156,10 @@ export class ComboboxValidation {
 `RdxComboboxEmpty` shows only when no item matches the query.
 
 ```typescript
-import { ChangeDetectionStrategy, Component, signal } from '@angular/core';
-import { LucideCheck, LucideChevronDown } from '@lucide/angular';
 import { demoCombobox } from '../../storybook/styles';
 import { _importsCombobox } from '../index';
+import { ChangeDetectionStrategy, Component, signal } from '@angular/core';
+import { LucideCheck, LucideChevronDown } from '@lucide/angular';
 
 /**
  * `RdxComboboxEmpty` renders only when no item matches the query — type something like "zzz" to see
@@ -7170,27 +7170,27 @@ import { _importsCombobox } from '../index';
     selector: 'combobox-empty',
     imports: [_importsCombobox, LucideChevronDown, LucideCheck],
     template: `
-        <div [(value)]="value" rdxComboboxRoot>
+        <div rdxComboboxRoot [(value)]="value">
             <div [class]="c.control">
-                <input [class]="c.input" rdxComboboxInput placeholder="Try typing 'zzz'…" aria-label="Fruit" />
-                <button [class]="c.trigger" rdxComboboxTrigger aria-label="Open">
+                <input rdxComboboxInput placeholder="Try typing 'zzz'…" aria-label="Fruit" [class]="c.input" />
+                <button rdxComboboxTrigger aria-label="Open" [class]="c.trigger">
                     <svg lucideChevronDown size="16"></svg>
                 </button>
             </div>
 
-            <div *rdxComboboxPortal [class]="c.positioner" rdxComboboxPositioner>
-                <div [class]="c.popup" rdxComboboxPopup>
-                    <div [class]="c.list" rdxComboboxList aria-label="Fruits">
+            <div *rdxComboboxPortal rdxComboboxPositioner [class]="c.positioner">
+                <div rdxComboboxPopup [class]="c.popup">
+                    <div rdxComboboxList aria-label="Fruits" [class]="c.list">
                         @for (fruit of fruits; track fruit) {
-                            <div [class]="c.item" [value]="fruit" rdxComboboxItem>
-                                <span [class]="c.itemIndicator" rdxComboboxItemIndicator>
+                            <div rdxComboboxItem [class]="c.item" [value]="fruit">
+                                <span rdxComboboxItemIndicator [class]="c.itemIndicator">
                                     <svg lucideCheck size="14"></svg>
                                 </span>
                                 {{ fruit }}
                             </div>
                         }
                     </div>
-                    <div [class]="c.empty" rdxComboboxEmpty>No fruit matches your search.</div>
+                    <div rdxComboboxEmpty [class]="c.empty">No fruit matches your search.</div>
                 </div>
             </div>
         </div>
@@ -7225,12 +7225,12 @@ Then drive a scroll container with `injectVirtualizer`, render only `getVirtualI
 row's `[index]` to the virtual item's index — exactly as in the example's "Show code".
 
 ```typescript
-import { ChangeDetectionStrategy, Component, ElementRef, signal, viewChild } from '@angular/core';
-import { LucideCheck } from '@lucide/angular';
-import { injectVirtualizer } from '@tanstack/angular-virtual';
 import { cn, demoCombobox } from '../../storybook/styles';
 import { _importsCombobox } from '../index';
 import { ComboboxItemHighlightedDetails, RdxComboboxRoot } from '../src/combobox-root';
+import { ChangeDetectionStrategy, Component, ElementRef, signal, viewChild } from '@angular/core';
+import { LucideCheck } from '@lucide/angular';
+import { injectVirtualizer } from '@tanstack/angular-virtual';
 
 /**
  * Externally virtualized list of 10,000 items. The combobox owns filtering and index navigation
@@ -7245,32 +7245,32 @@ import { ComboboxItemHighlightedDetails, RdxComboboxRoot } from '../src/combobox
     template: `
         <div
             #cmb="rdxComboboxRoot"
-            [(value)]="value"
-            [items]="items"
-            (onItemHighlighted)="onHighlight($event)"
             virtualized
             rdxComboboxRoot
+            [items]="items"
+            [(value)]="value"
+            (onItemHighlighted)="onHighlight($event)"
         >
             <div [class]="c.control">
-                <input [class]="c.input" rdxComboboxInput placeholder="Search 10,000 items…" aria-label="Item" />
+                <input rdxComboboxInput placeholder="Search 10,000 items…" aria-label="Item" [class]="c.input" />
             </div>
 
-            <div *rdxComboboxPortal [class]="c.positioner" rdxComboboxPositioner>
-                <div [class]="popup" rdxComboboxPopup>
-                    <div [class]="c.empty" rdxComboboxEmpty>No items found.</div>
-                    <div [class]="c.list" rdxComboboxList aria-label="Items">
+            <div *rdxComboboxPortal rdxComboboxPositioner [class]="c.positioner">
+                <div rdxComboboxPopup [class]="popup">
+                    <div rdxComboboxEmpty [class]="c.empty">No items found.</div>
+                    <div rdxComboboxList aria-label="Items" [class]="c.list">
                         <div #scroll [class]="scroller">
                             <div [class]="spacer" [style.height.px]="virtualizer.getTotalSize()">
                                 @for (row of virtualizer.getVirtualItems(); track row.key) {
                                     <div
+                                        rdxComboboxItem
                                         [class]="item"
                                         [value]="cmb.filteredItems()[row.index]"
                                         [index]="row.index"
                                         [style.height.px]="row.size"
                                         [style.transform]="'translateY(' + row.start + 'px)'"
-                                        rdxComboboxItem
                                     >
-                                        <span [class]="c.itemIndicator" rdxComboboxItemIndicator>
+                                        <span rdxComboboxItemIndicator [class]="c.itemIndicator">
                                             <svg lucideCheck size="14"></svg>
                                         </span>
                                         {{ cmb.filteredItems()[row.index] }}
@@ -7465,11 +7465,11 @@ of a button that anchors the popup to itself, `rdxContextMenuTrigger` opens the
 position on a right click or long-press.
 
 ```typescript
+import { cn, demoMenu } from '../../storybook/styles';
 import { ChangeDetectionStrategy, Component, signal } from '@angular/core';
 import { LucideCheck, LucideDot } from '@lucide/angular';
 import { RdxContextMenuModule } from '@radix-ng/primitives/context-menu';
 import { RdxMenuModule } from '@radix-ng/primitives/menu';
-import { cn, demoMenu } from '../../storybook/styles';
 
 @Component({
     selector: 'rdx-context-menu-default',
@@ -7478,83 +7478,83 @@ import { cn, demoMenu } from '../../storybook/styles';
     template: `
         <ng-container #root="rdxContextMenuRoot" rdxContextMenuRoot>
             <div
+                rdxContextMenuTrigger
                 [class]="
                     cn(
                         'border-border text-muted-foreground flex h-[150px] w-[300px] items-center justify-center rounded-md border-2 border-dashed text-sm select-none',
                         'data-[popup-open]:bg-muted data-[popup-open]:border-solid'
                     )
                 "
-                rdxContextMenuTrigger
             >
                 Right click here
             </div>
 
-            <div *rdxMenuPortal [class]="m.positioner" rdxMenuPositioner>
-                <div [class]="m.popup" rdxMenuPopup>
-                    <button [class]="m.item" rdxMenuItem>
+            <div *rdxMenuPortal rdxMenuPositioner [class]="m.positioner">
+                <div rdxMenuPopup [class]="m.popup">
+                    <button rdxMenuItem [class]="m.item">
                         Back
                         <span [class]="shortcut">⌘ [</span>
                     </button>
-                    <button [class]="m.item" [disabled]="true" rdxMenuItem>
+                    <button rdxMenuItem [class]="m.item" [disabled]="true">
                         Forward
                         <span [class]="shortcut">⌘ ]</span>
                     </button>
-                    <button [class]="m.item" rdxMenuItem>
+                    <button rdxMenuItem [class]="m.item">
                         Reload
                         <span [class]="shortcut">⌘ R</span>
                     </button>
 
                     <!-- More Tools submenu -->
                     <ng-container #moreSub="rdxMenuRoot" rdxMenuRoot>
-                        <button [class]="cn(m.item, 'justify-between')" rdxMenuSubTrigger>
+                        <button rdxMenuSubTrigger [class]="cn(m.item, 'justify-between')">
                             More Tools
                             <span class="text-muted-foreground text-xs">›</span>
                         </button>
                         <div
                             *rdxMenuPortal
-                            [class]="m.positioner"
                             side="right"
                             align="start"
                             sideOffset="4"
                             rdxMenuPositioner
+                            [class]="m.positioner"
                         >
-                            <div [class]="m.popup" rdxMenuPopup>
-                                <button [class]="m.item" rdxMenuItem>Save Page As…</button>
-                                <button [class]="m.item" rdxMenuItem>Create Shortcut…</button>
-                                <button [class]="m.item" rdxMenuItem>Name Window…</button>
+                            <div rdxMenuPopup [class]="m.popup">
+                                <button rdxMenuItem [class]="m.item">Save Page As…</button>
+                                <button rdxMenuItem [class]="m.item">Create Shortcut…</button>
+                                <button rdxMenuItem [class]="m.item">Name Window…</button>
                             </div>
                         </div>
                     </ng-container>
 
-                    <div [class]="m.separator" rdxMenuSeparator></div>
+                    <div rdxMenuSeparator [class]="m.separator"></div>
 
-                    <label [(checked)]="showBookmarks" [class]="m.selectableItem" rdxMenuCheckboxItem>
-                        <span [class]="m.itemIndicator" rdxMenuCheckboxItemIndicator>
-                            <svg [size]="12" lucideCheck></svg>
+                    <label rdxMenuCheckboxItem [class]="m.selectableItem" [(checked)]="showBookmarks">
+                        <span rdxMenuCheckboxItemIndicator [class]="m.itemIndicator">
+                            <svg lucideCheck [size]="12"></svg>
                         </span>
                         Show Bookmarks
                         <span [class]="shortcut">⌘ B</span>
                     </label>
-                    <label [(checked)]="showFullUrls" [class]="m.selectableItem" rdxMenuCheckboxItem>
-                        <span [class]="m.itemIndicator" rdxMenuCheckboxItemIndicator>
-                            <svg [size]="12" lucideCheck></svg>
+                    <label rdxMenuCheckboxItem [class]="m.selectableItem" [(checked)]="showFullUrls">
+                        <span rdxMenuCheckboxItemIndicator [class]="m.itemIndicator">
+                            <svg lucideCheck [size]="12"></svg>
                         </span>
                         Show Full URLs
                     </label>
 
-                    <div [class]="m.separator" rdxMenuSeparator></div>
+                    <div rdxMenuSeparator [class]="m.separator"></div>
 
-                    <div [(value)]="person" rdxMenuRadioGroup>
-                        <div [class]="m.groupLabel" rdxMenuGroupLabel>People</div>
-                        <label [class]="m.selectableItem" value="pedro" rdxMenuRadioItem>
-                            <span [class]="m.itemIndicator" rdxMenuRadioItemIndicator>
-                                <svg [size]="10" strokeWidth="5" lucideDot></svg>
+                    <div rdxMenuRadioGroup [(value)]="person">
+                        <div rdxMenuGroupLabel [class]="m.groupLabel">People</div>
+                        <label value="pedro" rdxMenuRadioItem [class]="m.selectableItem">
+                            <span rdxMenuRadioItemIndicator [class]="m.itemIndicator">
+                                <svg strokeWidth="5" lucideDot [size]="10"></svg>
                             </span>
                             Pedro Duarte
                         </label>
-                        <label [class]="m.selectableItem" value="colm" rdxMenuRadioItem>
-                            <span [class]="m.itemIndicator" rdxMenuRadioItemIndicator>
-                                <svg [size]="10" strokeWidth="5" lucideDot></svg>
+                        <label value="colm" rdxMenuRadioItem [class]="m.selectableItem">
+                            <span rdxMenuRadioItemIndicator [class]="m.itemIndicator">
+                                <svg strokeWidth="5" lucideDot [size]="10"></svg>
                             </span>
                             Colm Tuite
                         </label>
@@ -7636,11 +7636,11 @@ A right-click area with shortcuts, a disabled item, a submenu, checkbox items, a
 Right-click the dashed area to open the menu at the pointer.
 
 ```typescript
+import { cn, demoMenu } from '../../storybook/styles';
 import { ChangeDetectionStrategy, Component, signal } from '@angular/core';
 import { LucideCheck, LucideDot } from '@lucide/angular';
 import { RdxContextMenuModule } from '@radix-ng/primitives/context-menu';
 import { RdxMenuModule } from '@radix-ng/primitives/menu';
-import { cn, demoMenu } from '../../storybook/styles';
 
 @Component({
     selector: 'rdx-context-menu-default',
@@ -7649,83 +7649,83 @@ import { cn, demoMenu } from '../../storybook/styles';
     template: `
         <ng-container #root="rdxContextMenuRoot" rdxContextMenuRoot>
             <div
+                rdxContextMenuTrigger
                 [class]="
                     cn(
                         'border-border text-muted-foreground flex h-[150px] w-[300px] items-center justify-center rounded-md border-2 border-dashed text-sm select-none',
                         'data-[popup-open]:bg-muted data-[popup-open]:border-solid'
                     )
                 "
-                rdxContextMenuTrigger
             >
                 Right click here
             </div>
 
-            <div *rdxMenuPortal [class]="m.positioner" rdxMenuPositioner>
-                <div [class]="m.popup" rdxMenuPopup>
-                    <button [class]="m.item" rdxMenuItem>
+            <div *rdxMenuPortal rdxMenuPositioner [class]="m.positioner">
+                <div rdxMenuPopup [class]="m.popup">
+                    <button rdxMenuItem [class]="m.item">
                         Back
                         <span [class]="shortcut">⌘ [</span>
                     </button>
-                    <button [class]="m.item" [disabled]="true" rdxMenuItem>
+                    <button rdxMenuItem [class]="m.item" [disabled]="true">
                         Forward
                         <span [class]="shortcut">⌘ ]</span>
                     </button>
-                    <button [class]="m.item" rdxMenuItem>
+                    <button rdxMenuItem [class]="m.item">
                         Reload
                         <span [class]="shortcut">⌘ R</span>
                     </button>
 
                     <!-- More Tools submenu -->
                     <ng-container #moreSub="rdxMenuRoot" rdxMenuRoot>
-                        <button [class]="cn(m.item, 'justify-between')" rdxMenuSubTrigger>
+                        <button rdxMenuSubTrigger [class]="cn(m.item, 'justify-between')">
                             More Tools
                             <span class="text-muted-foreground text-xs">›</span>
                         </button>
                         <div
                             *rdxMenuPortal
-                            [class]="m.positioner"
                             side="right"
                             align="start"
                             sideOffset="4"
                             rdxMenuPositioner
+                            [class]="m.positioner"
                         >
-                            <div [class]="m.popup" rdxMenuPopup>
-                                <button [class]="m.item" rdxMenuItem>Save Page As…</button>
-                                <button [class]="m.item" rdxMenuItem>Create Shortcut…</button>
-                                <button [class]="m.item" rdxMenuItem>Name Window…</button>
+                            <div rdxMenuPopup [class]="m.popup">
+                                <button rdxMenuItem [class]="m.item">Save Page As…</button>
+                                <button rdxMenuItem [class]="m.item">Create Shortcut…</button>
+                                <button rdxMenuItem [class]="m.item">Name Window…</button>
                             </div>
                         </div>
                     </ng-container>
 
-                    <div [class]="m.separator" rdxMenuSeparator></div>
+                    <div rdxMenuSeparator [class]="m.separator"></div>
 
-                    <label [(checked)]="showBookmarks" [class]="m.selectableItem" rdxMenuCheckboxItem>
-                        <span [class]="m.itemIndicator" rdxMenuCheckboxItemIndicator>
-                            <svg [size]="12" lucideCheck></svg>
+                    <label rdxMenuCheckboxItem [class]="m.selectableItem" [(checked)]="showBookmarks">
+                        <span rdxMenuCheckboxItemIndicator [class]="m.itemIndicator">
+                            <svg lucideCheck [size]="12"></svg>
                         </span>
                         Show Bookmarks
                         <span [class]="shortcut">⌘ B</span>
                     </label>
-                    <label [(checked)]="showFullUrls" [class]="m.selectableItem" rdxMenuCheckboxItem>
-                        <span [class]="m.itemIndicator" rdxMenuCheckboxItemIndicator>
-                            <svg [size]="12" lucideCheck></svg>
+                    <label rdxMenuCheckboxItem [class]="m.selectableItem" [(checked)]="showFullUrls">
+                        <span rdxMenuCheckboxItemIndicator [class]="m.itemIndicator">
+                            <svg lucideCheck [size]="12"></svg>
                         </span>
                         Show Full URLs
                     </label>
 
-                    <div [class]="m.separator" rdxMenuSeparator></div>
+                    <div rdxMenuSeparator [class]="m.separator"></div>
 
-                    <div [(value)]="person" rdxMenuRadioGroup>
-                        <div [class]="m.groupLabel" rdxMenuGroupLabel>People</div>
-                        <label [class]="m.selectableItem" value="pedro" rdxMenuRadioItem>
-                            <span [class]="m.itemIndicator" rdxMenuRadioItemIndicator>
-                                <svg [size]="10" strokeWidth="5" lucideDot></svg>
+                    <div rdxMenuRadioGroup [(value)]="person">
+                        <div rdxMenuGroupLabel [class]="m.groupLabel">People</div>
+                        <label value="pedro" rdxMenuRadioItem [class]="m.selectableItem">
+                            <span rdxMenuRadioItemIndicator [class]="m.itemIndicator">
+                                <svg strokeWidth="5" lucideDot [size]="10"></svg>
                             </span>
                             Pedro Duarte
                         </label>
-                        <label [class]="m.selectableItem" value="colm" rdxMenuRadioItem>
-                            <span [class]="m.itemIndicator" rdxMenuRadioItemIndicator>
-                                <svg [size]="10" strokeWidth="5" lucideDot></svg>
+                        <label value="colm" rdxMenuRadioItem [class]="m.selectableItem">
+                            <span rdxMenuRadioItemIndicator [class]="m.itemIndicator">
+                                <svg strokeWidth="5" lucideDot [size]="10"></svg>
                             </span>
                             Colm Tuite
                         </label>
@@ -7793,12 +7793,12 @@ All other parts — `rdxMenuPositioner`, `rdxMenuPopup`, `rdxMenuItem`, `rdxMenu
 Based on the React version [image-cropper](https://github.com/origin-space/image-cropper).
 
 ```typescript
-import { ChangeDetectionStrategy, Component } from '@angular/core';
 import { demoCropper } from '../../storybook/styles';
 import { RdxCropperCropAreaDirective } from '../src/cropper-crop-area.directive';
 import { RdxCropperDescriptionDirective } from '../src/cropper-description.directive';
 import { RdxCropperImageComponent } from '../src/cropper-image.component';
 import { RdxCropperRootDirective } from '../src/cropper-root.directive';
+import { ChangeDetectionStrategy, Component } from '@angular/core';
 
 @Component({
     changeDetection: ChangeDetectionStrategy.Eager,
@@ -7810,12 +7810,12 @@ import { RdxCropperRootDirective } from '../src/cropper-root.directive';
         RdxCropperDescriptionDirective
     ],
     template: `
-        <div [class]="c.root" image="https://images.unsplash.com/photo-1494790108377-be9c29b29330" rdxCropperRoot>
+        <div image="https://images.unsplash.com/photo-1494790108377-be9c29b29330" rdxCropperRoot [class]="c.root">
             <div class="sr-only" rdxCropperDescription>
                 Use the arrow keys to move the image, and plus or minus to zoom.
             </div>
-            <div [imgClass]="c.image" rdxCropperImage></div>
-            <div [class]="c.cropArea" rdxCropperCropArea></div>
+            <div rdxCropperImage [imgClass]="c.image"></div>
+            <div rdxCropperCropArea [class]="c.cropArea"></div>
         </div>
     `
 })
@@ -7864,12 +7864,12 @@ Set `disabled` to freeze the cropper — drag, wheel/pinch zoom, and keyboard ar
 leaves the tab order, and `data-disabled` is exposed for styling.
 
 ```typescript
-import { ChangeDetectionStrategy, Component } from '@angular/core';
 import { demoCropper } from '../../storybook/styles';
 import { RdxCropperCropAreaDirective } from '../src/cropper-crop-area.directive';
 import { RdxCropperDescriptionDirective } from '../src/cropper-description.directive';
 import { RdxCropperImageComponent } from '../src/cropper-image.component';
 import { RdxCropperRootDirective } from '../src/cropper-root.directive';
+import { ChangeDetectionStrategy, Component } from '@angular/core';
 
 @Component({
     changeDetection: ChangeDetectionStrategy.Eager,
@@ -7882,16 +7882,16 @@ import { RdxCropperRootDirective } from '../src/cropper-root.directive';
     ],
     template: `
         <div
-            [class]="c.root"
             disabled
             image="https://images.unsplash.com/photo-1494790108377-be9c29b29330"
             rdxCropperRoot
+            [class]="c.root"
         >
             <div class="sr-only" rdxCropperDescription>
                 Use the arrow keys to move the image, and plus or minus to zoom.
             </div>
-            <div [imgClass]="c.image" rdxCropperImage></div>
-            <div [class]="c.cropArea" rdxCropperCropArea></div>
+            <div rdxCropperImage [imgClass]="c.image"></div>
+            <div rdxCropperCropArea [class]="c.cropArea"></div>
         </div>
     `
 })
@@ -7905,12 +7905,12 @@ export class CropperDisabled {
 Subscribe to `onCropChange` to read the crop rectangle (in the source image's natural pixels).
 
 ```typescript
-import { ChangeDetectionStrategy, Component, signal } from '@angular/core';
 import { demoCropper } from '../../storybook/styles';
 import { RdxCropperCropAreaDirective } from '../src/cropper-crop-area.directive';
 import { RdxCropperDescriptionDirective } from '../src/cropper-description.directive';
 import { RdxCropperImageComponent } from '../src/cropper-image.component';
 import { Area, RdxCropperRootDirective } from '../src/cropper-root.directive';
+import { ChangeDetectionStrategy, Component, signal } from '@angular/core';
 
 @Component({
     changeDetection: ChangeDetectionStrategy.Eager,
@@ -7924,16 +7924,16 @@ import { Area, RdxCropperRootDirective } from '../src/cropper-root.directive';
     template: `
         <div class="flex flex-col items-center gap-2">
             <div
-                [class]="c.root"
-                (onCropChange)="cropData.set($event)"
                 image="https://images.unsplash.com/photo-1494790108377-be9c29b29330"
                 rdxCropperRoot
+                [class]="c.root"
+                (onCropChange)="cropData.set($event)"
             >
                 <div class="sr-only" rdxCropperDescription>
                     Use the arrow keys to move the image, and plus or minus to zoom.
                 </div>
-                <div [imgClass]="c.image" rdxCropperImage></div>
-                <div [class]="c.cropArea" rdxCropperCropArea></div>
+                <div rdxCropperImage [imgClass]="c.image"></div>
+                <div rdxCropperCropArea [class]="c.cropArea"></div>
             </div>
 
             @if (cropData(); as data) {
@@ -8003,12 +8003,12 @@ via `aria-describedby` on the _Root_ element.
 ####  Enables users to input specific dates within a designated field.
 
 ```typescript
+import { RdxDateFieldInputDirective } from '../src/date-field-input.directive';
+import { RdxDateFieldRootDirective } from '../src/date-field-root.directive';
 import { ChangeDetectionStrategy, Component, input, model } from '@angular/core';
 import { DateValue } from '@internationalized/date';
 import { Granularity } from '@radix-ng/primitives/core';
 import { RdxVisuallyHiddenInputDirective } from '@radix-ng/primitives/visually-hidden';
-import { RdxDateFieldInputDirective } from '../src/date-field-input.directive';
-import { RdxDateFieldRootDirective } from '../src/date-field-root.directive';
 
 @Component({
     changeDetection: ChangeDetectionStrategy.Eager,
@@ -8016,29 +8016,29 @@ import { RdxDateFieldRootDirective } from '../src/date-field-root.directive';
     imports: [RdxDateFieldRootDirective, RdxDateFieldInputDirective, RdxVisuallyHiddenInputDirective],
     template: `
         <div
-            class="border-input bg-background text-foreground data-[invalid]:border-destructive inline-flex items-center rounded-md border px-3 py-2 text-sm shadow-xs select-none"
             #root="rdxDateFieldRoot"
-            [(value)]="value"
+            class="border-input bg-background text-foreground data-[invalid]:border-destructive inline-flex items-center rounded-md border px-3 py-2 text-sm shadow-xs select-none"
+            rdxDateFieldRoot
             [locale]="locale()"
             [granularity]="granularity()"
-            rdxDateFieldRoot
+            [(value)]="value"
         >
             @for (item of root.segmentContents(); track $index) {
                 @if (item.part === 'literal') {
-                    <div class="text-muted-foreground px-0.5" [part]="item.part" rdxDateFieldInput>
+                    <div class="text-muted-foreground px-0.5" rdxDateFieldInput [part]="item.part">
                         {{ item.value }}
                     </div>
                 } @else {
                     <div
                         class="hover:bg-muted focus:bg-accent focus:text-accent-foreground data-[placeholder]:text-muted-foreground rounded px-1 tabular-nums focus:outline-none"
-                        [part]="item.part"
                         rdxDateFieldInput
+                        [part]="item.part"
                     >
                         {{ item.value }}
                     </div>
                 }
             }
-            <input [value]="root.value()" rdxVisuallyHiddenInput feature="focusable" />
+            <input rdxVisuallyHiddenInput feature="focusable" [value]="root.value()" />
         </div>
     `
 })
@@ -8149,11 +8149,11 @@ Import all parts and piece them together.
 ### Invalid
 
 ```typescript
+import { RdxDateFieldInputDirective } from '../src/date-field-input.directive';
+import { RdxDateFieldRootDirective } from '../src/date-field-root.directive';
 import { ChangeDetectionStrategy, Component } from '@angular/core';
 import { DateValue } from '@internationalized/date';
 import { RdxVisuallyHiddenInputDirective } from '@radix-ng/primitives/visually-hidden';
-import { RdxDateFieldInputDirective } from '../src/date-field-input.directive';
-import { RdxDateFieldRootDirective } from '../src/date-field-root.directive';
 
 @Component({
     changeDetection: ChangeDetectionStrategy.Eager,
@@ -8165,29 +8165,29 @@ import { RdxDateFieldRootDirective } from '../src/date-field-root.directive';
                 Appointment (unavailable on 19th)
             </label>
             <div
+                #root="rdxDateFieldRoot"
                 class="border-input bg-background text-foreground data-[invalid]:border-destructive inline-flex items-center rounded-md border px-3 py-2 text-sm shadow-xs select-none"
                 id="date-field-invalid"
-                #root="rdxDateFieldRoot"
-                [isDateUnavailable]="isDateUnavailable"
                 granularity="day"
                 rdxDateFieldRoot
+                [isDateUnavailable]="isDateUnavailable"
             >
                 @for (item of root.segmentContents(); track $index) {
                     @if (item.part === 'literal') {
-                        <div class="text-muted-foreground px-0.5" [part]="item.part" rdxDateFieldInput>
+                        <div class="text-muted-foreground px-0.5" rdxDateFieldInput [part]="item.part">
                             {{ item.value }}
                         </div>
                     } @else {
                         <div
                             class="hover:bg-muted focus:bg-accent focus:text-accent-foreground data-[placeholder]:text-muted-foreground rounded px-1 tabular-nums focus:outline-none"
-                            [part]="item.part"
                             rdxDateFieldInput
+                            [part]="item.part"
                         >
                             {{ item.value }}
                         </div>
                     }
                 }
-                <input [value]="root.value()" rdxVisuallyHiddenInput feature="focusable" />
+                <input rdxVisuallyHiddenInput feature="focusable" [value]="root.value()" />
 
                 @if (root.isInvalid()) {
                     <span class="text-destructive pl-2">Invalid Day</span>
@@ -8224,10 +8224,10 @@ Dialog composes the shared Portal, Presence, Dismissable Layer, and Focus Scope
 It stays headless: styles and native CSS animations belong to the consumer.
 
 ```typescript
+import { cn, demoButton, demoDialog, demoInput } from '../../storybook/styles';
 import { ChangeDetectionStrategy, Component } from '@angular/core';
 import { LucideX } from '@lucide/angular';
 import { dialogImports } from '@radix-ng/primitives/dialog';
-import { cn, demoButton, demoDialog, demoInput } from '../../storybook/styles';
 
 @Component({
     changeDetection: ChangeDetectionStrategy.Eager,
@@ -8235,32 +8235,32 @@ import { cn, demoButton, demoDialog, demoInput } from '../../storybook/styles';
     imports: [...dialogImports, LucideX],
     template: `
         <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" />
                     </button>
                 </div>
@@ -8347,10 +8347,10 @@ custom portal target).
 A modal dialog with an accessible title and description, form fields, and close buttons.
 
 ```typescript
+import { cn, demoButton, demoDialog, demoInput } from '../../storybook/styles';
 import { ChangeDetectionStrategy, Component } from '@angular/core';
 import { LucideX } from '@lucide/angular';
 import { dialogImports } from '@radix-ng/primitives/dialog';
-import { cn, demoButton, demoDialog, demoInput } from '../../storybook/styles';
 
 @Component({
     changeDetection: ChangeDetectionStrategy.Eager,
@@ -8358,32 +8358,32 @@ import { cn, demoButton, demoDialog, demoInput } from '../../storybook/styles';
     imports: [...dialogImports, LucideX],
     template: `
         <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" />
                     </button>
                 </div>
@@ -8404,10 +8404,10 @@ export class RdxDialogDefaultComponent {
 Bind `[(open)]` when application state should open or close the dialog programmatically.
 
 ```typescript
+import { cn, demoButton, demoDialog } from '../../storybook/styles';
 import { ChangeDetectionStrategy, Component, signal } from '@angular/core';
 import { LucideX } from '@lucide/angular';
 import { dialogImports } from '@radix-ng/primitives/dialog';
-import { cn, demoButton, demoDialog } from '../../storybook/styles';
 
 @Component({
     changeDetection: ChangeDetectionStrategy.Eager,
@@ -8421,15 +8421,15 @@ import { cn, demoButton, demoDialog } from '../../storybook/styles';
                 <button [class]="cn(b.base, b.outline, b.size.sm)" (click)="open.set(true)">Open from outside</button>
             </div>
 
-            <div [(open)]="open" rdxDialogRoot>
-                <button [class]="cn(b.base, b.primary, b.size.md)" rdxDialogTrigger>Open dialog</button>
+            <div rdxDialogRoot [(open)]="open">
+                <button rdxDialogTrigger [class]="cn(b.base, b.primary, b.size.md)">Open dialog</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>Controlled dialog</h2>
-                        <p [class]="d.description" rdxDialogDescription>
+                    <div rdxDialogPopup [class]="cn(d.popup, d.popupAnimated)">
+                        <h2 rdxDialogTitle [class]="d.title">Controlled dialog</h2>
+                        <p rdxDialogDescription [class]="d.description">
                             The open state is owned by the component and bound with
                             <code>[(open)]</code>
                             .
@@ -8441,7 +8441,7 @@ import { cn, demoButton, demoDialog } from '../../storybook/styles';
                             </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" />
                         </button>
                     </div>
@@ -8464,10 +8464,10 @@ Set `[modal]="false"` to keep document scrolling and outside pointer interaction
 no backdrop in this mode.
 
 ```typescript
+import { cn, demoButton, demoDialog } from '../../storybook/styles';
 import { ChangeDetectionStrategy, Component, signal } from '@angular/core';
 import { LucideX } from '@lucide/angular';
 import { dialogImports } from '@radix-ng/primitives/dialog';
-import { cn, demoButton, demoDialog } from '../../storybook/styles';
 
 @Component({
     changeDetection: ChangeDetectionStrategy.Eager,
@@ -8479,17 +8479,17 @@ import { cn, demoButton, demoDialog } from '../../storybook/styles';
                 Non-modal: page scrolling and outside pointer interactions stay enabled while the dialog is open.
             </p>
 
-            <div [modal]="false" rdxDialogRoot>
-                <button [class]="cn(b.base, b.primary, b.size.md)" rdxDialogTrigger>Open non-modal dialog</button>
+            <div rdxDialogRoot [modal]="false">
+                <button rdxDialogTrigger [class]="cn(b.base, b.primary, b.size.md)">Open non-modal dialog</button>
 
                 <ng-template rdxDialogPortal>
-                    <div [class]="cn(d.popup, d.popupAnimated)" rdxDialogPopup>
-                        <h2 [class]="d.title" rdxDialogTitle>Non-modal dialog</h2>
-                        <p [class]="d.description" rdxDialogDescription>
+                    <div rdxDialogPopup [class]="cn(d.popup, d.popupAnimated)">
+                        <h2 rdxDialogTitle [class]="d.title">Non-modal dialog</h2>
+                        <p rdxDialogDescription [class]="d.description">
                             There is no backdrop, so you can keep interacting with the rest of the page.
                         </p>
 
-                        <button [class]="d.close" aria-label="Close" rdxDialogClose>
+                        <button aria-label="Close" rdxDialogClose [class]="d.close">
                             <svg aria-hidden="true" lucideX size="16" />
                         </button>
                     </div>
@@ -8516,10 +8516,10 @@ Use `modal="trap-focus"` to keep keyboard focus inside the dialog while leaving
 outside pointer interactions enabled.
 
 ```typescript
+import { cn, demoButton, demoDialog, demoInput } from '../../storybook/styles';
 import { ChangeDetectionStrategy, Component, signal } from '@angular/core';
 import { LucideX } from '@lucide/angular';
 import { dialogImports } from '@radix-ng/primitives/dialog';
-import { cn, demoButton, demoDialog, demoInput } from '../../storybook/styles';
 
 @Component({
     changeDetection: ChangeDetectionStrategy.Eager,
@@ -8533,29 +8533,29 @@ import { cn, demoButton, demoDialog, demoInput } from '../../storybook/styles';
             </p>
 
             <div modal="trap-focus" rdxDialogRoot>
-                <button [class]="cn(b.base, b.primary, b.size.md)" rdxDialogTrigger>Open dialog</button>
+                <button rdxDialogTrigger [class]="cn(b.base, b.primary, b.size.md)">Open dialog</button>
 
                 <ng-template rdxDialogPortal>
-                    <div [class]="cn(d.popup, d.popupAnimated)" rdxDialogPopup>
-                        <h2 [class]="d.title" rdxDialogTitle>Focus is trapped</h2>
-                        <p [class]="d.description" rdxDialogDescription>
+                    <div rdxDialogPopup [class]="cn(d.popup, d.popupAnimated)">
+                        <h2 rdxDialogTitle [class]="d.title">Focus is trapped</h2>
+                        <p rdxDialogDescription [class]="d.description">
                             Press Tab and notice focus never leaves the dialog.
                         </p>
 
                         <label [class]="d.field">
                             First field
-                            <input [class]="input" placeholder="Focused when opened" />
+                            <input placeholder="Focused when opened" [class]="input" />
                         </label>
                         <label [class]="d.field">
                             Second field
-                            <input [class]="input" placeholder="Tab to reach me" />
+                            <input placeholder="Tab to reach me" [class]="input" />
                         </label>
 
                         <div [class]="d.footer">
-                            <button [class]="cn(b.base, b.primary, b.size.sm)" rdxDialogClose>Done</button>
+                            <button rdxDialogClose [class]="cn(b.base, b.primary, b.size.sm)">Done</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" />
                         </button>
                     </div>
@@ -8583,34 +8583,34 @@ Set `disablePointerDismissal` so clicking the backdrop no longer closes the dial
 close buttons still close it.
 
 ```typescript
+import { cn, demoButton, demoDialog } from '../../storybook/styles';
 import { ChangeDetectionStrategy, Component } from '@angular/core';
 import { LucideX } from '@lucide/angular';
 import { dialogImports } from '@radix-ng/primitives/dialog';
-import { cn, demoButton, demoDialog } from '../../storybook/styles';
 
 @Component({
     changeDetection: ChangeDetectionStrategy.Eager,
     selector: 'rdx-dialog-without-dismiss',
     imports: [...dialogImports, LucideX],
     template: `
-        <div [disablePointerDismissal]="true" rdxDialogRoot>
-            <button [class]="cn(b.base, b.primary, b.size.md)" rdxDialogTrigger>Open dialog</button>
+        <div rdxDialogRoot [disablePointerDismissal]="true">
+            <button rdxDialogTrigger [class]="cn(b.base, b.primary, b.size.md)">Open dialog</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>Confirm your choice</h2>
-                    <p [class]="d.description" rdxDialogDescription>
+                <div rdxDialogPopup [class]="cn(d.popup, d.popupAnimated)">
+                    <h2 rdxDialogTitle [class]="d.title">Confirm your choice</h2>
+                    <p rdxDialogDescription [class]="d.description">
                         Clicking the backdrop will not close this dialog. Use a button or press Escape instead.
                     </p>
 
                     <div [class]="d.footer">
-                        <button [class]="cn(b.base, b.outline, b.size.sm)" rdxDialogClose>Cancel</button>
-                        <button [class]="cn(b.base, b.destructive, b.size.sm)" rdxDialogClose>Delete</button>
+                        <button rdxDialogClose [class]="cn(b.base, b.outline, b.size.sm)">Cancel</button>
+                        <button rdxDialogClose [class]="cn(b.base, b.destructive, b.size.sm)">Delete</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" />
                     </button>
                 </div>
@@ -8631,10 +8631,10 @@ Several `rdxDialogTrigger` buttons can open the same dialog. The active trigger
 exposed on the root so the content can adapt.
 
 ```typescript
+import { cn, demoButton, demoDialog } from '../../storybook/styles';
 import { ChangeDetectionStrategy, Component } from '@angular/core';
 import { LucideX } from '@lucide/angular';
 import { dialogImports } from '@radix-ng/primitives/dialog';
-import { cn, demoButton, demoDialog } from '../../storybook/styles';
 
 @Component({
     changeDetection: ChangeDetectionStrategy.Eager,
@@ -8643,24 +8643,24 @@ import { cn, demoButton, demoDialog } from '../../storybook/styles';
     template: `
         <div #root="rdxDialogRoot" rdxDialogRoot>
             <div class="flex gap-2">
-                <button [class]="cn(b.base, b.outline, b.size.md)" payload="Lemon" rdxDialogTrigger>Lemon</button>
-                <button [class]="cn(b.base, b.outline, b.size.md)" payload="Lime" rdxDialogTrigger>Lime</button>
-                <button [class]="cn(b.base, b.outline, b.size.md)" payload="Orange" rdxDialogTrigger>Orange</button>
+                <button payload="Lemon" rdxDialogTrigger [class]="cn(b.base, b.outline, b.size.md)">Lemon</button>
+                <button payload="Lime" rdxDialogTrigger [class]="cn(b.base, b.outline, b.size.md)">Lime</button>
+                <button payload="Orange" rdxDialogTrigger [class]="cn(b.base, b.outline, b.size.md)">Orange</button>
             </div>
 
             <ng-template rdxDialogPortal>
-                <div [class]="cn(d.backdrop, d.backdropAnimated)" rdxDialogBackdrop></div>
-                <div [class]="cn(d.popup, d.popupAnimated)" rdxDialogPopup>
-                    <h2 [class]="d.title" rdxDialogTitle>{{ root.payload() || 'Fruit' }}</h2>
-                    <p [class]="d.description" rdxDialogDescription>
+                <div rdxDialogBackdrop [class]="cn(d.backdrop, d.backdropAnimated)"></div>
+                <div rdxDialogPopup [class]="cn(d.popup, d.popupAnimated)">
+                    <h2 rdxDialogTitle [class]="d.title">{{ root.payload() || 'Fruit' }}</h2>
+                    <p rdxDialogDescription [class]="d.description">
                         Every trigger opens the same dialog; the active trigger's
                         <code>payload</code>
                         is shown here.
                     </p>
                     <div [class]="d.footer">
-                        <button [class]="cn(b.base, b.primary, b.size.sm)" rdxDialogClose>Close</button>
+                        <button rdxDialogClose [class]="cn(b.base, b.primary, b.size.sm)">Close</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" />
                     </button>
                 </div>
@@ -8680,10 +8680,10 @@ export class RdxDialogMultipleTriggersComponent {
 Bind both `[(open)]` and `[(triggerId)]` to choose which trigger is active from component state.
 
 ```typescript
+import { cn, demoButton, demoDialog } from '../../storybook/styles';
 import { ChangeDetectionStrategy, Component, signal } from '@angular/core';
 import { LucideX } from '@lucide/angular';
 import { dialogImports } from '@radix-ng/primitives/dialog';
-import { cn, demoButton, demoDialog } from '../../storybook/styles';
 
 @Component({
     changeDetection: ChangeDetectionStrategy.Eager,
@@ -8693,19 +8693,19 @@ import { cn, demoButton, demoDialog } from '../../storybook/styles';
         <div class="flex flex-col items-center gap-3">
             <p class="text-muted-foreground text-xs">open: {{ open() }} · triggerId: {{ triggerId() ?? '—' }}</p>
 
-            <div #root="rdxDialogRoot" [(open)]="open" [(triggerId)]="triggerId" rdxDialogRoot>
+            <div #root="rdxDialogRoot" rdxDialogRoot [(open)]="open" [(triggerId)]="triggerId">
                 <div class="flex gap-2">
-                    <button id="account" [class]="cn(b.base, b.outline, b.size.md)" rdxDialogTrigger>Account</button>
-                    <button id="billing" [class]="cn(b.base, b.outline, b.size.md)" rdxDialogTrigger>Billing</button>
+                    <button id="account" rdxDialogTrigger [class]="cn(b.base, b.outline, b.size.md)">Account</button>
+                    <button id="billing" rdxDialogTrigger [class]="cn(b.base, b.outline, b.size.md)">Billing</button>
                 </div>
 
                 <ng-template rdxDialogPortal>
-                    <div [class]="cn(d.backdrop, d.backdropAnimated)" rdxDialogBackdrop></div>
-                    <div [class]="cn(d.popup, d.popupAnimated)" rdxDialogPopup>
-                        <h2 [class]="d.title" rdxDialogTitle>
+                    <div rdxDialogBackdrop [class]="cn(d.backdrop, d.backdropAnimated)"></div>
+                    <div rdxDialogPopup [class]="cn(d.popup, d.popupAnimated)">
+                        <h2 rdxDialogTitle [class]="d.title">
                             {{ triggerId() === 'billing' ? 'Billing' : 'Account' }}
                         </h2>
-                        <p [class]="d.description" rdxDialogDescription>
+                        <p rdxDialogDescription [class]="d.description">
                             Both
                             <code>open</code>
                             and
@@ -8713,9 +8713,9 @@ import { cn, demoButton, demoDialog } from '../../storybook/styles';
                             are bound, so the active panel is driven from component state.
                         </p>
                         <div [class]="d.footer">
-                            <button [class]="cn(b.base, b.primary, b.size.sm)" rdxDialogClose>Close</button>
+                            <button rdxDialogClose [class]="cn(b.base, b.primary, b.size.sm)">Close</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" />
                         </button>
                     </div>
@@ -8748,10 +8748,10 @@ Create a shared handle with `createRdxDialogHandle()` when triggers live outside
 handle also supports imperative `open(id)`, `toggle(id)`, and `close()`.
 
 ```typescript
+import { cn, demoButton, demoDialog } from '../../storybook/styles';
 import { ChangeDetectionStrategy, Component } from '@angular/core';
 import { LucideX } from '@lucide/angular';
 import { createRdxDialogHandle, dialogImports } from '@radix-ng/primitives/dialog';
-import { cn, demoButton, demoDialog } from '../../storybook/styles';
 
 @Component({
     changeDetection: ChangeDetectionStrategy.Eager,
@@ -8761,10 +8761,10 @@ import { cn, demoButton, demoDialog } from '../../storybook/styles';
         <div class="flex flex-col items-center gap-3">
             <!-- Triggers live outside the root and are linked through a shared handle. -->
             <div class="flex gap-2">
-                <button id="settings" [class]="cn(b.base, b.outline, b.size.md)" [handle]="handle" rdxDialogTrigger>
+                <button id="settings" rdxDialogTrigger [class]="cn(b.base, b.outline, b.size.md)" [handle]="handle">
                     Settings
                 </button>
-                <button id="profile" [class]="cn(b.base, b.outline, b.size.md)" [handle]="handle" rdxDialogTrigger>
+                <button id="profile" rdxDialogTrigger [class]="cn(b.base, b.outline, b.size.md)" [handle]="handle">
                     Profile
                 </button>
             </div>
@@ -8773,20 +8773,20 @@ import { cn, demoButton, demoDialog } from '../../storybook/styles';
                 Open profile imperatively
             </button>
 
-            <div [handle]="handle" rdxDialogRoot>
+            <div rdxDialogRoot [handle]="handle">
                 <ng-template rdxDialogPortal>
-                    <div [class]="cn(d.backdrop, d.backdropAnimated)" rdxDialogBackdrop></div>
-                    <div [class]="cn(d.popup, d.popupAnimated)" rdxDialogPopup>
-                        <h2 [class]="d.title" rdxDialogTitle>Detached triggers</h2>
-                        <p [class]="d.description" rdxDialogDescription>
+                    <div rdxDialogBackdrop [class]="cn(d.backdrop, d.backdropAnimated)"></div>
+                    <div rdxDialogPopup [class]="cn(d.popup, d.popupAnimated)">
+                        <h2 rdxDialogTitle [class]="d.title">Detached triggers</h2>
+                        <p rdxDialogDescription [class]="d.description">
                             The triggers and this dialog are connected with
                             <code>createRdxDialogHandle()</code>
                             rather than DOM nesting.
                         </p>
                         <div [class]="d.footer">
-                            <button [class]="cn(b.base, b.primary, b.size.sm)" rdxDialogClose>Close</button>
+                            <button rdxDialogClose [class]="cn(b.base, b.primary, b.size.sm)">Close</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" />
                         </button>
                     </div>
@@ -8809,10 +8809,10 @@ Dialogs can be nested. The parent popup gains `data-nested-dialog-open` and the
 `data-nested`, which the demo uses to scale the parent back.
 
 ```typescript
+import { cn, demoButton, demoDialog } from '../../storybook/styles';
 import { ChangeDetectionStrategy, Component } from '@angular/core';
 import { LucideX } from '@lucide/angular';
 import { dialogImports } from '@radix-ng/primitives/dialog';
-import { cn, demoButton, demoDialog } from '../../storybook/styles';
 
 @Component({
     changeDetection: ChangeDetectionStrategy.Eager,
@@ -8820,36 +8820,36 @@ import { cn, demoButton, demoDialog } from '../../storybook/styles';
     imports: [...dialogImports, LucideX],
     template: `
         <div rdxDialogRoot>
-            <button [class]="cn(b.base, b.primary, b.size.md)" rdxDialogTrigger>Open dialog</button>
+            <button rdxDialogTrigger [class]="cn(b.base, b.primary, b.size.md)">Open dialog</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>Parent dialog</h2>
-                    <p [class]="d.description" rdxDialogDescription>
+                <div rdxDialogPopup [class]="cn(d.popup, d.popupAnimated)">
+                    <h2 rdxDialogTitle [class]="d.title">Parent dialog</h2>
+                    <p rdxDialogDescription [class]="d.description">
                         Opening the nested dialog scales this popup back via
                         <code>[data-nested-dialog-open]</code>
                         .
                     </p>
 
                     <div [class]="d.footer">
-                        <button [class]="cn(b.base, b.outline, b.size.sm)" rdxDialogClose>Close</button>
+                        <button rdxDialogClose [class]="cn(b.base, b.outline, b.size.sm)">Close</button>
 
                         <div rdxDialogRoot>
-                            <button [class]="cn(b.base, b.primary, b.size.sm)" rdxDialogTrigger>Open nested</button>
+                            <button rdxDialogTrigger [class]="cn(b.base, b.primary, b.size.sm)">Open nested</button>
 
                             <ng-template rdxDialogPortal>
-                                <div [class]="cn(d.backdrop, d.backdropAnimated)" rdxDialogBackdrop></div>
-                                <div [class]="cn(d.popup, d.popupAnimated)" rdxDialogPopup>
-                                    <h2 [class]="d.title" rdxDialogTitle>Nested dialog</h2>
-                                    <p [class]="d.description" rdxDialogDescription>
+                                <div rdxDialogBackdrop [class]="cn(d.backdrop, d.backdropAnimated)"></div>
+                                <div rdxDialogPopup [class]="cn(d.popup, d.popupAnimated)">
+                                    <h2 rdxDialogTitle [class]="d.title">Nested dialog</h2>
+                                    <p rdxDialogDescription [class]="d.description">
                                         Escape or the backdrop closes this one first, then the parent.
                                     </p>
                                     <div [class]="d.footer">
-                                        <button [class]="cn(b.base, b.primary, b.size.sm)" rdxDialogClose>Done</button>
+                                        <button rdxDialogClose [class]="cn(b.base, b.primary, b.size.sm)">Done</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" />
                                     </button>
                                 </div>
@@ -8857,7 +8857,7 @@ import { cn, demoButton, demoDialog } from '../../storybook/styles';
                         </div>
                     </div>
 
-                    <button [class]="d.close" aria-label="Close" rdxDialogClose>
+                    <button aria-label="Close" rdxDialogClose [class]="d.close">
                         <svg aria-hidden="true" lucideX size="16" />
                     </button>
                 </div>
@@ -8878,11 +8878,11 @@ Drive the dialog with `[(open)]` and listen to `onOpenChange` to intercept a clo
 confirmation dialog when there are unsaved changes.
 
 ```typescript
+import { cn, demoButton, demoDialog, demoInput } from '../../storybook/styles';
 import { ChangeDetectionStrategy, Component, signal } from '@angular/core';
 import { FormsModule } from '@angular/forms';
 import { LucideX } from '@lucide/angular';
 import { dialogImports, RdxDialogOpenChange } from '@radix-ng/primitives/dialog';
-import { cn, demoButton, demoDialog, demoInput } from '../../storybook/styles';
 
 @Component({
     changeDetection: ChangeDetectionStrategy.Eager,
@@ -8890,21 +8890,21 @@ import { cn, demoButton, demoDialog, demoInput } from '../../storybook/styles';
     imports: [...dialogImports, FormsModule, LucideX],
     template: `
         <!-- The editor dialog is controlled so a close request can be intercepted. -->
-        <div [(open)]="editorOpen" (onOpenChange)="onEditorOpenChange($event)" rdxDialogRoot>
-            <button [class]="cn(b.base, b.primary, b.size.md)" rdxDialogTrigger>Edit description</button>
+        <div rdxDialogRoot [(open)]="editorOpen" (onOpenChange)="onEditorOpenChange($event)">
+            <button rdxDialogTrigger [class]="cn(b.base, b.primary, b.size.md)">Edit description</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 description</h2>
-                    <p [class]="d.description" rdxDialogDescription>
+                <div rdxDialogPopup [class]="cn(d.popup, d.popupAnimated)">
+                    <h2 rdxDialogTitle [class]="d.title">Edit description</h2>
+                    <p rdxDialogDescription [class]="d.description">
                         Closing with unsaved changes asks for confirmation.
                     </p>
 
                     <label [class]="d.field">
                         Description
-                        <input [(ngModel)]="text" [class]="input" placeholder="Type to create changes" />
+                        <input placeholder="Type to create changes" [class]="input" [(ngModel)]="text" />
                     </label>
 
                     <div [class]="d.footer">
@@ -8912,7 +8912,7 @@ import { cn, demoButton, demoDialog, demoInput } from '../../storybook/styles';
                         <button [class]="cn(b.base, b.primary, b.size.sm)" (click)="save()">Save</button>
                     </div>
 
-                    <button [class]="d.close" (click)="requestClose()" aria-label="Close">
+                    <button aria-label="Close" [class]="d.close" (click)="requestClose()">
                         <svg aria-hidden="true" lucideX size="16" />
                     </button>
                 </div>
@@ -8920,12 +8920,12 @@ import { cn, demoButton, demoDialog, demoInput } from '../../storybook/styles';
         </div>
 
         <!-- Confirmation dialog, controlled separately. -->
-        <div [(open)]="confirmOpen" rdxDialogRoot>
+        <div rdxDialogRoot [(open)]="confirmOpen">
             <ng-template rdxDialogPortal>
-                <div [class]="cn(d.backdrop, d.backdropAnimated)" rdxDialogBackdrop></div>
-                <div [class]="cn(d.popup, d.popupAnimated)" rdxDialogPopup>
-                    <h2 [class]="d.title" rdxDialogTitle>Discard changes?</h2>
-                    <p [class]="d.description" rdxDialogDescription>Your edits will be lost.</p>
+                <div rdxDialogBackdrop [class]="cn(d.backdrop, d.backdropAnimated)"></div>
+                <div rdxDialogPopup [class]="cn(d.popup, d.popupAnimated)">
+                    <h2 rdxDialogTitle [class]="d.title">Discard changes?</h2>
+                    <p rdxDialogDescription [class]="d.description">Your edits will be lost.</p>
                     <div [class]="d.footer">
                         <button [class]="cn(b.base, b.outline, b.size.sm)" (click)="confirmOpen.set(false)">
                             Keep editing
@@ -8988,6 +8988,7 @@ screen. Center the popup with the scroll-area content's `min-h-full items-center
 vertical margin so it can grow past the bottom edge.
 
 ```typescript
+import { cn, demoButton, demoCard, demoDialog } from '../../storybook/styles';
 import { ChangeDetectionStrategy, Component } from '@angular/core';
 import { LucideX } from '@lucide/angular';
 import { dialogImports } from '@radix-ng/primitives/dialog';
@@ -8998,7 +8999,6 @@ import {
     RdxScrollAreaThumb,
     RdxScrollAreaViewport
 } from '@radix-ng/primitives/scroll-area';
-import { cn, demoButton, demoCard, demoDialog } from '../../storybook/styles';
 
 /**
  * Outside-scroll dialog — a 1-1 port of the Base UI example.
@@ -9023,10 +9023,10 @@ import { cn, demoButton, demoCard, demoDialog } from '../../storybook/styles';
     ],
     template: `
         <div rdxDialogRoot>
-            <button [class]="cn(b.base, b.primary, b.size.md)" rdxDialogTrigger>Open dialog</button>
+            <button rdxDialogTrigger [class]="cn(b.base, b.primary, b.size.md)">Open dialog</button>
 
             <ng-template rdxDialogPortal>
-                <div [class]="cn(d.backdrop, d.backdropAnimated)" rdxDialogBackdrop></div>
+                <div rdxDialogBackdrop [class]="cn(d.backdrop, d.backdropAnimated)"></div>
 
                 <!-- Full-screen viewport hosting a custom scroll area (not native overflow). -->
                 <div class="group/dialog fixed inset-0 z-50" rdxDialogViewport>
@@ -9042,6 +9042,7 @@ import { cn, demoButton, demoCard, demoDialog } from '../../storybook/styles';
                         <div class="h-full overscroll-contain" rdxScrollAreaViewport>
                             <div class="flex min-h-full items-center justify-center" rdxScrollAreaContent>
                                 <div
+                                    rdxDialogPopup
                                     [class]="
                                         cn(
                                             card,
@@ -9049,15 +9050,14 @@ import { cn, demoButton, demoCard, demoDialog } from '../../storybook/styles';
                                             d.popupAnimated
                                         )
                                     "
-                                    rdxDialogPopup
                                 >
                                     <div class="relative flex flex-col gap-1 pr-8">
-                                        <h2 [class]="d.title" rdxDialogTitle>Dialog</h2>
-                                        <p [class]="d.description" rdxDialogDescription>
+                                        <h2 rdxDialogTitle [class]="d.title">Dialog</h2>
+                                        <p rdxDialogDescription [class]="d.description">
                                             This layout keeps an outer container scrollable while the dialog can extend
                                             past the bottom edge.
                                         </p>
-                                        <button [class]="d.close" aria-label="Close" rdxDialogClose>
+                                        <button aria-label="Close" rdxDialogClose [class]="d.close">
                                             <svg aria-hidden="true" lucideX size="16" />
                                         </button>
                                     </div>
@@ -9200,10 +9200,10 @@ export class RdxDialogOutsideScrollComponent {
 Keep the popup fixed on screen and scroll an inner region instead.
 
 ```typescript
+import { cn, demoButton, demoDialog } from '../../storybook/styles';
 import { ChangeDetectionStrategy, Component } from '@angular/core';
 import { LucideX } from '@lucide/angular';
 import { dialogImports } from '@radix-ng/primitives/dialog';
-import { cn, demoButton, demoDialog } from '../../storybook/styles';
 
 @Component({
     changeDetection: ChangeDetectionStrategy.Eager,
@@ -9211,15 +9211,15 @@ import { cn, demoButton, demoDialog } from '../../storybook/styles';
     imports: [...dialogImports, LucideX],
     template: `
         <div rdxDialogRoot>
-            <button [class]="cn(b.base, b.primary, b.size.md)" rdxDialogTrigger>Open dialog</button>
+            <button rdxDialogTrigger [class]="cn(b.base, b.primary, b.size.md)">Open dialog</button>
 
             <ng-template rdxDialogPortal>
-                <div [class]="cn(d.backdrop, d.backdropAnimated)" rdxDialogBackdrop></div>
+                <div rdxDialogBackdrop [class]="cn(d.backdrop, d.backdropAnimated)"></div>
 
                 <!-- The popup stays fixed on screen; only its body scrolls. -->
-                <div [class]="cn(d.popup, d.popupAnimated, 'flex max-h-[85vh] flex-col')" rdxDialogPopup>
-                    <h2 [class]="d.title" rdxDialogTitle>Release notes</h2>
-                    <p [class]="d.description" rdxDialogDescription>
+                <div rdxDialogPopup [class]="cn(d.popup, d.popupAnimated, 'flex max-h-[85vh] flex-col')">
+                    <h2 rdxDialogTitle [class]="d.title">Release notes</h2>
+                    <p rdxDialogDescription [class]="d.description">
                         Header and footer stay put while the body scrolls.
                     </p>
 
@@ -9230,10 +9230,10 @@ import { cn, demoButton, demoDialog } from '../../storybook/styles';
                     </div>
 
                     <div [class]="d.footer">
-                        <button [class]="cn(b.base, b.primary, b.size.sm)" rdxDialogClose>Got it</button>
+                        <button rdxDialogClose [class]="cn(b.base, b.primary, b.size.sm)">Got it</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" />
                     </button>
                 </div>
@@ -9259,10 +9259,10 @@ individually, so elements such as a close button can sit outside the visible con
 around it stay dismissable.
 
 ```typescript
+import { cn, demoButton, demoDialog } from '../../storybook/styles';
 import { ChangeDetectionStrategy, Component } from '@angular/core';
 import { LucideX } from '@lucide/angular';
 import { dialogImports } from '@radix-ng/primitives/dialog';
-import { cn, demoButton, demoDialog } from '../../storybook/styles';
 
 /**
  * Placing elements outside the popup — a 1-1 port of the Base UI "uncontained" dialog.
@@ -9279,10 +9279,10 @@ import { cn, demoButton, demoDialog } from '../../storybook/styles';
     imports: [...dialogImports, LucideX],
     template: `
         <div rdxDialogRoot>
-            <button [class]="cn(b.base, b.primary, b.size.md)" rdxDialogTrigger>Open dialog</button>
+            <button rdxDialogTrigger [class]="cn(b.base, b.primary, b.size.md)">Open dialog</button>
 
             <ng-template rdxDialogPortal>
-                <div [class]="cn(d.backdrop, d.backdropAnimated)" rdxDialogBackdrop></div>
+                <div rdxDialogBackdrop [class]="cn(d.backdrop, d.backdropAnimated)"></div>
 
                 <div class="fixed inset-0 z-50 grid place-items-center px-4 py-12 xl:py-6" rdxDialogViewport>
                     <!-- Transparent frame: pointer-events-none so the gaps around the card stay dismissable. -->
@@ -9302,8 +9302,8 @@ import { cn, demoButton, demoDialog } from '../../storybook/styles';
                         <div
                             class="border-border bg-card text-card-foreground pointer-events-auto h-full w-full max-w-[70rem] rounded-md border p-6 shadow-sm transition-[scale] duration-500 ease-[cubic-bezier(0.22,1,0.36,1)] group-data-[starting-style]/popup:scale-105"
                         >
-                            <h2 [class]="d.title" rdxDialogTitle>Uncontained dialog</h2>
-                            <p [class]="d.description" rdxDialogDescription>
+                            <h2 rdxDialogTitle [class]="d.title">Uncontained dialog</h2>
+                            <p rdxDialogDescription [class]="d.description">
                                 The close button lives in the popup but is rendered outside this card, above its
                                 top-right corner.
                             </p>
@@ -9326,11 +9326,11 @@ export class RdxDialogUncontainedComponent {
 Control the dialog's `open` state from a menu item to launch it from a `Menu`.
 
 ```typescript
+import { cn, demoButton, demoDialog, demoMenu } from '../../storybook/styles';
 import { ChangeDetectionStrategy, Component, signal } from '@angular/core';
 import { LucideX } from '@lucide/angular';
 import { dialogImports } from '@radix-ng/primitives/dialog';
 import { RdxMenuModule } from '@radix-ng/primitives/menu';
-import { cn, demoButton, demoDialog, demoMenu } from '../../storybook/styles';
 
 @Component({
     changeDetection: ChangeDetectionStrategy.Eager,
@@ -9338,34 +9338,34 @@ import { cn, demoButton, demoDialog, demoMenu } from '../../storybook/styles';
     imports: [...dialogImports, RdxMenuModule, LucideX],
     template: `
         <ng-container #menu="rdxMenuRoot" rdxMenuRoot>
-            <button [class]="cn(b.base, b.outline, b.size.md)" rdxMenuTrigger>Actions</button>
+            <button rdxMenuTrigger [class]="cn(b.base, b.outline, b.size.md)">Actions</button>
 
             @if (menu.open()) {
-                <div [class]="m.positioner" sideOffset="4" rdxMenuPositioner>
-                    <div [class]="m.popup" rdxMenuPopup>
-                        <button [class]="m.item" rdxMenuItem>Duplicate</button>
-                        <button [class]="m.item" (click)="renameOpen.set(true)" rdxMenuItem>Rename…</button>
-                        <div [class]="m.separator" rdxMenuSeparator></div>
-                        <button [class]="m.item" rdxMenuItem>Archive</button>
+                <div sideOffset="4" rdxMenuPositioner [class]="m.positioner">
+                    <div rdxMenuPopup [class]="m.popup">
+                        <button rdxMenuItem [class]="m.item">Duplicate</button>
+                        <button rdxMenuItem [class]="m.item" (click)="renameOpen.set(true)">Rename…</button>
+                        <div rdxMenuSeparator [class]="m.separator"></div>
+                        <button rdxMenuItem [class]="m.item">Archive</button>
                     </div>
                 </div>
             }
         </ng-container>
 
         <!-- Controlled dialog opened from the menu item. -->
-        <div [(open)]="renameOpen" rdxDialogRoot>
+        <div rdxDialogRoot [(open)]="renameOpen">
             <ng-template rdxDialogPortal>
-                <div [class]="cn(d.backdrop, d.backdropAnimated)" rdxDialogBackdrop></div>
-                <div [class]="cn(d.popup, d.popupAnimated)" rdxDialogPopup>
-                    <h2 [class]="d.title" rdxDialogTitle>Rename item</h2>
-                    <p [class]="d.description" rdxDialogDescription>
+                <div rdxDialogBackdrop [class]="cn(d.backdrop, d.backdropAnimated)"></div>
+                <div rdxDialogPopup [class]="cn(d.popup, d.popupAnimated)">
+                    <h2 rdxDialogTitle [class]="d.title">Rename item</h2>
+                    <p rdxDialogDescription [class]="d.description">
                         Opened by controlling the dialog from a menu item.
                     </p>
                     <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>Rename</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)">Rename</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" />
                     </button>
                 </div>
@@ -9490,10 +9490,10 @@ modal by default but, unlike Alert Dialog, leaves modality and dismissal fully c
 and native CSS animations belong to the consumer.
 
 ```typescript
+import { cn, demoButton, demoDrawer } from '../../storybook/styles';
 import { ChangeDetectionStrategy, Component } from '@angular/core';
 import { LucideX } from '@lucide/angular';
 import { drawerImports } from '@radix-ng/primitives/drawer';
-import { cn, demoButton, demoDrawer } from '../../storybook/styles';
 
 @Component({
     changeDetection: ChangeDetectionStrategy.Eager,
@@ -9501,17 +9501,17 @@ import { cn, demoButton, demoDrawer } from '../../storybook/styles';
     imports: [...drawerImports, LucideX],
     template: `
         <div rdxDrawerRoot>
-            <button [class]="cn(b.base, b.primary, b.size.md)" rdxDrawerTrigger>Open drawer</button>
+            <button rdxDrawerTrigger [class]="cn(b.base, b.primary, b.size.md)">Open drawer</button>
 
             <ng-template rdxDrawerPortal>
-                <div [class]="cn(d.backdrop, d.overlayAnimated)" rdxDrawerBackdrop></div>
+                <div rdxDrawerBackdrop [class]="cn(d.backdrop, d.overlayAnimated)"></div>
 
-                <div [class]="cn(d.popup, d.side.bottom)" rdxDrawerPopup>
-                    <div [class]="d.grip" aria-hidden="true"></div>
+                <div rdxDrawerPopup [class]="cn(d.popup, d.side.bottom)">
+                    <div aria-hidden="true" [class]="d.grip"></div>
 
-                    <div [class]="d.body" rdxDrawerContent>
-                        <h2 [class]="d.title" rdxDrawerTitle>Drag me down</h2>
-                        <p [class]="d.description" rdxDrawerDescription>
+                    <div rdxDrawerContent [class]="d.body">
+                        <h2 rdxDrawerTitle [class]="d.title">Drag me down</h2>
+                        <p rdxDrawerDescription [class]="d.description">
                             Swipe the sheet downwards or press Escape to dismiss it. Releasing before the halfway point
                             snaps it back.
                         </p>
@@ -9522,12 +9522,12 @@ import { cn, demoButton, demoDrawer } from '../../storybook/styles';
                         </p>
 
                         <div [class]="d.footer">
-                            <button [class]="cn(b.base, b.outline, b.size.sm)" rdxDrawerClose>Cancel</button>
-                            <button [class]="cn(b.base, b.primary, b.size.sm)" rdxDrawerClose>Confirm</button>
+                            <button rdxDrawerClose [class]="cn(b.base, b.outline, b.size.sm)">Cancel</button>
+                            <button rdxDrawerClose [class]="cn(b.base, b.primary, b.size.sm)">Confirm</button>
                         </div>
                     </div>
 
-                    <button [class]="d.close" aria-label="Close" rdxDrawerClose>
+                    <button aria-label="Close" rdxDrawerClose [class]="d.close">
                         <svg aria-hidden="true" lucideX size="16"></svg>
                     </button>
                 </div>
@@ -9654,10 +9654,10 @@ and its slide-out keyframe should hold the closed position with `forwards`:
 A bottom sheet you can swipe down to dismiss, with an accessible title, description, and close buttons.
 
 ```typescript
+import { cn, demoButton, demoDrawer } from '../../storybook/styles';
 import { ChangeDetectionStrategy, Component } from '@angular/core';
 import { LucideX } from '@lucide/angular';
 import { drawerImports } from '@radix-ng/primitives/drawer';
-import { cn, demoButton, demoDrawer } from '../../storybook/styles';
 
 @Component({
     changeDetection: ChangeDetectionStrategy.Eager,
@@ -9665,17 +9665,17 @@ import { cn, demoButton, demoDrawer } from '../../storybook/styles';
     imports: [...drawerImports, LucideX],
     template: `
         <div rdxDrawerRoot>
-            <button [class]="cn(b.base, b.primary, b.size.md)" rdxDrawerTrigger>Open drawer</button>
+            <button rdxDrawerTrigger [class]="cn(b.base, b.primary, b.size.md)">Open drawer</button>
 
             <ng-template rdxDrawerPortal>
-                <div [class]="cn(d.backdrop, d.overlayAnimated)" rdxDrawerBackdrop></div>
+                <div rdxDrawerBackdrop [class]="cn(d.backdrop, d.overlayAnimated)"></div>
 
-                <div [class]="cn(d.popup, d.side.bottom)" rdxDrawerPopup>
-                    <div [class]="d.grip" aria-hidden="true"></div>
+                <div rdxDrawerPopup [class]="cn(d.popup, d.side.bottom)">
+                    <div aria-hidden="true" [class]="d.grip"></div>
 
-                    <div [class]="d.body" rdxDrawerContent>
-                        <h2 [class]="d.title" rdxDrawerTitle>Drag me down</h2>
-                        <p [class]="d.description" rdxDrawerDescription>
+                    <div rdxDrawerContent [class]="d.body">
+                        <h2 rdxDrawerTitle [class]="d.title">Drag me down</h2>
+                        <p rdxDrawerDescription [class]="d.description">
                             Swipe the sheet downwards or press Escape to dismiss it. Releasing before the halfway point
                             snaps it back.
                         </p>
@@ -9686,12 +9686,12 @@ import { cn, demoButton, demoDrawer } from '../../storybook/styles';
                         </p>
 
                         <div [class]="d.footer">
-                            <button [class]="cn(b.base, b.outline, b.size.sm)" rdxDrawerClose>Cancel</button>
-                            <button [class]="cn(b.base, b.primary, b.size.sm)" rdxDrawerClose>Confirm</button>
+                            <button rdxDrawerClose [class]="cn(b.base, b.outline, b.size.sm)">Cancel</button>
+                            <button rdxDrawerClose [class]="cn(b.base, b.primary, b.size.sm)">Confirm</button>
                         </div>
                     </div>
 
-                    <button [class]="d.close" aria-label="Close" rdxDrawerClose>
+                    <button aria-label="Close" rdxDrawerClose [class]="d.close">
                         <svg aria-hidden="true" lucideX size="16"></svg>
                     </button>
                 </div>
@@ -9712,9 +9712,9 @@ Own the open state with `[(open)]` and drive it from anywhere — buttons outsid
 close it alongside the trigger.
 
 ```typescript
+import { cn, demoButton, demoDrawer } from '../../storybook/styles';
 import { ChangeDetectionStrategy, Component, signal } from '@angular/core';
 import { drawerImports } from '@radix-ng/primitives/drawer';
-import { cn, demoButton, demoDrawer } from '../../storybook/styles';
 
 @Component({
     changeDetection: ChangeDetectionStrategy.Eager,
@@ -9726,18 +9726,18 @@ import { cn, demoButton, demoDrawer } from '../../storybook/styles';
 
             <button [class]="cn(b.base, b.outline, b.size.sm)" (click)="open.set(true)">Open from outside</button>
 
-            <div [(open)]="open" rdxDrawerRoot>
-                <button [class]="cn(b.base, b.primary, b.size.md)" rdxDrawerTrigger>Open drawer</button>
+            <div rdxDrawerRoot [(open)]="open">
+                <button rdxDrawerTrigger [class]="cn(b.base, b.primary, b.size.md)">Open drawer</button>
 
                 <ng-template rdxDrawerPortal>
-                    <div [class]="cn(d.backdrop, d.overlayAnimated)" rdxDrawerBackdrop></div>
+                    <div rdxDrawerBackdrop [class]="cn(d.backdrop, d.overlayAnimated)"></div>
 
-                    <div [class]="cn(d.popup, d.side.bottom)" rdxDrawerPopup>
-                        <div [class]="d.grip" aria-hidden="true"></div>
+                    <div rdxDrawerPopup [class]="cn(d.popup, d.side.bottom)">
+                        <div aria-hidden="true" [class]="d.grip"></div>
 
-                        <div [class]="d.body" rdxDrawerContent>
-                            <h2 [class]="d.title" rdxDrawerTitle>Controlled drawer</h2>
-                            <p [class]="d.description" rdxDrawerDescription>
+                        <div rdxDrawerContent [class]="d.body">
+                            <h2 rdxDrawerTitle [class]="d.title">Controlled drawer</h2>
+                            <p rdxDrawerDescription [class]="d.description">
                                 The open state is owned by the component and bound with
                                 <code>[(open)]</code>
                                 .
@@ -9769,9 +9769,9 @@ Set `[swipeDirection]` and position the popup with CSS to anchor the drawer to a
 controls the dismiss gesture; the visual side is consumer CSS.
 
 ```typescript
+import { cn, demoButton, demoDrawer } from '../../storybook/styles';
 import { ChangeDetectionStrategy, Component } from '@angular/core';
 import { drawerImports, RdxDrawerSwipeDirection } from '@radix-ng/primitives/drawer';
-import { cn, demoButton, demoDrawer } from '../../storybook/styles';
 
 type DrawerSide = 'top' | 'right' | 'bottom' | 'left';
 
@@ -9789,23 +9789,23 @@ const SIDES: { side: DrawerSide; swipeDirection: RdxDrawerSwipeDirection }[] = [
     template: `
         <div class="flex flex-wrap gap-3">
             @for (item of sides; track item.side) {
-                <div [swipeDirection]="item.swipeDirection" rdxDrawerRoot>
-                    <button [class]="cn(b.base, b.outline, b.size.md, 'capitalize')" rdxDrawerTrigger>
+                <div rdxDrawerRoot [swipeDirection]="item.swipeDirection">
+                    <button rdxDrawerTrigger [class]="cn(b.base, b.outline, b.size.md, 'capitalize')">
                         {{ item.side }}
                     </button>
 
                     <ng-template rdxDrawerPortal>
-                        <div [class]="cn(d.backdrop, d.overlayAnimated)" rdxDrawerBackdrop></div>
+                        <div rdxDrawerBackdrop [class]="cn(d.backdrop, d.overlayAnimated)"></div>
 
-                        <div [class]="cn(d.popup, d.side[item.side])" rdxDrawerPopup>
-                            <div [class]="d.body" rdxDrawerContent>
-                                <h2 [class]="cn(d.title, 'capitalize')" rdxDrawerTitle>{{ item.side }} drawer</h2>
-                                <p [class]="d.description" rdxDrawerDescription>
+                        <div rdxDrawerPopup [class]="cn(d.popup, d.side[item.side])">
+                            <div rdxDrawerContent [class]="d.body">
+                                <h2 rdxDrawerTitle [class]="cn(d.title, 'capitalize')">{{ item.side }} drawer</h2>
+                                <p rdxDrawerDescription [class]="d.description">
                                     Swipe {{ item.swipeDirection }} to dismiss.
                                 </p>
 
                                 <div [class]="d.footer">
-                                    <button [class]="cn(b.base, b.primary, b.size.sm)" rdxDrawerClose>Done</button>
+                                    <button rdxDrawerClose [class]="cn(b.base, b.primary, b.size.sm)">Done</button>
                                 </div>
                             </div>
                         </div>
@@ -9834,9 +9834,9 @@ points, with a fixed drag header and independently scrollable content. Add `[sna
 to step one point per release instead of skipping.
 
 ```typescript
+import { cn, demoButton, demoDrawer } from '../../storybook/styles';
 import { ChangeDetectionStrategy, Component } from '@angular/core';
 import { drawerImports, RdxDrawerSnapPoint } from '@radix-ng/primitives/drawer';
-import { cn, demoButton, demoDrawer } from '../../storybook/styles';
 
 const TOP_MARGIN_REM = 1;
 const VISIBLE_SNAP_POINTS_REM = [30];
@@ -9850,11 +9850,12 @@ function toViewportSnapPoint(heightRem: number): RdxDrawerSnapPoint {
     selector: 'rdx-drawer-snap-points',
     imports: [...drawerImports],
     template: `
-        <div [snapPoints]="snapPoints" rdxDrawerRoot>
-            <button [class]="cn(b.base, b.outline, b.size.sm)" rdxDrawerTrigger>Open snap drawer</button>
+        <div rdxDrawerRoot [snapPoints]="snapPoints">
+            <button rdxDrawerTrigger [class]="cn(b.base, b.outline, b.size.sm)">Open snap drawer</button>
 
             <ng-template rdxDrawerPortal>
                 <div
+                    rdxDrawerBackdrop
                     [class]="
                         cn(
                             'bg-foreground/20 fixed inset-0 min-h-dvh opacity-[calc(1-var(--drawer-swipe-progress))]',
@@ -9864,7 +9865,6 @@ function toViewportSnapPoint(heightRem: number): RdxDrawerSnapPoint {
                             'data-[ending-style]:opacity-0 data-[starting-style]:opacity-0 data-[swiping]:duration-0'
                         )
                     "
-                    rdxDrawerBackdrop
                 ></div>
 
                 <div class="fixed inset-0 flex touch-none items-end justify-center" rdxDrawerViewport>
@@ -9893,7 +9893,7 @@ function toViewportSnapPoint(heightRem: number): RdxDrawerSnapPoint {
                                 </div>
 
                                 <div class="flex items-center justify-end gap-3">
-                                    <button [class]="cn(b.base, b.outline, b.size.sm)" rdxDrawerClose>Close</button>
+                                    <button rdxDrawerClose [class]="cn(b.base, b.outline, b.size.sm)">Close</button>
                                 </div>
                             </div>
                         </div>
@@ -9920,9 +9920,9 @@ Base UI's right-edge swipe-area demo: the non-modal drawer portals back into a l
 `overflow-hidden` container and uses `rdxDrawerViewport` to position the popup inside it.
 
 ```typescript
+import { cn, demoButton, demoDrawer } from '../../storybook/styles';
 import { ChangeDetectionStrategy, Component } from '@angular/core';
 import { drawerImports } from '@radix-ng/primitives/drawer';
-import { cn, demoButton, demoDrawer } from '../../storybook/styles';
 
 @Component({
     changeDetection: ChangeDetectionStrategy.Eager,
@@ -9930,10 +9930,10 @@ import { cn, demoButton, demoDrawer } from '../../storybook/styles';
     imports: [...drawerImports],
     template: `
         <div
-            class="border-border bg-background text-foreground relative min-h-80 w-full max-w-2xl overflow-hidden border"
             #portalContainer
+            class="border-border bg-background text-foreground relative min-h-80 w-full max-w-2xl overflow-hidden border"
         >
-            <div [modal]="false" swipeDirection="right" rdxDrawerRoot>
+            <div swipeDirection="right" rdxDrawerRoot [modal]="false">
                 <div
                     class="border-primary bg-primary/10 absolute inset-y-0 right-0 z-[1] w-10 cursor-grab border-l-2 border-dashed data-[swiping]:cursor-grabbing"
                     rdxDrawerSwipeArea
@@ -9949,8 +9949,9 @@ import { cn, demoButton, demoDrawer } from '../../storybook/styles';
                     <p class="text-muted-foreground text-sm">Swipe from the right edge to open the drawer.</p>
                 </div>
 
-                <ng-template [container]="portalContainer" rdxDrawerPortal>
+                <ng-template rdxDrawerPortal [container]="portalContainer">
                     <div
+                        rdxDrawerBackdrop
                         [class]="
                             cn(
                                 'bg-foreground/20 absolute inset-0 opacity-[calc(1-var(--drawer-swipe-progress))]',
@@ -9960,7 +9961,6 @@ import { cn, demoButton, demoDrawer } from '../../storybook/styles';
                                 'data-[ending-style]:opacity-0 data-[starting-style]:opacity-0 data-[swiping]:duration-0'
                             )
                         "
-                        rdxDrawerBackdrop
                     ></div>
 
                     <div class="absolute inset-0 z-20 flex items-stretch justify-end" rdxDrawerViewport>
@@ -9969,12 +9969,12 @@ import { cn, demoButton, demoDrawer } from '../../storybook/styles';
                             rdxDrawerPopup
                         >
                             <div class="mx-auto w-full max-w-lg" rdxDrawerContent>
-                                <h2 [class]="d.title" rdxDrawerTitle>Library</h2>
-                                <p [class]="d.description" rdxDrawerDescription>
+                                <h2 rdxDrawerTitle [class]="d.title">Library</h2>
+                                <p rdxDrawerDescription [class]="d.description">
                                     Swipe from the edge whenever you want to jump back into your playlists.
                                 </p>
                                 <div [class]="d.footer">
-                                    <button [class]="cn(b.base, b.outline, b.size.sm)" rdxDrawerClose>Close</button>
+                                    <button rdxDrawerClose [class]="cn(b.base, b.outline, b.size.sm)">Close</button>
                                 </div>
                             </div>
                         </div>
@@ -9997,6 +9997,7 @@ A taller sheet whose body scrolls. The swipe gesture yields to scrolling inside
 until the scroll reaches its edge, so the drawer only swipes away from the top of the list.
 
 ```typescript
+import { cn, demoButton, demoCard, demoDrawer, demoFocusRing } from '../../storybook/styles';
 import { ChangeDetectionStrategy, Component } from '@angular/core';
 import { drawerImports } from '@radix-ng/primitives/drawer';
 import {
@@ -10006,7 +10007,6 @@ import {
     RdxScrollAreaThumb,
     RdxScrollAreaViewport
 } from '@radix-ng/primitives/scroll-area';
-import { cn, demoButton, demoCard, demoDrawer, demoFocusRing } from '../../storybook/styles';
 
 const ITEMS = [
     { href: '/react/overview', label: 'Overview' },
@@ -10068,14 +10068,14 @@ const LONG_LIST = [
     ],
     template: `
         <div rdxDrawerRoot>
-            <button [class]="cn(b.base, b.primary, 'h-8 px-3 text-sm leading-none font-normal')" rdxDrawerTrigger>
+            <button rdxDrawerTrigger [class]="cn(b.base, b.primary, 'h-8 px-3 text-sm leading-none font-normal')">
                 Open mobile menu
             </button>
 
             <ng-template rdxDrawerPortal>
                 <div
-                    [class]="cn(d.backdrop, d.overlayAnimated, 'opacity-[calc(1-var(--drawer-swipe-progress))]')"
                     rdxDrawerBackdrop
+                    [class]="cn(d.backdrop, d.overlayAnimated, 'opacity-[calc(1-var(--drawer-swipe-progress))]')"
                 ></div>
 
                 <div class="group fixed inset-0 z-50" rdxDrawerViewport>
@@ -10086,6 +10086,7 @@ const LONG_LIST = [
                                 rdxScrollAreaContent
                             >
                                 <div
+                                    rdxDrawerPopup
                                     [class]="
                                         cn(
                                             card,
@@ -10097,16 +10098,15 @@ const LONG_LIST = [
                                             'min-[42rem]:rounded-2xl min-[42rem]:border'
                                         )
                                     "
-                                    rdxDrawerPopup
                                 >
                                     <nav class="relative flex flex-col px-6 pt-4 pb-6" aria-label="Navigation">
                                         <div class="grid grid-cols-[1fr_auto_1fr] items-start">
                                             <svg class="h-9 w-9" aria-hidden="true" />
                                             <div class="bg-muted h-1.5 w-12 justify-self-center rounded-full"></div>
                                             <button
-                                                [class]="cn(b.base, b.ghost, 'h-8 w-8 justify-self-end p-0')"
                                                 aria-label="Close menu"
                                                 rdxDrawerClose
+                                                [class]="cn(b.base, b.ghost, 'h-8 w-8 justify-self-end p-0')"
                                             >
                                                 <svg
                                                     class="block"
@@ -10125,8 +10125,8 @@ const LONG_LIST = [
                                         </div>
 
                                         <div class="w-full" rdxDrawerContent>
-                                            <h2 [class]="cn(d.title, 'm-0 mb-1')" rdxDrawerTitle>Menu</h2>
-                                            <p [class]="cn(d.description, 'm-0 mb-5')" rdxDrawerDescription>
+                                            <h2 rdxDrawerTitle [class]="cn(d.title, 'm-0 mb-1')">Menu</h2>
+                                            <p rdxDrawerDescription [class]="cn(d.description, 'm-0 mb-5')">
                                                 Scroll the long list. Flick down from the top to dismiss.
                                             </p>
 
@@ -10194,9 +10194,9 @@ Set `[modal]="false"` to keep page scrolling and outside pointer interactions av
 drawer is open; there is no backdrop in this mode.
 
 ```typescript
+import { cn, demoButton, demoDrawer } from '../../storybook/styles';
 import { ChangeDetectionStrategy, Component, signal } from '@angular/core';
 import { drawerImports } from '@radix-ng/primitives/drawer';
-import { cn, demoButton, demoDrawer } from '../../storybook/styles';
 
 @Component({
     changeDetection: ChangeDetectionStrategy.Eager,
@@ -10209,21 +10209,21 @@ import { cn, demoButton, demoDrawer } from '../../storybook/styles';
                 there is no backdrop.
             </p>
 
-            <div [modal]="false" rdxDrawerRoot>
-                <button [class]="cn(b.base, b.primary, b.size.md)" rdxDrawerTrigger>Open non-modal drawer</button>
+            <div rdxDrawerRoot [modal]="false">
+                <button rdxDrawerTrigger [class]="cn(b.base, b.primary, b.size.md)">Open non-modal drawer</button>
 
                 <ng-template rdxDrawerPortal>
-                    <div [class]="cn(d.popup, d.side.bottom, d.overlayAnimated)" rdxDrawerPopup>
-                        <div [class]="d.grip" aria-hidden="true"></div>
+                    <div rdxDrawerPopup [class]="cn(d.popup, d.side.bottom, d.overlayAnimated)">
+                        <div aria-hidden="true" [class]="d.grip"></div>
 
-                        <div [class]="d.body" rdxDrawerContent>
-                            <h2 [class]="d.title" rdxDrawerTitle>Non-modal drawer</h2>
-                            <p [class]="d.description" rdxDrawerDescription>
+                        <div rdxDrawerContent [class]="d.body">
+                            <h2 rdxDrawerTitle [class]="d.title">Non-modal drawer</h2>
+                            <p rdxDrawerDescription [class]="d.description">
                                 Keep interacting with the rest of the page; the counter below still works.
                             </p>
 
                             <div [class]="d.footer">
-                                <button [class]="cn(b.base, b.primary, b.size.sm)" rdxDrawerClose>Close</button>
+                                <button rdxDrawerClose [class]="cn(b.base, b.primary, b.size.sm)">Close</button>
                             </div>
                         </div>
                     </div>
@@ -10250,9 +10250,9 @@ An iOS-style action sheet: grouped actions with a separated destructive action a
 each closing the drawer.
 
 ```typescript
+import { cn, demoButton, demoDrawer } from '../../storybook/styles';
 import { ChangeDetectionStrategy, Component } from '@angular/core';
 import { drawerImports } from '@radix-ng/primitives/drawer';
-import { cn, demoButton, demoDrawer } from '../../storybook/styles';
 
 /** A full-width action-sheet row. */
 const action = cn(
@@ -10266,13 +10266,13 @@ const action = cn(
     imports: [...drawerImports],
     template: `
         <div rdxDrawerRoot>
-            <button [class]="cn(b.base, b.primary, b.size.md)" rdxDrawerTrigger>Photo options</button>
+            <button rdxDrawerTrigger [class]="cn(b.base, b.primary, b.size.md)">Photo options</button>
 
             <ng-template rdxDrawerPortal>
-                <div [class]="cn(d.backdrop, d.overlayAnimated)" rdxDrawerBackdrop></div>
+                <div rdxDrawerBackdrop [class]="cn(d.backdrop, d.overlayAnimated)"></div>
 
-                <div [class]="cn(d.popup, d.side.bottom)" rdxDrawerPopup>
-                    <div [class]="d.grip" aria-hidden="true"></div>
+                <div rdxDrawerPopup [class]="cn(d.popup, d.side.bottom)">
+                    <div aria-hidden="true" [class]="d.grip"></div>
 
                     <div class="overflow-y-auto pb-2" rdxDrawerContent>
                         <h2 class="sr-only" rdxDrawerTitle>Photo options</h2>
@@ -10282,22 +10282,22 @@ const action = cn(
 
                         <!-- Primary group of actions. -->
                         <div class="divide-border border-border flex flex-col divide-y border-y">
-                            <button [class]="action" rdxDrawerClose>Save to Photos</button>
-                            <button [class]="action" rdxDrawerClose>Copy Link</button>
-                            <button [class]="action" rdxDrawerClose>Add to Album</button>
+                            <button rdxDrawerClose [class]="action">Save to Photos</button>
+                            <button rdxDrawerClose [class]="action">Copy Link</button>
+                            <button rdxDrawerClose [class]="action">Add to Album</button>
                         </div>
 
                         <!-- Destructive action, set apart by a full-bleed spacer. -->
                         <div class="bg-muted h-2" aria-hidden="true"></div>
                         <button
-                            [class]="cn(action, 'border-border text-destructive border-b font-medium')"
                             rdxDrawerClose
+                            [class]="cn(action, 'border-border text-destructive border-b font-medium')"
                         >
                             Delete Photo
                         </button>
 
                         <div class="bg-muted h-2" aria-hidden="true"></div>
-                        <button [class]="cn(action, 'font-semibold')" rdxDrawerClose>Cancel</button>
+                        <button rdxDrawerClose [class]="cn(action, 'font-semibold')">Cancel</button>
                     </div>
                 </div>
             </ng-template>
@@ -10321,9 +10321,9 @@ handling the parent drawer while a nested drawer is open. Use the CSS variable i
 popup max-height.
 
 ```typescript
+import { cn, demoButton, demoDrawer, demoInput } from '../../storybook/styles';
 import { ChangeDetectionStrategy, Component } from '@angular/core';
 import { drawerImports } from '@radix-ng/primitives/drawer';
-import { cn, demoButton, demoDrawer, demoInput } from '../../storybook/styles';
 
 @Component({
     changeDetection: ChangeDetectionStrategy.Eager,
@@ -10331,10 +10331,10 @@ import { cn, demoButton, demoDrawer, demoInput } from '../../storybook/styles';
     imports: [...drawerImports],
     template: `
         <div rdxDrawerRoot>
-            <button [class]="cn(b.base, b.primary, b.size.md)" rdxDrawerTrigger>Edit delivery</button>
+            <button rdxDrawerTrigger [class]="cn(b.base, b.primary, b.size.md)">Edit delivery</button>
 
             <ng-template rdxDrawerPortal>
-                <div [class]="cn(d.backdrop, d.overlayAnimated)" rdxDrawerBackdrop></div>
+                <div rdxDrawerBackdrop [class]="cn(d.backdrop, d.overlayAnimated)"></div>
 
                 <div
                     class="fixed inset-0 z-50 flex items-end justify-center px-4 pb-[calc(env(safe-area-inset-bottom,0px)+var(--drawer-keyboard-inset,0px))] transition-[padding-bottom] duration-200"
@@ -10351,8 +10351,8 @@ import { cn, demoButton, demoDrawer, demoInput } from '../../storybook/styles';
                             class="max-h-[inherit] [scroll-padding-bottom:calc(var(--drawer-keyboard-inset,0px)+4rem)] overflow-y-auto px-6 pb-6"
                         >
                             <div class="mb-5">
-                                <h2 [class]="d.title" rdxDrawerTitle>Delivery details</h2>
-                                <p [class]="d.description" rdxDrawerDescription>
+                                <h2 rdxDrawerTitle [class]="d.title">Delivery details</h2>
+                                <p rdxDrawerDescription [class]="d.description">
                                     Confirm the address and contact fields before placing the order.
                                 </p>
                             </div>
@@ -10360,22 +10360,22 @@ import { cn, demoButton, demoDrawer, demoInput } from '../../storybook/styles';
                             <div class="grid gap-4">
                                 <label class="grid gap-1.5">
                                     <span class="text-foreground text-sm font-medium">Name</span>
-                                    <input [class]="i.base" value="Ada Lovelace" />
+                                    <input value="Ada Lovelace" [class]="i.base" />
                                 </label>
 
                                 <label class="grid gap-1.5">
                                     <span class="text-foreground text-sm font-medium">Phone</span>
-                                    <input [class]="i.base" inputmode="tel" value="+1 415 555 0142" />
+                                    <input inputmode="tel" value="+1 415 555 0142" [class]="i.base" />
                                 </label>
 
                                 <label class="grid gap-1.5">
                                     <span class="text-foreground text-sm font-medium">Street address</span>
-                                    <input [class]="i.base" value="12 Market Street" />
+                                    <input value="12 Market Street" [class]="i.base" />
                                 </label>
 
                                 <label class="grid gap-1.5">
                                     <span class="text-foreground text-sm font-medium">Apartment</span>
-                                    <input [class]="i.base" placeholder="Optional" />
+                                    <input placeholder="Optional" [class]="i.base" />
                                 </label>
 
                                 <label class="grid gap-1.5">
@@ -10389,10 +10389,10 @@ Leave at reception if nobody answers.</textarea
                             </div>
 
                             <div class="bg-card sticky bottom-0 mt-6 flex justify-end gap-2 border-t py-4">
-                                <button [class]="cn(b.base, b.outline, b.size.sm)" type="button" rdxDrawerClose>
+                                <button type="button" rdxDrawerClose [class]="cn(b.base, b.outline, b.size.sm)">
                                     Cancel
                                 </button>
-                                <button [class]="cn(b.base, b.primary, b.size.sm)" type="button" rdxDrawerClose>
+                                <button type="button" rdxDrawerClose [class]="cn(b.base, b.primary, b.size.sm)">
                                     Save
                                 </button>
                             </div>
@@ -10418,9 +10418,9 @@ detected through the dialog hierarchy, so every parent gains `data-nested-drawer
 `--nested-drawers`) and recedes behind the one in front.
 
 ```typescript
+import { cn, demoButton, demoDrawer } from '../../storybook/styles';
 import { ChangeDetectionStrategy, Component, input } from '@angular/core';
 import { drawerImports } from '@radix-ng/primitives/drawer';
-import { cn, demoButton, demoDrawer } from '../../storybook/styles';
 
 /**
  * A self-recursive drawer: each level's content hosts the trigger for the next level, so drawers
@@ -10433,19 +10433,19 @@ import { cn, demoButton, demoDrawer } from '../../storybook/styles';
     imports: [...drawerImports],
     template: `
         <div rdxDrawerRoot>
-            <button [class]="cn(b.base, level() === 1 ? b.primary : b.outline, b.size.md)" rdxDrawerTrigger>
+            <button rdxDrawerTrigger [class]="cn(b.base, level() === 1 ? b.primary : b.outline, b.size.md)">
                 {{ level() === 1 ? 'Open drawer' : 'Open drawer ' + level() }}
             </button>
 
             <ng-template rdxDrawerPortal>
-                <div [class]="cn(d.backdrop, d.overlayAnimated)" rdxDrawerBackdrop></div>
+                <div rdxDrawerBackdrop [class]="cn(d.backdrop, d.overlayAnimated)"></div>
 
-                <div [class]="cn(d.popup, d.side.bottom)" rdxDrawerPopup>
-                    <div [class]="d.grip" aria-hidden="true"></div>
+                <div rdxDrawerPopup [class]="cn(d.popup, d.side.bottom)">
+                    <div aria-hidden="true" [class]="d.grip"></div>
 
-                    <div [class]="d.body" rdxDrawerContent>
-                        <h2 [class]="d.title" rdxDrawerTitle>Drawer level {{ level() }}</h2>
-                        <p [class]="d.description" rdxDrawerDescription>
+                    <div rdxDrawerContent [class]="d.body">
+                        <h2 rdxDrawerTitle [class]="d.title">Drawer level {{ level() }}</h2>
+                        <p rdxDrawerDescription [class]="d.description">
                             @if (level() < max()) {
                                 Open another to stack it on top — this one scales back and peeks behind it.
                             } @else {
@@ -10457,7 +10457,7 @@ import { cn, demoButton, demoDrawer } from '../../storybook/styles';
                             @if (level() < max()) {
                                 <rdx-drawer-nested [level]="level() + 1" [max]="max()" />
                             }
-                            <button [class]="cn(b.base, b.outline, b.size.sm)" rdxDrawerClose>Close</button>
+                            <button rdxDrawerClose [class]="cn(b.base, b.outline, b.size.sm)">Close</button>
                         </div>
                     </div>
                 </div>
@@ -10486,9 +10486,9 @@ Both gain `[data-active]`, `--drawer-swipe-progress`, `--nested-drawers`, and
 gesture.
 
 ```typescript
+import { cn, demoButton, demoDrawer } from '../../storybook/styles';
 import { ChangeDetectionStrategy, Component } from '@angular/core';
 import { drawerImports } from '@radix-ng/primitives/drawer';
-import { cn, demoButton, demoDrawer } from '../../storybook/styles';
 
 @Component({
     changeDetection: ChangeDetectionStrategy.Eager,
@@ -10496,7 +10496,7 @@ import { cn, demoButton, demoDrawer } from '../../storybook/styles';
     imports: [...drawerImports],
     template: `
         <div class="w-full" rdxDrawerProvider>
-            <div class="relative w-full overflow-hidden [--bleed:3rem]" #portalContainer>
+            <div #portalContainer class="relative w-full overflow-hidden [--bleed:3rem]">
                 <div class="bg-foreground absolute inset-0" rdxDrawerIndentBackground></div>
 
                 <div
@@ -10504,10 +10504,10 @@ import { cn, demoButton, demoDrawer } from '../../storybook/styles';
                     rdxDrawerIndent
                 >
                     <div class="flex min-h-80 items-center justify-center">
-                        <div [modal]="false" rdxDrawerRoot>
-                            <button [class]="cn(b.base, b.outline, b.size.sm)" rdxDrawerTrigger>Open drawer</button>
+                        <div rdxDrawerRoot [modal]="false">
+                            <button rdxDrawerTrigger [class]="cn(b.base, b.outline, b.size.sm)">Open drawer</button>
 
-                            <ng-template [container]="portalContainer" rdxDrawerPortal>
+                            <ng-template rdxDrawerPortal [container]="portalContainer">
                                 <div
                                     class="bg-foreground/20 absolute inset-0 opacity-[calc(1-var(--drawer-swipe-progress))] transition-opacity duration-[450ms] ease-[cubic-bezier(0.32,0.72,0,1)] data-[ending-style]:opacity-0 data-[starting-style]:opacity-0 data-[swiping]:duration-0"
                                     rdxDrawerBackdrop
@@ -10520,14 +10520,14 @@ import { cn, demoButton, demoDrawer } from '../../storybook/styles';
                                     >
                                         <div class="bg-muted mx-auto mb-4 h-1 w-12"></div>
                                         <div class="mx-auto w-full max-w-lg" rdxDrawerContent>
-                                            <h2 class="text-center" [class]="cn(d.title, 'text-center')" rdxDrawerTitle>
+                                            <h2 class="text-center" rdxDrawerTitle [class]="cn(d.title, 'text-center')">
                                                 Notifications
                                             </h2>
-                                            <p [class]="cn(d.description, 'mb-6 text-center')" rdxDrawerDescription>
+                                            <p rdxDrawerDescription [class]="cn(d.description, 'mb-6 text-center')">
                                                 You are all caught up. Good job!
                                             </p>
                                             <div class="flex justify-center gap-3">
-                                                <button [class]="cn(b.base, b.outline, b.size.sm)" rdxDrawerClose>
+                                                <button rdxDrawerClose [class]="cn(b.base, b.outline, b.size.sm)">
                                                     Close
                                                 </button>
                                             </div>
@@ -10555,9 +10555,9 @@ Create a shared handle with `createRdxDrawerHandle()` when triggers live outside
 handle also supports imperative `open(id)`, `toggle(id)`, and `close()`.
 
 ```typescript
+import { cn, demoButton, demoDrawer } from '../../storybook/styles';
 import { ChangeDetectionStrategy, Component } from '@angular/core';
 import { createRdxDrawerHandle, drawerImports } from '@radix-ng/primitives/drawer';
-import { cn, demoButton, demoDrawer } from '../../storybook/styles';
 
 @Component({
     changeDetection: ChangeDetectionStrategy.Eager,
@@ -10567,10 +10567,10 @@ import { cn, demoButton, demoDrawer } from '../../storybook/styles';
         <div class="flex flex-col items-center gap-3">
             <!-- Triggers live outside the root and are linked through a shared handle. -->
             <div class="flex gap-2">
-                <button id="cart" [class]="cn(b.base, b.outline, b.size.md)" [handle]="handle" rdxDrawerTrigger>
+                <button id="cart" rdxDrawerTrigger [class]="cn(b.base, b.outline, b.size.md)" [handle]="handle">
                     Cart
                 </button>
-                <button id="account" [class]="cn(b.base, b.outline, b.size.md)" [handle]="handle" rdxDrawerTrigger>
+                <button id="account" rdxDrawerTrigger [class]="cn(b.base, b.outline, b.size.md)" [handle]="handle">
                     Account
                 </button>
             </div>
@@ -10579,21 +10579,21 @@ import { cn, demoButton, demoDrawer } from '../../storybook/styles';
                 Open account imperatively
             </button>
 
-            <div [handle]="handle" rdxDrawerRoot>
+            <div rdxDrawerRoot [handle]="handle">
                 <ng-template rdxDrawerPortal>
-                    <div [class]="cn(d.backdrop, d.overlayAnimated)" rdxDrawerBackdrop></div>
+                    <div rdxDrawerBackdrop [class]="cn(d.backdrop, d.overlayAnimated)"></div>
 
-                    <div [class]="cn(d.popup, d.side.right)" rdxDrawerPopup>
-                        <div [class]="d.body" rdxDrawerContent>
-                            <h2 [class]="d.title" rdxDrawerTitle>Detached triggers</h2>
-                            <p [class]="d.description" rdxDrawerDescription>
+                    <div rdxDrawerPopup [class]="cn(d.popup, d.side.right)">
+                        <div rdxDrawerContent [class]="d.body">
+                            <h2 rdxDrawerTitle [class]="d.title">Detached triggers</h2>
+                            <p rdxDrawerDescription [class]="d.description">
                                 The triggers and this drawer are connected with
                                 <code>createRdxDrawerHandle()</code>
                                 rather than DOM nesting.
                             </p>
 
                             <div [class]="d.footer">
-                                <button [class]="cn(b.base, b.primary, b.size.sm)" rdxDrawerClose>Close</button>
+                                <button rdxDrawerClose [class]="cn(b.base, b.primary, b.size.sm)">Close</button>
                             </div>
                         </div>
                     </div>
@@ -10654,6 +10654,7 @@ from context. See the Dialog docs for the trigger and portal inputs.
 #### An inline text field that swaps a read-only preview for an editable input.
 
 ```typescript
+import { cn, demoButton, demoEditable } from '../../storybook/styles';
 import { ChangeDetectionStrategy, Component } from '@angular/core';
 import {
     RdxEditableArea,
@@ -10664,7 +10665,6 @@ import {
     RdxEditableRoot,
     RdxEditableSubmitTrigger
 } from '@radix-ng/primitives/editable';
-import { cn, demoButton, demoEditable } from '../../storybook/styles';
 
 @Component({
     changeDetection: ChangeDetectionStrategy.Eager,
@@ -10681,25 +10681,25 @@ import { cn, demoButton, demoEditable } from '../../storybook/styles';
     template: `
         <div
             #root="rdxEditableRoot"
-            [class]="e.root"
             rdxEditableRoot
             value="Click to edit"
             placeholder="Enter text…"
             submitMode="both"
+            [class]="e.root"
         >
             <div rdxEditableArea>
-                <span #preview="rdxEditablePreview" [class]="e.preview" rdxEditablePreview>
+                <span #preview="rdxEditablePreview" rdxEditablePreview [class]="e.preview">
                     {{ root.value() || preview.placeholder() }}
                 </span>
-                <input [class]="e.input" rdxEditableInput aria-label="Inline value" />
+                <input rdxEditableInput aria-label="Inline value" [class]="e.input" />
             </div>
 
             @if (!root.isEditing()) {
-                <button [class]="cn(b.base, b.outline, b.size.sm)" rdxEditableEditTrigger>Edit</button>
+                <button rdxEditableEditTrigger [class]="cn(b.base, b.outline, b.size.sm)">Edit</button>
             } @else {
                 <div [class]="e.controls">
-                    <button [class]="cn(b.base, b.primary, b.size.sm)" rdxEditableSubmitTrigger>Save</button>
-                    <button [class]="cn(b.base, b.ghost, b.size.sm)" rdxEditableCancelTrigger>Cancel</button>
+                    <button rdxEditableSubmitTrigger [class]="cn(b.base, b.primary, b.size.sm)">Save</button>
+                    <button rdxEditableCancelTrigger [class]="cn(b.base, b.ghost, b.size.sm)">Cancel</button>
                 </div>
             }
         </div>
@@ -10784,6 +10784,7 @@ submitValue(change: RdxEditableValueChangeEvent) {
 Set `activationMode="dblclick"` so the preview only enters edit mode on double-click instead of on focus.
 
 ```typescript
+import { cn, demoButton, demoEditable } from '../../storybook/styles';
 import { ChangeDetectionStrategy, Component } from '@angular/core';
 import {
     RdxEditableArea,
@@ -10793,7 +10794,6 @@ import {
     RdxEditableRoot,
     RdxEditableSubmitTrigger
 } from '@radix-ng/primitives/editable';
-import { cn, demoButton, demoEditable } from '../../storybook/styles';
 
 @Component({
     changeDetection: ChangeDetectionStrategy.Eager,
@@ -10809,24 +10809,24 @@ import { cn, demoButton, demoEditable } from '../../storybook/styles';
     template: `
         <div
             #root="rdxEditableRoot"
-            [class]="e.root"
             rdxEditableRoot
             value="Double-click to edit"
             placeholder="Enter text…"
             activationMode="dblclick"
             submitMode="both"
+            [class]="e.root"
         >
             <div rdxEditableArea>
-                <span #preview="rdxEditablePreview" [class]="e.preview" rdxEditablePreview>
+                <span #preview="rdxEditablePreview" rdxEditablePreview [class]="e.preview">
                     {{ root.value() || preview.placeholder() }}
                 </span>
-                <input [class]="e.input" rdxEditableInput aria-label="Inline value" />
+                <input rdxEditableInput aria-label="Inline value" [class]="e.input" />
             </div>
 
             @if (root.isEditing()) {
                 <div [class]="e.controls">
-                    <button [class]="cn(b.base, b.primary, b.size.sm)" rdxEditableSubmitTrigger>Save</button>
-                    <button [class]="cn(b.base, b.ghost, b.size.sm)" rdxEditableCancelTrigger>Cancel</button>
+                    <button rdxEditableSubmitTrigger [class]="cn(b.base, b.primary, b.size.sm)">Save</button>
+                    <button rdxEditableCancelTrigger [class]="cn(b.base, b.ghost, b.size.sm)">Cancel</button>
                 </div>
             }
         </div>
@@ -10861,7 +10861,7 @@ import { RdxEditableArea, RdxEditableInput, RdxEditablePreview, RdxEditableRoot
             autoResize
             submitMode="both"
         >
-            <div [class]="area" rdxEditableArea>
+            <div rdxEditableArea [class]="area">
                 <span #preview="rdxEditablePreview" rdxEditablePreview>
                     {{ root.value() || preview.placeholder() }}
                 </span>
@@ -10929,13 +10929,13 @@ Field is form-agnostic. It does not replace Angular Forms; pass validation state
 Forms, template-driven forms, or Signal Forms when using them.
 
 ```typescript
-import { ChangeDetectionStrategy, Component } from '@angular/core';
 import { RdxFieldControl } from '../src/field-control';
 import { RdxFieldDescription } from '../src/field-description';
 import { RdxFieldError } from '../src/field-error';
 import { RdxFieldLabel } from '../src/field-label';
 import { RdxFieldRoot } from '../src/field-root';
 import { fieldDescription, fieldError, fieldLabel } from './field.shared';
+import { ChangeDetectionStrategy, Component } from '@angular/core';
 
 @Component({
     changeDetection: ChangeDetectionStrategy.Eager,
@@ -10943,10 +10943,10 @@ import { fieldDescription, fieldError, fieldLabel } from './field.shared';
     imports: [RdxFieldRoot, RdxFieldLabel, RdxFieldControl, RdxFieldDescription, RdxFieldError],
     template: `
         <div class="flex w-80 flex-col gap-2" rdxFieldRoot required>
-            <label [class]="labelClass" rdxFieldLabel>Email</label>
-            <input [class]="inputClass" rdxFieldControl type="email" placeholder="name@example.com" />
-            <p [class]="descriptionClass" rdxFieldDescription>Used for account notifications.</p>
-            <p [class]="errorClass" rdxFieldError>Enter a valid email address.</p>
+            <label rdxFieldLabel [class]="labelClass">Email</label>
+            <input rdxFieldControl type="email" placeholder="name@example.com" [class]="inputClass" />
+            <p rdxFieldDescription [class]="descriptionClass">Used for account notifications.</p>
+            <p rdxFieldError [class]="errorClass">Enter a valid email address.</p>
         </div>
     `
 })
@@ -11016,13 +11016,13 @@ reflecting the field's validation state; its `disabled` is OR'd with the root's.
 The root owns the relationships between the field parts.
 
 ```typescript
-import { ChangeDetectionStrategy, Component } from '@angular/core';
 import { RdxFieldControl } from '../src/field-control';
 import { RdxFieldDescription } from '../src/field-description';
 import { RdxFieldError } from '../src/field-error';
 import { RdxFieldLabel } from '../src/field-label';
 import { RdxFieldRoot } from '../src/field-root';
 import { fieldDescription, fieldError, fieldLabel } from './field.shared';
+import { ChangeDetectionStrategy, Component } from '@angular/core';
 
 @Component({
     changeDetection: ChangeDetectionStrategy.Eager,
@@ -11030,10 +11030,10 @@ import { fieldDescription, fieldError, fieldLabel } from './field.shared';
     imports: [RdxFieldRoot, RdxFieldLabel, RdxFieldControl, RdxFieldDescription, RdxFieldError],
     template: `
         <div class="flex w-80 flex-col gap-2" rdxFieldRoot required>
-            <label [class]="labelClass" rdxFieldLabel>Email</label>
-            <input [class]="inputClass" rdxFieldControl type="email" placeholder="name@example.com" />
-            <p [class]="descriptionClass" rdxFieldDescription>Used for account notifications.</p>
-            <p [class]="errorClass" rdxFieldError>Enter a valid email address.</p>
+            <label rdxFieldLabel [class]="labelClass">Email</label>
+            <input rdxFieldControl type="email" placeholder="name@example.com" [class]="inputClass" />
+            <p rdxFieldDescription [class]="descriptionClass">Used for account notifications.</p>
+            <p rdxFieldError [class]="errorClass">Enter a valid email address.</p>
         </div>
     `
 })
@@ -11051,13 +11051,13 @@ export class FieldDefaultExample {
 Pass invalid, dirty, and touched state from your form model.
 
 ```typescript
-import { ChangeDetectionStrategy, Component } from '@angular/core';
 import { RdxFieldControl } from '../src/field-control';
 import { RdxFieldDescription } from '../src/field-description';
 import { RdxFieldError } from '../src/field-error';
 import { RdxFieldLabel } from '../src/field-label';
 import { RdxFieldRoot } from '../src/field-root';
 import { fieldDescription, fieldError, fieldInputInvalid, fieldLabel } from './field.shared';
+import { ChangeDetectionStrategy, Component } from '@angular/core';
 
 @Component({
     changeDetection: ChangeDetectionStrategy.Eager,
@@ -11065,16 +11065,16 @@ import { fieldDescription, fieldError, fieldInputInvalid, fieldLabel } from './f
     imports: [RdxFieldRoot, RdxFieldLabel, RdxFieldControl, RdxFieldDescription, RdxFieldError],
     template: `
         <div class="flex w-80 flex-col gap-2" rdxFieldRoot invalid required dirty touched>
-            <label [class]="labelClass" rdxFieldLabel>Workspace name</label>
+            <label rdxFieldLabel [class]="labelClass">Workspace name</label>
             <input
-                [class]="inputClass"
                 rdxFieldControl
                 value=""
                 placeholder="acme"
                 aria-errormessage="workspace-error"
+                [class]="inputClass"
             />
-            <p [class]="descriptionClass" rdxFieldDescription>Use lowercase letters and hyphens.</p>
-            <p id="workspace-error" [class]="errorClass" rdxFieldError>Workspace name is required.</p>
+            <p rdxFieldDescription [class]="descriptionClass">Use lowercase letters and hyphens.</p>
+            <p id="workspace-error" rdxFieldError [class]="errorClass">Workspace name is required.</p>
         </div>
     `
 })
@@ -11092,14 +11092,14 @@ Angular Forms remains responsible for validation. Field reflects the resulting s
 relationships.
 
 ```typescript
-import { ChangeDetectionStrategy, Component, inject, signal } from '@angular/core';
-import { FormBuilder, ReactiveFormsModule, Validators } from '@angular/forms';
 import { RdxFieldControl } from '../src/field-control';
 import { RdxFieldDescription } from '../src/field-description';
 import { RdxFieldError } from '../src/field-error';
 import { RdxFieldLabel } from '../src/field-label';
 import { RdxFieldRoot } from '../src/field-root';
 import { fieldDescription, fieldError, fieldInputInvalid, fieldLabel, fieldSubmitButton } from './field.shared';
+import { ChangeDetectionStrategy, Component, inject, signal } from '@angular/core';
+import { FormBuilder, ReactiveFormsModule, Validators } from '@angular/forms';
 
 @Component({
     changeDetection: ChangeDetectionStrategy.Eager,
@@ -11109,17 +11109,17 @@ import { fieldDescription, fieldError, fieldInputInvalid, fieldLabel, fieldSubmi
         <form class="flex w-80 flex-col gap-3" [formGroup]="form" (ngSubmit)="submit()">
             <div
                 class="flex flex-col gap-2"
+                rdxFieldRoot
+                required
                 [invalid]="email.invalid && (email.touched || submitted())"
                 [dirty]="email.dirty"
                 [touched]="email.touched"
                 [disabled]="email.disabled"
-                rdxFieldRoot
-                required
             >
-                <label [class]="labelClass" rdxFieldLabel>Email</label>
-                <input [class]="inputClass" rdxFieldControl type="email" formControlName="email" />
-                <p [class]="descriptionClass" rdxFieldDescription>Use the email connected to your account.</p>
-                <p [class]="errorClass" rdxFieldError>
+                <label rdxFieldLabel [class]="labelClass">Email</label>
+                <input rdxFieldControl type="email" formControlName="email" [class]="inputClass" />
+                <p rdxFieldDescription [class]="descriptionClass">Use the email connected to your account.</p>
+                <p rdxFieldError [class]="errorClass">
                     @if (email.hasError('required')) {
                         Email is required.
                     } @else {
@@ -11128,7 +11128,7 @@ import { fieldDescription, fieldError, fieldInputInvalid, fieldLabel, fieldSubmi
                 </p>
             </div>
 
-            <button [class]="buttonClass" type="submit">Submit</button>
+            <button type="submit" [class]="buttonClass">Submit</button>
         </form>
     `
 })
@@ -11163,26 +11163,26 @@ For custom controls, pass `filled` and `focused` state to the root when the nati
 enough.
 
 ```typescript
-import { ChangeDetectionStrategy, Component, computed, signal } from '@angular/core';
 import { RdxFieldControl } from '../src/field-control';
 import { RdxFieldDescription } from '../src/field-description';
 import { RdxFieldError } from '../src/field-error';
 import { RdxFieldLabel } from '../src/field-label';
 import { RdxFieldRoot } from '../src/field-root';
 import { fieldCustomTrigger, fieldDescription, fieldError, fieldLabel } from './field.shared';
+import { ChangeDetectionStrategy, Component, computed, signal } from '@angular/core';
 
 @Component({
     changeDetection: ChangeDetectionStrategy.Eager,
     selector: 'field-custom-control-example',
     imports: [RdxFieldRoot, RdxFieldLabel, RdxFieldControl, RdxFieldDescription, RdxFieldError],
     template: `
-        <div class="flex w-80 flex-col gap-2" [filled]="selected()" [focused]="open()" rdxFieldRoot>
-            <label [class]="labelClass" rdxFieldLabel>Plan</label>
-            <button [class]="triggerClass" (click)="open.update((value) => !value)" type="button" rdxFieldControl>
+        <div class="flex w-80 flex-col gap-2" rdxFieldRoot [filled]="selected()" [focused]="open()">
+            <label rdxFieldLabel [class]="labelClass">Plan</label>
+            <button type="button" rdxFieldControl [class]="triggerClass" (click)="open.update((value) => !value)">
                 {{ selected() ? 'Pro' : 'Choose a plan' }}
             </button>
-            <p [class]="descriptionClass" rdxFieldDescription>Custom controls can pass state into the field root.</p>
-            <p [class]="errorClass" rdxFieldError>Choose a plan.</p>
+            <p rdxFieldDescription [class]="descriptionClass">Custom controls can pass state into the field root.</p>
+            <p rdxFieldError [class]="errorClass">Choose a plan.</p>
         </div>
     `
 })
@@ -11293,12 +11293,12 @@ Disabled state is applied to the native fieldset and exposed to the legend for s
 A larger form groups account details and submits values from fields inside the fieldset.
 
 ```typescript
+import { cn, demoButton, demoInput } from '../../storybook/styles';
 import { ChangeDetectionStrategy, Component, inject } from '@angular/core';
 import { FormBuilder, ReactiveFormsModule, Validators } from '@angular/forms';
 import { RdxFieldDescription, RdxFieldError, RdxFieldLabel, RdxFieldRoot } from '@radix-ng/primitives/field';
 import { RdxFieldsetLegend, RdxFieldsetRoot } from '@radix-ng/primitives/fieldset';
 import { RdxInputDirective } from '@radix-ng/primitives/input';
-import { cn, demoButton, demoInput } from '../../storybook/styles';
 
 @Component({
     changeDetection: ChangeDetectionStrategy.Eager,
@@ -11315,21 +11315,21 @@ import { cn, demoButton, demoInput } from '../../storybook/styles';
     ],
     template: `
         <form class="w-96 space-y-5" [formGroup]="form" (ngSubmit)="submit()">
-            <fieldset class="border-border space-y-4 rounded-md border p-4" [disabled]="submitting" rdxFieldsetRoot>
+            <fieldset class="border-border space-y-4 rounded-md border p-4" rdxFieldsetRoot [disabled]="submitting">
                 <legend class="text-foreground px-1 text-sm font-semibold data-[disabled]:opacity-50" rdxFieldsetLegend>
                     Account details
                 </legend>
 
-                <div class="space-y-2" [invalid]="isInvalid('firstName')" [disabled]="submitting" rdxFieldRoot required>
+                <div class="space-y-2" rdxFieldRoot required [invalid]="isInvalid('firstName')" [disabled]="submitting">
                     <label class="text-foreground text-sm font-medium" rdxFieldLabel>First name</label>
-                    <input [class]="inputClass" rdxInput autocomplete="given-name" formControlName="firstName" />
+                    <input rdxInput autocomplete="given-name" formControlName="firstName" [class]="inputClass" />
                     <p class="text-muted-foreground text-sm" rdxFieldDescription>Used in your workspace profile.</p>
                     <p class="text-destructive text-sm" rdxFieldError>First name is required.</p>
                 </div>
 
-                <div class="space-y-2" [invalid]="isInvalid('email')" [disabled]="submitting" rdxFieldRoot required>
+                <div class="space-y-2" rdxFieldRoot required [invalid]="isInvalid('email')" [disabled]="submitting">
                     <label class="text-foreground text-sm font-medium" rdxFieldLabel>Email</label>
-                    <input [class]="inputClass" rdxInput autocomplete="email" formControlName="email" type="email" />
+                    <input rdxInput autocomplete="email" formControlName="email" type="email" [class]="inputClass" />
                     <p class="text-muted-foreground text-sm" rdxFieldDescription>
                         We'll send the invite confirmation here.
                     </p>
@@ -11352,7 +11352,7 @@ import { cn, demoButton, demoInput } from '../../storybook/styles';
                 </div>
             </fieldset>
 
-            <button [class]="cn(button.base, button.primary, button.size.md)" type="submit">
+            <button type="submit" [class]="cn(button.base, button.primary, button.size.md)">
                 {{ submitting ? 'Submitting...' : 'Create account' }}
             </button>
 
@@ -11424,10 +11424,10 @@ systems (or Field inputs) stay the source of validity. It maps external/server e
 and resets field interaction state on native reset.
 
 ```typescript
-import { ChangeDetectionStrategy, Component, signal } from '@angular/core';
-import { RdxFieldControl, RdxFieldError, RdxFieldLabel, RdxFieldRoot } from '@radix-ng/primitives/field';
 import { RdxFormErrors, RdxFormRoot, RdxFormSubmitEvent } from '../index';
 import { formError, formField, formInput, formLabel, formSubmit } from './form.shared';
+import { ChangeDetectionStrategy, Component, signal } from '@angular/core';
+import { RdxFieldControl, RdxFieldError, RdxFieldLabel, RdxFieldRoot } from '@radix-ng/primitives/field';
 
 /**
  * Server-error mapping with clear-on-edit. The submit handler simulates a backend that rejects a
@@ -11441,18 +11441,18 @@ import { formError, formField, formInput, formLabel, formSubmit } from './form.s
     template: `
         <form
             class="flex w-80 flex-col gap-4"
+            rdxFormRoot
             [errors]="errors()"
             (onFormSubmit)="onSubmit($event)"
             (onClearErrors)="errors.set($event)"
-            rdxFormRoot
         >
-            <div [class]="field" name="email" rdxFieldRoot>
-                <label [class]="label" rdxFieldLabel>Email</label>
-                <input [class]="input" name="email" type="email" rdxFieldControl placeholder="name@example.com" />
-                <p #emailError="rdxFieldError" [class]="error" rdxFieldError>{{ emailError.messages().join(' ') }}</p>
+            <div name="email" rdxFieldRoot [class]="field">
+                <label rdxFieldLabel [class]="label">Email</label>
+                <input name="email" type="email" rdxFieldControl placeholder="name@example.com" [class]="input" />
+                <p #emailError="rdxFieldError" rdxFieldError [class]="error">{{ emailError.messages().join(' ') }}</p>
             </div>
 
-            <button [class]="submit" type="submit">Create account</button>
+            <button type="submit" [class]="submit">Create account</button>
             @if (success()) {
                 <p class="text-muted-foreground text-sm">Account created for {{ success() }}.</p>
             }
@@ -11532,10 +11532,10 @@ error maps onto the field by `name` and clears when you edit it.
 > so an always-fresh reference would resurrect cleared errors on the next change-detection pass.
 
 ```typescript
-import { ChangeDetectionStrategy, Component, signal } from '@angular/core';
-import { RdxFieldControl, RdxFieldError, RdxFieldLabel, RdxFieldRoot } from '@radix-ng/primitives/field';
 import { RdxFormErrors, RdxFormRoot, RdxFormSubmitEvent } from '../index';
 import { formError, formField, formInput, formLabel, formSubmit } from './form.shared';
+import { ChangeDetectionStrategy, Component, signal } from '@angular/core';
+import { RdxFieldControl, RdxFieldError, RdxFieldLabel, RdxFieldRoot } from '@radix-ng/primitives/field';
 
 /**
  * Server-error mapping with clear-on-edit. The submit handler simulates a backend that rejects a
@@ -11549,18 +11549,18 @@ import { formError, formField, formInput, formLabel, formSubmit } from './form.s
     template: `
         <form
             class="flex w-80 flex-col gap-4"
+            rdxFormRoot
             [errors]="errors()"
             (onFormSubmit)="onSubmit($event)"
             (onClearErrors)="errors.set($event)"
-            rdxFormRoot
         >
-            <div [class]="field" name="email" rdxFieldRoot>
-                <label [class]="label" rdxFieldLabel>Email</label>
-                <input [class]="input" name="email" type="email" rdxFieldControl placeholder="name@example.com" />
-                <p #emailError="rdxFieldError" [class]="error" rdxFieldError>{{ emailError.messages().join(' ') }}</p>
+            <div name="email" rdxFieldRoot [class]="field">
+                <label rdxFieldLabel [class]="label">Email</label>
+                <input name="email" type="email" rdxFieldControl placeholder="name@example.com" [class]="input" />
+                <p #emailError="rdxFieldError" rdxFieldError [class]="error">{{ emailError.messages().join(' ') }}</p>
             </div>
 
-            <button [class]="submit" type="submit">Create account</button>
+            <button type="submit" [class]="submit">Create account</button>
             @if (success()) {
                 <p class="text-muted-foreground text-sm">Account created for {{ success() }}.</p>
             }
@@ -11597,10 +11597,10 @@ Native `reset` clears external errors and every field's interaction state, and r
 reverted values.
 
 ```typescript
-import { ChangeDetectionStrategy, Component, signal } from '@angular/core';
-import { RdxFieldControl, RdxFieldError, RdxFieldLabel, RdxFieldRoot } from '@radix-ng/primitives/field';
 import { RdxFormErrors, RdxFormRoot, RdxFormSubmitEvent } from '../index';
 import { formError, formField, formInput, formLabel, formReset, formSubmit } from './form.shared';
+import { ChangeDetectionStrategy, Component, signal } from '@angular/core';
+import { RdxFieldControl, RdxFieldError, RdxFieldLabel, RdxFieldRoot } from '@radix-ng/primitives/field';
 
 /**
  * Native `reset` clears external errors and every field's interaction state (touched/dirty/focused),
@@ -11614,21 +11614,21 @@ import { formError, formField, formInput, formLabel, formReset, formSubmit } fro
     template: `
         <form
             class="flex w-80 flex-col gap-4"
+            rdxFormRoot
             [errors]="errors()"
             (onFormSubmit)="onSubmit($event)"
             (onClearErrors)="errors.set($event)"
             (reset)="verified.set(false)"
-            rdxFormRoot
         >
-            <div [class]="field" name="code" rdxFieldRoot>
-                <label [class]="label" rdxFieldLabel>Access code</label>
-                <input [class]="input" name="code" rdxFieldControl placeholder="1234" />
-                <p #codeError="rdxFieldError" [class]="error" rdxFieldError>{{ codeError.messages().join(' ') }}</p>
+            <div name="code" rdxFieldRoot [class]="field">
+                <label rdxFieldLabel [class]="label">Access code</label>
+                <input name="code" rdxFieldControl placeholder="1234" [class]="input" />
+                <p #codeError="rdxFieldError" rdxFieldError [class]="error">{{ codeError.messages().join(' ') }}</p>
             </div>
 
             <div class="flex gap-2">
-                <button [class]="submit" type="submit">Verify</button>
-                <button [class]="reset" type="reset">Reset</button>
+                <button type="submit" [class]="submit">Verify</button>
+                <button type="reset" [class]="reset">Reset</button>
             </div>
             @if (verified()) {
                 <p class="text-muted-foreground text-sm">Code accepted.</p>
@@ -11665,11 +11665,11 @@ Reactive Forms owns validity; Form adds the aggregate attributes and submit hand
 `<form>`. `(ngSubmit)` is the source of truth — Form never stops propagation.
 
 ```typescript
+import { RdxFormRoot } from '../index';
+import { formError, formField, formInput, formLabel, formSubmit } from './form.shared';
 import { ChangeDetectionStrategy, Component, inject, signal } from '@angular/core';
 import { FormBuilder, ReactiveFormsModule, Validators } from '@angular/forms';
 import { RdxFieldControl, RdxFieldError, RdxFieldLabel, RdxFieldRoot } from '@radix-ng/primitives/field';
-import { RdxFormRoot } from '../index';
-import { formError, formField, formInput, formLabel, formSubmit } from './form.shared';
 
 /**
  * Reactive Forms owns validity; `RdxFormRoot` adds the aggregate `data-*` attributes and submit/reset
@@ -11681,19 +11681,19 @@ import { formError, formField, formInput, formLabel, formSubmit } from './form.s
     selector: 'form-reactive-forms-example',
     imports: [ReactiveFormsModule, RdxFormRoot, RdxFieldRoot, RdxFieldLabel, RdxFieldControl, RdxFieldError],
     template: `
-        <form class="flex w-80 flex-col gap-4" [formGroup]="form" (ngSubmit)="submit()" rdxFormRoot>
+        <form class="flex w-80 flex-col gap-4" rdxFormRoot [formGroup]="form" (ngSubmit)="submit()">
             <div
+                name="email"
+                rdxFieldRoot
+                required
                 [class]="field"
                 [invalid]="email.invalid && (email.touched || submitted())"
                 [touched]="email.touched"
                 [dirty]="email.dirty"
-                name="email"
-                rdxFieldRoot
-                required
             >
-                <label [class]="label" rdxFieldLabel>Email</label>
-                <input [class]="input" type="email" formControlName="email" rdxFieldControl />
-                <p [class]="error" rdxFieldError>
+                <label rdxFieldLabel [class]="label">Email</label>
+                <input type="email" formControlName="email" rdxFieldControl [class]="input" />
+                <p rdxFieldError [class]="error">
                     @if (email.hasError('required')) {
                         Email is required.
                     } @else {
@@ -11702,7 +11702,7 @@ import { formError, formField, formInput, formLabel, formSubmit } from './form.s
                 </p>
             </div>
 
-            <button [class]="submitButton" type="submit">Submit</button>
+            <button type="submit" [class]="submitButton">Submit</button>
         </form>
     `
 })
@@ -11737,10 +11737,10 @@ No `@angular/forms` at all — a valid submit serializes the form's `FormData` i
 (repeated names collapse into arrays).
 
 ```typescript
-import { ChangeDetectionStrategy, Component, signal } from '@angular/core';
-import { RdxFieldControl, RdxFieldLabel, RdxFieldRoot } from '@radix-ng/primitives/field';
 import { RdxFormRoot, RdxFormSubmitEvent } from '../index';
 import { formField, formInput, formLabel, formSubmit } from './form.shared';
+import { ChangeDetectionStrategy, Component, signal } from '@angular/core';
+import { RdxFieldControl, RdxFieldLabel, RdxFieldRoot } from '@radix-ng/primitives/field';
 
 /**
  * No `@angular/forms` at all — just native controls. On a valid submit the Form serializes the form's
@@ -11751,17 +11751,17 @@ import { formField, formInput, formLabel, formSubmit } from './form.shared';
     selector: 'form-native-controls-example',
     imports: [RdxFormRoot, RdxFieldRoot, RdxFieldLabel, RdxFieldControl],
     template: `
-        <form class="flex w-80 flex-col gap-4" (onFormSubmit)="onSubmit($event)" rdxFormRoot>
-            <div [class]="field" name="name" rdxFieldRoot>
-                <label [class]="label" rdxFieldLabel>Name</label>
-                <input [class]="input" name="name" rdxFieldControl value="Ada" />
+        <form class="flex w-80 flex-col gap-4" rdxFormRoot (onFormSubmit)="onSubmit($event)">
+            <div name="name" rdxFieldRoot [class]="field">
+                <label rdxFieldLabel [class]="label">Name</label>
+                <input name="name" rdxFieldControl value="Ada" [class]="input" />
             </div>
-            <div [class]="field" name="role" rdxFieldRoot>
-                <label [class]="label" rdxFieldLabel>Role</label>
-                <input [class]="input" name="role" rdxFieldControl value="Engineer" />
+            <div name="role" rdxFieldRoot [class]="field">
+                <label rdxFieldLabel [class]="label">Role</label>
+                <input name="role" rdxFieldControl value="Engineer" [class]="input" />
             </div>
 
-            <button [class]="submit" type="submit">Submit</button>
+            <button type="submit" [class]="submit">Submit</button>
             @if (values()) {
                 <pre class="bg-muted text-foreground rounded-md p-3 text-xs">{{ values() }}</pre>
             }
@@ -11855,10 +11855,10 @@ Disables the native input and exposes `data-disabled`.
 Connects the input to Field label, description, and validation state.
 
 ```typescript
-import { ChangeDetectionStrategy, Component } from '@angular/core';
-import { RdxFieldDescription, RdxFieldError, RdxFieldLabel, RdxFieldRoot } from '@radix-ng/primitives/field';
 import { demoInput } from '../../storybook/styles';
 import { RdxInputDirective } from '../src/input.directive';
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { RdxFieldDescription, RdxFieldError, RdxFieldLabel, RdxFieldRoot } from '@radix-ng/primitives/field';
 
 @Component({
     changeDetection: ChangeDetectionStrategy.Eager,
@@ -11867,7 +11867,7 @@ import { RdxInputDirective } from '../src/input.directive';
     template: `
         <div class="flex w-80 flex-col gap-2" rdxFieldRoot required>
             <label class="text-foreground text-sm font-medium" rdxFieldLabel>Email</label>
-            <input [class]="inputClass" rdxInput type="email" placeholder="name@example.com" />
+            <input rdxInput type="email" placeholder="name@example.com" [class]="inputClass" />
             <p class="text-muted-foreground text-sm" rdxFieldDescription>Used for account notifications.</p>
             <p class="text-destructive text-sm" rdxFieldError>Enter a valid email address.</p>
         </div>
@@ -11883,11 +11883,11 @@ export class InputFieldExample {
 Uses Angular reactive forms while Field reflects validation state.
 
 ```typescript
+import { demoInput } from '../../storybook/styles';
+import { RdxInputDirective } from '../src/input.directive';
 import { ChangeDetectionStrategy, Component } from '@angular/core';
 import { FormControl, ReactiveFormsModule, Validators } from '@angular/forms';
 import { RdxFieldDescription, RdxFieldError, RdxFieldLabel, RdxFieldRoot } from '@radix-ng/primitives/field';
-import { demoInput } from '../../storybook/styles';
-import { RdxInputDirective } from '../src/input.directive';
 
 @Component({
     changeDetection: ChangeDetectionStrategy.Eager,
@@ -11896,14 +11896,14 @@ import { RdxInputDirective } from '../src/input.directive';
     template: `
         <div
             class="flex w-80 flex-col gap-2"
+            rdxFieldRoot
+            required
             [invalid]="email.invalid && (email.dirty || email.touched)"
             [dirty]="email.dirty"
             [touched]="email.touched"
-            rdxFieldRoot
-            required
         >
             <label class="text-foreground text-sm font-medium" rdxFieldLabel>Email</label>
-            <input [class]="inputClass" [formControl]="email" rdxInput type="email" placeholder="name@example.com" />
+            <input rdxInput type="email" placeholder="name@example.com" [class]="inputClass" [formControl]="email" />
             <p class="text-muted-foreground text-sm" rdxFieldDescription>Use the email connected to your account.</p>
             <p class="text-destructive text-sm" rdxFieldError>Email must be valid.</p>
         </div>
@@ -11920,6 +11920,8 @@ export class InputReactiveFormsExample {
 Combines multiple inputs, Field state, a checkbox, and a submit button in a larger form.
 
 ```typescript
+import { cn, demoButton, demoCheckbox, demoInput } from '../../storybook/styles';
+import { RdxInputDirective } from '../src/input.directive';
 import { ChangeDetectionStrategy, Component } from '@angular/core';
 import { FormControl, FormGroup, ReactiveFormsModule, Validators } from '@angular/forms';
 import { LucideCheck } from '@lucide/angular';
@@ -11931,8 +11933,6 @@ import {
     RdxCheckboxRootDirective
 } from '@radix-ng/primitives/checkbox';
 import { RdxFieldDescription, RdxFieldError, RdxFieldLabel, RdxFieldRoot } from '@radix-ng/primitives/field';
-import { cn, demoButton, demoCheckbox, demoInput } from '../../storybook/styles';
-import { RdxInputDirective } from '../src/input.directive';
 
 @Component({
     changeDetection: ChangeDetectionStrategy.Eager,
@@ -11956,47 +11956,47 @@ import { RdxInputDirective } from '../src/input.directive';
             <div class="grid grid-cols-2 gap-3">
                 <div
                     class="flex flex-col gap-2"
+                    rdxFieldRoot
+                    required
                     [invalid]="firstName.invalid && (firstName.dirty || firstName.touched)"
                     [dirty]="firstName.dirty"
                     [touched]="firstName.touched"
-                    rdxFieldRoot
-                    required
                 >
                     <label class="text-foreground text-sm font-medium" rdxFieldLabel>First name</label>
-                    <input [class]="inputClass" rdxInput autocomplete="given-name" formControlName="firstName" />
+                    <input rdxInput autocomplete="given-name" formControlName="firstName" [class]="inputClass" />
                     <p class="text-destructive text-sm" rdxFieldError>Enter your first name.</p>
                 </div>
 
                 <div
                     class="flex flex-col gap-2"
+                    rdxFieldRoot
+                    required
                     [invalid]="lastName.invalid && (lastName.dirty || lastName.touched)"
                     [dirty]="lastName.dirty"
                     [touched]="lastName.touched"
-                    rdxFieldRoot
-                    required
                 >
                     <label class="text-foreground text-sm font-medium" rdxFieldLabel>Last name</label>
-                    <input [class]="inputClass" rdxInput autocomplete="family-name" formControlName="lastName" />
+                    <input rdxInput autocomplete="family-name" formControlName="lastName" [class]="inputClass" />
                     <p class="text-destructive text-sm" rdxFieldError>Enter your last name.</p>
                 </div>
             </div>
 
             <div
                 class="flex flex-col gap-2"
+                rdxFieldRoot
+                required
                 [invalid]="email.invalid && (email.dirty || email.touched)"
                 [dirty]="email.dirty"
                 [touched]="email.touched"
-                rdxFieldRoot
-                required
             >
                 <label class="text-foreground text-sm font-medium" rdxFieldLabel>Email</label>
                 <input
-                    [class]="inputClass"
                     rdxInput
                     type="email"
                     autocomplete="email"
                     placeholder="name@example.com"
                     formControlName="email"
+                    [class]="inputClass"
                 />
                 <p class="text-muted-foreground text-sm" rdxFieldDescription>
                     Used for product updates and account recovery.
@@ -12006,19 +12006,19 @@ import { RdxInputDirective } from '../src/input.directive';
 
             <div
                 class="flex flex-col gap-2"
+                rdxFieldRoot
+                required
                 [invalid]="password.invalid && (password.dirty || password.touched)"
                 [dirty]="password.dirty"
                 [touched]="password.touched"
-                rdxFieldRoot
-                required
             >
                 <label class="text-foreground text-sm font-medium" rdxFieldLabel>Password</label>
                 <input
-                    [class]="inputClass"
                     rdxInput
                     type="password"
                     autocomplete="new-password"
                     formControlName="password"
+                    [class]="inputClass"
                 />
                 <p class="text-muted-foreground text-sm" rdxFieldDescription>Use at least 8 characters.</p>
                 <p class="text-destructive text-sm" rdxFieldError>Password must be at least 8 characters.</p>
@@ -12026,8 +12026,8 @@ import { RdxInputDirective } from '../src/input.directive';
 
             <div class="flex items-start gap-3">
                 <div rdxCheckboxRoot required formControlName="terms">
-                    <button id="signup-terms" [class]="checkbox.button" type="button" rdxCheckboxButton>
-                        <svg [class]="checkbox.indicator" rdxCheckboxIndicator size="16" lucideCheck />
+                    <button id="signup-terms" type="button" rdxCheckboxButton [class]="checkbox.button">
+                        <svg rdxCheckboxIndicator size="16" lucideCheck [class]="checkbox.indicator" />
                     </button>
                     <input rdxCheckboxInput />
                 </div>
@@ -12037,7 +12037,7 @@ import { RdxInputDirective } from '../src/input.directive';
                 </label>
             </div>
 
-            <button [class]="submitClass" rdxButton type="submit">Create workspace</button>
+            <button rdxButton type="submit" [class]="submitClass">Create workspace</button>
         </form>
     `
 })
@@ -12135,9 +12135,9 @@ Menu composes the shared Popper, Dismissable Layer, and Focus Scope primitives.
 headless — state is exposed through `data-*` attributes and the consumer provides all visual styles.
 
 ```typescript
+import { cn, demoButton, demoMenu } from '../../storybook/styles';
 import { ChangeDetectionStrategy, Component } from '@angular/core';
 import { RdxMenuModule } from '@radix-ng/primitives/menu';
-import { cn, demoButton, demoMenu } from '../../storybook/styles';
 
 @Component({
     selector: 'rdx-menu-default',
@@ -12145,16 +12145,16 @@ import { cn, demoButton, demoMenu } from '../../storybook/styles';
     changeDetection: ChangeDetectionStrategy.OnPush,
     template: `
         <ng-container #root="rdxMenuRoot" rdxMenuRoot>
-            <button [class]="cn(b.base, b.outline, b.size.md)" rdxMenuTrigger>File</button>
-
-            <div *rdxMenuPortal [class]="m.positioner" sideOffset="4" rdxMenuPositioner>
-                <div [class]="m.popup" rdxMenuPopup>
-                    <button [class]="m.item" rdxMenuItem>New Tab</button>
-                    <button [class]="m.item" rdxMenuItem>New Window</button>
-                    <button [class]="m.item" [disabled]="true" rdxMenuItem>New Private Window</button>
-                    <div [class]="m.separator" rdxMenuSeparator></div>
-                    <button [class]="m.item" rdxMenuItem>Save Page As…</button>
-                    <button [class]="m.item" rdxMenuItem>Print…</button>
+            <button rdxMenuTrigger [class]="cn(b.base, b.outline, b.size.md)">File</button>
+
+            <div *rdxMenuPortal sideOffset="4" rdxMenuPositioner [class]="m.positioner">
+                <div rdxMenuPopup [class]="m.popup">
+                    <button rdxMenuItem [class]="m.item">New Tab</button>
+                    <button rdxMenuItem [class]="m.item">New Window</button>
+                    <button rdxMenuItem [class]="m.item" [disabled]="true">New Private Window</button>
+                    <div rdxMenuSeparator [class]="m.separator"></div>
+                    <button rdxMenuItem [class]="m.item">Save Page As…</button>
+                    <button rdxMenuItem [class]="m.item">Print…</button>
                 </div>
             </div>
         </ng-container>
@@ -12299,9 +12299,9 @@ content multi-root.
 A basic dropdown with regular items, a disabled item, and a separator.
 
 ```typescript
+import { cn, demoButton, demoMenu } from '../../storybook/styles';
 import { ChangeDetectionStrategy, Component } from '@angular/core';
 import { RdxMenuModule } from '@radix-ng/primitives/menu';
-import { cn, demoButton, demoMenu } from '../../storybook/styles';
 
 @Component({
     selector: 'rdx-menu-default',
@@ -12309,16 +12309,16 @@ import { cn, demoButton, demoMenu } from '../../storybook/styles';
     changeDetection: ChangeDetectionStrategy.OnPush,
     template: `
         <ng-container #root="rdxMenuRoot" rdxMenuRoot>
-            <button [class]="cn(b.base, b.outline, b.size.md)" rdxMenuTrigger>File</button>
-
-            <div *rdxMenuPortal [class]="m.positioner" sideOffset="4" rdxMenuPositioner>
-                <div [class]="m.popup" rdxMenuPopup>
-                    <button [class]="m.item" rdxMenuItem>New Tab</button>
-                    <button [class]="m.item" rdxMenuItem>New Window</button>
-                    <button [class]="m.item" [disabled]="true" rdxMenuItem>New Private Window</button>
-                    <div [class]="m.separator" rdxMenuSeparator></div>
-                    <button [class]="m.item" rdxMenuItem>Save Page As…</button>
-                    <button [class]="m.item" rdxMenuItem>Print…</button>
+            <button rdxMenuTrigger [class]="cn(b.base, b.outline, b.size.md)">File</button>
+
+            <div *rdxMenuPortal sideOffset="4" rdxMenuPositioner [class]="m.positioner">
+                <div rdxMenuPopup [class]="m.popup">
+                    <button rdxMenuItem [class]="m.item">New Tab</button>
+                    <button rdxMenuItem [class]="m.item">New Window</button>
+                    <button rdxMenuItem [class]="m.item" [disabled]="true">New Private Window</button>
+                    <div rdxMenuSeparator [class]="m.separator"></div>
+                    <button rdxMenuItem [class]="m.item">Save Page As…</button>
+                    <button rdxMenuItem [class]="m.item">Print…</button>
                 </div>
             </div>
         </ng-container>
@@ -12376,9 +12376,9 @@ to add a grace period).
 ![Submenu safe polygon — a triangular safe zone spans from the pointer to the popup, so the pointer can cut diagonally across the sibling row below without closing the submenu.](/menu-safe-polygon.svg)
 
 ```typescript
+import { cn, demoButton, demoMenu } from '../../storybook/styles';
 import { ChangeDetectionStrategy, Component } from '@angular/core';
 import { RdxMenuModule } from '@radix-ng/primitives/menu';
-import { cn, demoButton, demoMenu } from '../../storybook/styles';
 
 @Component({
     selector: 'rdx-menu-nested',
@@ -12386,67 +12386,67 @@ import { cn, demoButton, demoMenu } from '../../storybook/styles';
     changeDetection: ChangeDetectionStrategy.OnPush,
     template: `
         <ng-container #root="rdxMenuRoot" rdxMenuRoot>
-            <button [class]="cn(b.base, b.outline, b.size.md)" rdxMenuTrigger>Edit</button>
+            <button rdxMenuTrigger [class]="cn(b.base, b.outline, b.size.md)">Edit</button>
 
-            <div *rdxMenuPortal [class]="m.positioner" sideOffset="4" rdxMenuPositioner>
-                <div [class]="m.popup" rdxMenuPopup>
-                    <button [class]="m.item" rdxMenuItem>Undo</button>
-                    <button [class]="m.item" rdxMenuItem>Redo</button>
-                    <div [class]="m.separator" rdxMenuSeparator></div>
+            <div *rdxMenuPortal sideOffset="4" rdxMenuPositioner [class]="m.positioner">
+                <div rdxMenuPopup [class]="m.popup">
+                    <button rdxMenuItem [class]="m.item">Undo</button>
+                    <button rdxMenuItem [class]="m.item">Redo</button>
+                    <div rdxMenuSeparator [class]="m.separator"></div>
 
                     <!-- Submenu: inner rdxMenuRoot provides submenu context -->
                     <ng-container #findSub="rdxMenuRoot" rdxMenuRoot>
-                        <button [class]="cn(m.item, 'justify-between')" rdxMenuSubTrigger>
+                        <button rdxMenuSubTrigger [class]="cn(m.item, 'justify-between')">
                             Find
                             <span class="text-muted-foreground text-xs">›</span>
                         </button>
 
                         <div
                             *rdxMenuPortal
-                            [class]="m.positioner"
                             side="right"
                             align="start"
                             sideOffset="4"
                             rdxMenuPositioner
+                            [class]="m.positioner"
                         >
-                            <div [class]="m.popup" rdxMenuPopup>
-                                <button [class]="m.item" rdxMenuItem>Search Web…</button>
-                                <button [class]="m.item" rdxMenuItem>Find…</button>
-                                <button [class]="m.item" rdxMenuItem>Find and Replace…</button>
-                                <button [class]="m.item" rdxMenuItem>Use Selection for Find</button>
+                            <div rdxMenuPopup [class]="m.popup">
+                                <button rdxMenuItem [class]="m.item">Search Web…</button>
+                                <button rdxMenuItem [class]="m.item">Find…</button>
+                                <button rdxMenuItem [class]="m.item">Find and Replace…</button>
+                                <button rdxMenuItem [class]="m.item">Use Selection for Find</button>
                             </div>
                         </div>
                     </ng-container>
 
                     <!-- Second submenu -->
                     <ng-container #spellSub="rdxMenuRoot" rdxMenuRoot>
-                        <button [class]="cn(m.item, 'justify-between')" rdxMenuSubTrigger>
+                        <button rdxMenuSubTrigger [class]="cn(m.item, 'justify-between')">
                             Spelling and Grammar
                             <span class="text-muted-foreground text-xs">›</span>
                         </button>
 
                         <div
                             *rdxMenuPortal
-                            [class]="m.positioner"
                             side="right"
                             align="start"
                             sideOffset="4"
                             rdxMenuPositioner
+                            [class]="m.positioner"
                         >
-                            <div [class]="m.popup" rdxMenuPopup>
-                                <button [class]="m.item" rdxMenuItem>Show Spelling and Grammar</button>
-                                <button [class]="m.item" rdxMenuItem>Check Document Now</button>
-                                <div [class]="m.separator" rdxMenuSeparator></div>
-                                <button [class]="m.item" rdxMenuItem>Check Spelling While Typing</button>
-                                <button [class]="m.item" [disabled]="true" rdxMenuItem>Check Grammar</button>
+                            <div rdxMenuPopup [class]="m.popup">
+                                <button rdxMenuItem [class]="m.item">Show Spelling and Grammar</button>
+                                <button rdxMenuItem [class]="m.item">Check Document Now</button>
+                                <div rdxMenuSeparator [class]="m.separator"></div>
+                                <button rdxMenuItem [class]="m.item">Check Spelling While Typing</button>
+                                <button rdxMenuItem [class]="m.item" [disabled]="true">Check Grammar</button>
                             </div>
                         </div>
                     </ng-container>
 
-                    <div [class]="m.separator" rdxMenuSeparator></div>
-                    <button [class]="m.item" rdxMenuItem>Cut</button>
-                    <button [class]="m.item" rdxMenuItem>Copy</button>
-                    <button [class]="m.item" rdxMenuItem>Paste</button>
+                    <div rdxMenuSeparator [class]="m.separator"></div>
+                    <button rdxMenuItem [class]="m.item">Cut</button>
+                    <button rdxMenuItem [class]="m.item">Copy</button>
+                    <button rdxMenuItem [class]="m.item">Paste</button>
                 </div>
             </div>
         </ng-container>
@@ -12460,9 +12460,9 @@ export class RdxMenuNestedComponent {
 ```
 
 ```typescript
+import { cn, demoButton, demoMenu } from '../../storybook/styles';
 import { ChangeDetectionStrategy, Component } from '@angular/core';
 import { RdxMenuModule } from '@radix-ng/primitives/menu';
-import { cn, demoButton, demoMenu } from '../../storybook/styles';
 
 /**
  * RTL nested menu: submenus open to the *left* (`side="left"`), so the safe-polygon geometry must
@@ -12475,66 +12475,66 @@ import { cn, demoButton, demoMenu } from '../../storybook/styles';
     template: `
         <div dir="rtl">
             <ng-container #root="rdxMenuRoot" dir="rtl" rdxMenuRoot>
-                <button [class]="cn(b.base, b.outline, b.size.md)" rdxMenuTrigger>تحرير</button>
+                <button rdxMenuTrigger [class]="cn(b.base, b.outline, b.size.md)">تحرير</button>
 
-                <div *rdxMenuPortal [class]="m.positioner" side="bottom" align="end" sideOffset="4" rdxMenuPositioner>
-                    <div [class]="m.popup" rdxMenuPopup>
-                        <button [class]="m.item" rdxMenuItem>تراجع</button>
-                        <button [class]="m.item" rdxMenuItem>إعادة</button>
-                        <div [class]="m.separator" rdxMenuSeparator></div>
+                <div *rdxMenuPortal side="bottom" align="end" sideOffset="4" rdxMenuPositioner [class]="m.positioner">
+                    <div rdxMenuPopup [class]="m.popup">
+                        <button rdxMenuItem [class]="m.item">تراجع</button>
+                        <button rdxMenuItem [class]="m.item">إعادة</button>
+                        <div rdxMenuSeparator [class]="m.separator"></div>
 
                         <!-- Submenu opens to the left in RTL -->
                         <ng-container #findSub="rdxMenuRoot" rdxMenuRoot>
-                            <button [class]="cn(m.item, 'justify-between')" rdxMenuSubTrigger>
+                            <button rdxMenuSubTrigger [class]="cn(m.item, 'justify-between')">
                                 <span class="text-muted-foreground text-xs">‹</span>
                                 بحث
                             </button>
 
                             <div
                                 *rdxMenuPortal
-                                [class]="m.positioner"
                                 side="left"
                                 align="start"
                                 sideOffset="4"
                                 rdxMenuPositioner
+                                [class]="m.positioner"
                             >
-                                <div [class]="m.popup" rdxMenuPopup>
-                                    <button [class]="m.item" rdxMenuItem>بحث في الويب…</button>
-                                    <button [class]="m.item" rdxMenuItem>بحث…</button>
-                                    <button [class]="m.item" rdxMenuItem>بحث واستبدال…</button>
-                                    <button [class]="m.item" rdxMenuItem>استخدام التحديد للبحث</button>
+                                <div rdxMenuPopup [class]="m.popup">
+                                    <button rdxMenuItem [class]="m.item">بحث في الويب…</button>
+                                    <button rdxMenuItem [class]="m.item">بحث…</button>
+                                    <button rdxMenuItem [class]="m.item">بحث واستبدال…</button>
+                                    <button rdxMenuItem [class]="m.item">استخدام التحديد للبحث</button>
                                 </div>
                             </div>
                         </ng-container>
 
                         <ng-container #spellSub="rdxMenuRoot" rdxMenuRoot>
-                            <button [class]="cn(m.item, 'justify-between')" rdxMenuSubTrigger>
+                            <button rdxMenuSubTrigger [class]="cn(m.item, 'justify-between')">
                                 <span class="text-muted-foreground text-xs">‹</span>
                                 التدقيق الإملائي والنحوي
                             </button>
 
                             <div
                                 *rdxMenuPortal
-                                [class]="m.positioner"
                                 side="left"
                                 align="start"
                                 sideOffset="4"
                                 rdxMenuPositioner
+                                [class]="m.positioner"
                             >
-                                <div [class]="m.popup" rdxMenuPopup>
-                                    <button [class]="m.item" rdxMenuItem>عرض التدقيق الإملائي والنحوي</button>
-                                    <button [class]="m.item" rdxMenuItem>تدقيق المستند الآن</button>
-                                    <div [class]="m.separator" rdxMenuSeparator></div>
-                                    <button [class]="m.item" rdxMenuItem>التدقيق الإملائي أثناء الكتابة</button>
-                                    <button [class]="m.item" [disabled]="true" rdxMenuItem>التدقيق النحوي</button>
+                                <div rdxMenuPopup [class]="m.popup">
+                                    <button rdxMenuItem [class]="m.item">عرض التدقيق الإملائي والنحوي</button>
+                                    <button rdxMenuItem [class]="m.item">تدقيق المستند الآن</button>
+                                    <div rdxMenuSeparator [class]="m.separator"></div>
+                                    <button rdxMenuItem [class]="m.item">التدقيق الإملائي أثناء الكتابة</button>
+                                    <button rdxMenuItem [class]="m.item" [disabled]="true">التدقيق النحوي</button>
                                 </div>
                             </div>
                         </ng-container>
 
-                        <div [class]="m.separator" rdxMenuSeparator></div>
-                        <button [class]="m.item" rdxMenuItem>قص</button>
-                        <button [class]="m.item" rdxMenuItem>نسخ</button>
-                        <button [class]="m.item" rdxMenuItem>لصق</button>
+                        <div rdxMenuSeparator [class]="m.separator"></div>
+                        <button rdxMenuItem [class]="m.item">قص</button>
+                        <button rdxMenuItem [class]="m.item">نسخ</button>
+                        <button rdxMenuItem [class]="m.item">لصق</button>
                     </div>
                 </div>
             </ng-container>
@@ -12556,9 +12556,9 @@ The arrow SVG fills with `currentColor`, so match the popup surface with a `text
 the popup border flow into the arrow as one continuous outline.
 
 ```typescript
+import { cn, demoButton, demoMenu } from '../../storybook/styles';
 import { ChangeDetectionStrategy, Component } from '@angular/core';
 import { RdxMenuModule } from '@radix-ng/primitives/menu';
-import { cn, demoButton, demoMenu } from '../../storybook/styles';
 
 @Component({
     selector: 'rdx-menu-arrow',
@@ -12566,15 +12566,15 @@ import { cn, demoButton, demoMenu } from '../../storybook/styles';
     changeDetection: ChangeDetectionStrategy.OnPush,
     template: `
         <ng-container #root="rdxMenuRoot" rdxMenuRoot>
-            <button [class]="cn(b.base, b.outline, b.size.md)" rdxMenuTrigger>With Arrow</button>
-
-            <div *rdxMenuPortal [class]="m.positioner" sideOffset="8" rdxMenuPositioner>
-                <div [class]="cn(m.popup, 'relative')" rdxMenuPopup>
-                    <span [class]="m.arrow" rdxMenuArrow></span>
-                    <button [class]="m.item" rdxMenuItem>New Tab</button>
-                    <button [class]="m.item" rdxMenuItem>New Window</button>
-                    <div [class]="m.separator" rdxMenuSeparator></div>
-                    <button [class]="m.item" rdxMenuItem>Print…</button>
+            <button rdxMenuTrigger [class]="cn(b.base, b.outline, b.size.md)">With Arrow</button>
+
+            <div *rdxMenuPortal sideOffset="8" rdxMenuPositioner [class]="m.positioner">
+                <div rdxMenuPopup [class]="cn(m.popup, 'relative')">
+                    <span rdxMenuArrow [class]="m.arrow"></span>
+                    <button rdxMenuItem [class]="m.item">New Tab</button>
+                    <button rdxMenuItem [class]="m.item">New Window</button>
+                    <div rdxMenuSeparator [class]="m.separator"></div>
+                    <button rdxMenuItem [class]="m.item">Print…</button>
                 </div>
             </div>
         </ng-container>
@@ -12594,28 +12594,28 @@ Add `rdxMenuBackdrop` as a sibling root before the positioner inside an explicit
 blocking outside pointer events and page scrolling; set `[modal]="false"` to opt out.
 
 ```typescript
+import { cn, demoButton, demoMenu } from '../../storybook/styles';
 import { ChangeDetectionStrategy, Component } from '@angular/core';
 import { RdxMenuModule } from '@radix-ng/primitives/menu';
-import { cn, demoButton, demoMenu } from '../../storybook/styles';
 
 @Component({
     selector: 'rdx-menu-backdrop',
     imports: [RdxMenuModule],
     changeDetection: ChangeDetectionStrategy.OnPush,
     template: `
-        <ng-container #root="rdxMenuRoot" [modal]="true" rdxMenuRoot>
-            <button [class]="cn(b.base, b.outline, b.size.md)" rdxMenuTrigger>With Backdrop</button>
+        <ng-container #root="rdxMenuRoot" rdxMenuRoot [modal]="true">
+            <button rdxMenuTrigger [class]="cn(b.base, b.outline, b.size.md)">With Backdrop</button>
 
             <ng-template rdxMenuPortal>
                 <div class="bg-foreground/10 fixed inset-0" rdxMenuBackdrop></div>
-                <div [class]="m.positioner" sideOffset="4" rdxMenuPositioner>
-                    <div [class]="m.popup" rdxMenuPopup>
-                        <button [class]="m.item" rdxMenuItem>New Tab</button>
-                        <button [class]="m.item" rdxMenuItem>New Window</button>
-                        <div [class]="m.separator" rdxMenuSeparator></div>
-                        <button [class]="m.item" [disabled]="true" rdxMenuItem>New Private Window</button>
-                        <div [class]="m.separator" rdxMenuSeparator></div>
-                        <button [class]="m.item" rdxMenuItem>Print…</button>
+                <div sideOffset="4" rdxMenuPositioner [class]="m.positioner">
+                    <div rdxMenuPopup [class]="m.popup">
+                        <button rdxMenuItem [class]="m.item">New Tab</button>
+                        <button rdxMenuItem [class]="m.item">New Window</button>
+                        <div rdxMenuSeparator [class]="m.separator"></div>
+                        <button rdxMenuItem [class]="m.item" [disabled]="true">New Private Window</button>
+                        <div rdxMenuSeparator [class]="m.separator"></div>
+                        <button rdxMenuItem [class]="m.item">Print…</button>
                     </div>
                 </div>
             </ng-template>
@@ -12646,9 +12646,9 @@ the popup with a CSS transition (here via Tailwind arbitrary utilities, so no st
 ```
 
 ```typescript
+import { cn, demoButton, demoMenu } from '../../storybook/styles';
 import { ChangeDetectionStrategy, Component, signal } from '@angular/core';
 import { RdxMenuModule } from '@radix-ng/primitives/menu';
-import { cn, demoButton, demoMenu } from '../../storybook/styles';
 
 /**
  * Demonstrates `rdxMenuViewport`: the popup smoothly resizes as its content
@@ -12662,32 +12662,32 @@ import { cn, demoButton, demoMenu } from '../../storybook/styles';
     changeDetection: ChangeDetectionStrategy.OnPush,
     template: `
         <ng-container #root="rdxMenuRoot" rdxMenuRoot>
-            <button [class]="cn(b.base, b.outline, b.size.md)" rdxMenuTrigger>Settings</button>
+            <button rdxMenuTrigger [class]="cn(b.base, b.outline, b.size.md)">Settings</button>
 
-            <div *rdxMenuPortal [class]="m.positioner" sideOffset="4" rdxMenuPositioner>
+            <div *rdxMenuPortal sideOffset="4" rdxMenuPositioner [class]="m.positioner">
                 <div
+                    rdxMenuPopup
                     [class]="
                         cn(
                             m.popup,
                             '[height:var(--popup-height)] [width:var(--popup-width)] overflow-hidden transition-[width,height] duration-200 ease-out'
                         )
                     "
-                    rdxMenuPopup
                 >
                     <div rdxMenuViewport>
-                        <button [class]="m.item" [closeOnClick]="false" (onSelect)="toggle()" rdxMenuItem>
+                        <button rdxMenuItem [class]="m.item" [closeOnClick]="false" (onSelect)="toggle()">
                             {{ expanded() ? 'Hide advanced' : 'Show advanced' }}
                         </button>
-                        <div [class]="m.separator" rdxMenuSeparator></div>
-                        <button [class]="m.item" rdxMenuItem>Profile</button>
-                        <button [class]="m.item" rdxMenuItem>Billing</button>
+                        <div rdxMenuSeparator [class]="m.separator"></div>
+                        <button rdxMenuItem [class]="m.item">Profile</button>
+                        <button rdxMenuItem [class]="m.item">Billing</button>
 
                         @if (expanded()) {
-                            <div [class]="m.separator" rdxMenuSeparator></div>
-                            <button [class]="m.item" rdxMenuItem>Keyboard shortcuts</button>
-                            <button [class]="m.item" rdxMenuItem>Developer tools</button>
-                            <button [class]="m.item" rdxMenuItem>Feature flags</button>
-                            <button [class]="m.item" rdxMenuItem>API tokens</button>
+                            <div rdxMenuSeparator [class]="m.separator"></div>
+                            <button rdxMenuItem [class]="m.item">Keyboard shortcuts</button>
+                            <button rdxMenuItem [class]="m.item">Developer tools</button>
+                            <button rdxMenuItem [class]="m.item">Feature flags</button>
+                            <button rdxMenuItem [class]="m.item">API tokens</button>
                         }
                     </div>
                 </div>
@@ -12718,9 +12718,9 @@ positioner (the part presence watches, keyed on `data-open` / `data-closed`) and
 zoom on the popup. Use Angular `styles` on the component (or global CSS) to define the keyframes.
 
 ```typescript
+import { cn, demoButton, demoMenu } from '../../storybook/styles';
 import { ChangeDetectionStrategy, Component } from '@angular/core';
 import { RdxMenuModule } from '@radix-ng/primitives/menu';
-import { cn, demoButton, demoMenu } from '../../storybook/styles';
 
 @Component({
     selector: 'rdx-menu-animated',
@@ -12787,14 +12787,14 @@ import { cn, demoButton, demoMenu } from '../../storybook/styles';
     ],
     template: `
         <ng-container #root="rdxMenuRoot" rdxMenuRoot>
-            <button [class]="cn(b.base, b.outline, b.size.md)" rdxMenuTrigger>Animated</button>
-
-            <div *rdxMenuPortal [class]="cn(m.positioner, 'animated-positioner')" sideOffset="4" rdxMenuPositioner>
-                <div [class]="cn(m.popup, 'animated-popup')" rdxMenuPopup>
-                    <button [class]="m.item" rdxMenuItem>New Tab</button>
-                    <button [class]="m.item" rdxMenuItem>New Window</button>
-                    <div [class]="m.separator" rdxMenuSeparator></div>
-                    <button [class]="m.item" rdxMenuItem>Print…</button>
+            <button rdxMenuTrigger [class]="cn(b.base, b.outline, b.size.md)">Animated</button>
+
+            <div *rdxMenuPortal sideOffset="4" rdxMenuPositioner [class]="cn(m.positioner, 'animated-positioner')">
+                <div rdxMenuPopup [class]="cn(m.popup, 'animated-popup')">
+                    <button rdxMenuItem [class]="m.item">New Tab</button>
+                    <button rdxMenuItem [class]="m.item">New Window</button>
+                    <div rdxMenuSeparator [class]="m.separator"></div>
+                    <button rdxMenuItem [class]="m.item">Print…</button>
                 </div>
             </div>
         </ng-container>
@@ -13043,54 +13043,54 @@ menu is a `rdxMenuRoot` with a standard `rdxMenuTrigger`; the menubar manages wh
 up Base UI-style Composite focus, arrow-key navigation, and hover-to-switch behavior between them.
 
 ```typescript
+import { cn, demoMenu, demoMenubar } from '../../storybook/styles';
 import { ChangeDetectionStrategy, Component, signal } from '@angular/core';
 import { LucideCheck, LucideDot } from '@lucide/angular';
 import { RdxMenuModule } from '@radix-ng/primitives/menu';
 import { RdxMenubarRoot } from '@radix-ng/primitives/menubar';
-import { cn, demoMenu, demoMenubar } from '../../storybook/styles';
 
 @Component({
     selector: 'rdx-menubar-default',
     imports: [RdxMenuModule, RdxMenubarRoot, LucideCheck, LucideDot],
     changeDetection: ChangeDetectionStrategy.OnPush,
     template: `
-        <div [class]="mb.root" rdxMenubarRoot>
+        <div rdxMenubarRoot [class]="mb.root">
             <!-- File -->
             <ng-container #fileMenu="rdxMenuRoot" rdxMenuRoot>
-                <button [class]="mb.trigger" rdxMenuTrigger>File</button>
+                <button rdxMenuTrigger [class]="mb.trigger">File</button>
 
-                <div [class]="cn(m.positioner, 'data-[closed]:hidden')" align="start" sideOffset="4" rdxMenuPositioner>
-                    <div [class]="m.popup" rdxMenuPopup>
-                        <button [class]="m.item" rdxMenuItem>
+                <div align="start" sideOffset="4" rdxMenuPositioner [class]="cn(m.positioner, 'data-[closed]:hidden')">
+                    <div rdxMenuPopup [class]="m.popup">
+                        <button rdxMenuItem [class]="m.item">
                             New Tab
                             <span [class]="mb.shortcut">⌘ T</span>
                         </button>
-                        <button [class]="m.item" rdxMenuItem>
+                        <button rdxMenuItem [class]="m.item">
                             New Window
                             <span [class]="mb.shortcut">⌘ N</span>
                         </button>
-                        <button [class]="m.item" [disabled]="true" rdxMenuItem>New Incognito Window</button>
-                        <div [class]="m.separator" rdxMenuSeparator></div>
+                        <button rdxMenuItem [class]="m.item" [disabled]="true">New Incognito Window</button>
+                        <div rdxMenuSeparator [class]="m.separator"></div>
 
                         <!-- Share submenu -->
                         <ng-container #shareSub="rdxMenuRoot" rdxMenuRoot>
-                            <button [class]="cn(m.item, 'justify-between')" rdxMenuSubTrigger>
+                            <button rdxMenuSubTrigger [class]="cn(m.item, 'justify-between')">
                                 Share
                                 <span class="text-muted-foreground text-xs">›</span>
                             </button>
                             @if (shareSub.open()) {
-                                <div [class]="m.positioner" side="right" align="start" sideOffset="4" rdxMenuPositioner>
-                                    <div [class]="m.popup" rdxMenuPopup>
-                                        <button [class]="m.item" rdxMenuItem>Email Link</button>
-                                        <button [class]="m.item" rdxMenuItem>Messages</button>
-                                        <button [class]="m.item" rdxMenuItem>Notes</button>
+                                <div side="right" align="start" sideOffset="4" rdxMenuPositioner [class]="m.positioner">
+                                    <div rdxMenuPopup [class]="m.popup">
+                                        <button rdxMenuItem [class]="m.item">Email Link</button>
+                                        <button rdxMenuItem [class]="m.item">Messages</button>
+                                        <button rdxMenuItem [class]="m.item">Notes</button>
                                     </div>
                                 </div>
                             }
                         </ng-container>
 
-                        <div [class]="m.separator" rdxMenuSeparator></div>
-                        <button [class]="m.item" rdxMenuItem>
+                        <div rdxMenuSeparator [class]="m.separator"></div>
+                        <button rdxMenuItem [class]="m.item">
                             Print…
                             <span [class]="mb.shortcut">⌘ P</span>
                         </button>
@@ -13100,28 +13100,28 @@ import { cn, demoMenu, demoMenubar } from '../../storybook/styles';
 
             <!-- Edit -->
             <ng-container #editMenu="rdxMenuRoot" rdxMenuRoot>
-                <button [class]="mb.trigger" rdxMenuTrigger>Edit</button>
+                <button rdxMenuTrigger [class]="mb.trigger">Edit</button>
 
-                <div [class]="cn(m.positioner, 'data-[closed]:hidden')" align="start" sideOffset="4" rdxMenuPositioner>
-                    <div [class]="m.popup" rdxMenuPopup>
-                        <button [class]="m.item" rdxMenuItem>
+                <div align="start" sideOffset="4" rdxMenuPositioner [class]="cn(m.positioner, 'data-[closed]:hidden')">
+                    <div rdxMenuPopup [class]="m.popup">
+                        <button rdxMenuItem [class]="m.item">
                             Undo
                             <span [class]="mb.shortcut">⌘ Z</span>
                         </button>
-                        <button [class]="m.item" rdxMenuItem>
+                        <button rdxMenuItem [class]="m.item">
                             Redo
                             <span [class]="mb.shortcut">⇧ ⌘ Z</span>
                         </button>
-                        <div [class]="m.separator" rdxMenuSeparator></div>
-                        <button [class]="m.item" rdxMenuItem>
+                        <div rdxMenuSeparator [class]="m.separator"></div>
+                        <button rdxMenuItem [class]="m.item">
                             Cut
                             <span [class]="mb.shortcut">⌘ X</span>
                         </button>
-                        <button [class]="m.item" rdxMenuItem>
+                        <button rdxMenuItem [class]="m.item">
                             Copy
                             <span [class]="mb.shortcut">⌘ C</span>
                         </button>
-                        <button [class]="m.item" rdxMenuItem>
+                        <button rdxMenuItem [class]="m.item">
                             Paste
                             <span [class]="mb.shortcut">⌘ V</span>
                         </button>
@@ -13131,60 +13131,60 @@ import { cn, demoMenu, demoMenubar } from '../../storybook/styles';
 
             <!-- View -->
             <ng-container #viewMenu="rdxMenuRoot" rdxMenuRoot>
-                <button [class]="mb.trigger" rdxMenuTrigger>View</button>
+                <button rdxMenuTrigger [class]="mb.trigger">View</button>
 
-                <div [class]="cn(m.positioner, 'data-[closed]:hidden')" align="start" sideOffset="4" rdxMenuPositioner>
-                    <div [class]="m.popup" rdxMenuPopup>
-                        <label [(checked)]="showBookmarks" [class]="m.selectableItem" rdxMenuCheckboxItem>
-                            <span [class]="m.itemIndicator" rdxMenuCheckboxItemIndicator>
-                                <svg [size]="12" lucideCheck></svg>
+                <div align="start" sideOffset="4" rdxMenuPositioner [class]="cn(m.positioner, 'data-[closed]:hidden')">
+                    <div rdxMenuPopup [class]="m.popup">
+                        <label rdxMenuCheckboxItem [class]="m.selectableItem" [(checked)]="showBookmarks">
+                            <span rdxMenuCheckboxItemIndicator [class]="m.itemIndicator">
+                                <svg lucideCheck [size]="12"></svg>
                             </span>
                             Always Show Bookmarks Bar
                         </label>
-                        <label [(checked)]="showFullUrls" [class]="m.selectableItem" rdxMenuCheckboxItem>
-                            <span [class]="m.itemIndicator" rdxMenuCheckboxItemIndicator>
-                                <svg [size]="12" lucideCheck></svg>
+                        <label rdxMenuCheckboxItem [class]="m.selectableItem" [(checked)]="showFullUrls">
+                            <span rdxMenuCheckboxItemIndicator [class]="m.itemIndicator">
+                                <svg lucideCheck [size]="12"></svg>
                             </span>
                             Always Show Full URLs
                         </label>
-                        <div [class]="m.separator" rdxMenuSeparator></div>
-                        <button [class]="m.item" rdxMenuItem>
+                        <div rdxMenuSeparator [class]="m.separator"></div>
+                        <button rdxMenuItem [class]="m.item">
                             Reload
                             <span [class]="mb.shortcut">⌘ R</span>
                         </button>
-                        <button [class]="m.item" [disabled]="true" rdxMenuItem>
+                        <button rdxMenuItem [class]="m.item" [disabled]="true">
                             Force Reload
                             <span [class]="mb.shortcut">⇧ ⌘ R</span>
                         </button>
-                        <div [class]="m.separator" rdxMenuSeparator></div>
-                        <button [class]="m.item" rdxMenuItem>Toggle Fullscreen</button>
+                        <div rdxMenuSeparator [class]="m.separator"></div>
+                        <button rdxMenuItem [class]="m.item">Toggle Fullscreen</button>
                     </div>
                 </div>
             </ng-container>
 
             <!-- Profiles -->
             <ng-container #profilesMenu="rdxMenuRoot" rdxMenuRoot>
-                <button [class]="mb.trigger" rdxMenuTrigger>Profiles</button>
-
-                <div [class]="cn(m.positioner, 'data-[closed]:hidden')" align="start" sideOffset="4" rdxMenuPositioner>
-                    <div [class]="m.popup" rdxMenuPopup>
-                        <div [(value)]="activeProfile" rdxMenuRadioGroup>
-                            <label [class]="m.selectableItem" value="andy" rdxMenuRadioItem>
-                                <span [class]="m.itemIndicator" rdxMenuRadioItemIndicator>
-                                    <svg [size]="10" strokeWidth="5" lucideDot></svg>
+                <button rdxMenuTrigger [class]="mb.trigger">Profiles</button>
+
+                <div align="start" sideOffset="4" rdxMenuPositioner [class]="cn(m.positioner, 'data-[closed]:hidden')">
+                    <div rdxMenuPopup [class]="m.popup">
+                        <div rdxMenuRadioGroup [(value)]="activeProfile">
+                            <label value="andy" rdxMenuRadioItem [class]="m.selectableItem">
+                                <span rdxMenuRadioItemIndicator [class]="m.itemIndicator">
+                                    <svg strokeWidth="5" lucideDot [size]="10"></svg>
                                 </span>
                                 Andy
                             </label>
-                            <label [class]="m.selectableItem" value="luis" rdxMenuRadioItem>
-                                <span [class]="m.itemIndicator" rdxMenuRadioItemIndicator>
-                                    <svg [size]="10" strokeWidth="5" lucideDot></svg>
+                            <label value="luis" rdxMenuRadioItem [class]="m.selectableItem">
+                                <span rdxMenuRadioItemIndicator [class]="m.itemIndicator">
+                                    <svg strokeWidth="5" lucideDot [size]="10"></svg>
                                 </span>
                                 Luis
                             </label>
                         </div>
-                        <div [class]="m.separator" rdxMenuSeparator></div>
-                        <button [class]="cn(m.item, 'pl-8')" rdxMenuItem>Edit…</button>
-                        <button [class]="cn(m.item, 'pl-8')" rdxMenuItem>Add Profile…</button>
+                        <div rdxMenuSeparator [class]="m.separator"></div>
+                        <button rdxMenuItem [class]="cn(m.item, 'pl-8')">Edit…</button>
+                        <button rdxMenuItem [class]="cn(m.item, 'pl-8')">Add Profile…</button>
                     </div>
                 </div>
             </ng-container>
@@ -13280,54 +13280,54 @@ A four-menu bar (File, Edit, View, Profiles) with a submenu, checkbox items, and
 Click a trigger to open it, then hover the other triggers to switch, or use the arrow keys.
 
 ```typescript
+import { cn, demoMenu, demoMenubar } from '../../storybook/styles';
 import { ChangeDetectionStrategy, Component, signal } from '@angular/core';
 import { LucideCheck, LucideDot } from '@lucide/angular';
 import { RdxMenuModule } from '@radix-ng/primitives/menu';
 import { RdxMenubarRoot } from '@radix-ng/primitives/menubar';
-import { cn, demoMenu, demoMenubar } from '../../storybook/styles';
 
 @Component({
     selector: 'rdx-menubar-default',
     imports: [RdxMenuModule, RdxMenubarRoot, LucideCheck, LucideDot],
     changeDetection: ChangeDetectionStrategy.OnPush,
     template: `
-        <div [class]="mb.root" rdxMenubarRoot>
+        <div rdxMenubarRoot [class]="mb.root">
             <!-- File -->
             <ng-container #fileMenu="rdxMenuRoot" rdxMenuRoot>
-                <button [class]="mb.trigger" rdxMenuTrigger>File</button>
+                <button rdxMenuTrigger [class]="mb.trigger">File</button>
 
-                <div [class]="cn(m.positioner, 'data-[closed]:hidden')" align="start" sideOffset="4" rdxMenuPositioner>
-                    <div [class]="m.popup" rdxMenuPopup>
-                        <button [class]="m.item" rdxMenuItem>
+                <div align="start" sideOffset="4" rdxMenuPositioner [class]="cn(m.positioner, 'data-[closed]:hidden')">
+                    <div rdxMenuPopup [class]="m.popup">
+                        <button rdxMenuItem [class]="m.item">
                             New Tab
                             <span [class]="mb.shortcut">⌘ T</span>
                         </button>
-                        <button [class]="m.item" rdxMenuItem>
+                        <button rdxMenuItem [class]="m.item">
                             New Window
                             <span [class]="mb.shortcut">⌘ N</span>
                         </button>
-                        <button [class]="m.item" [disabled]="true" rdxMenuItem>New Incognito Window</button>
-                        <div [class]="m.separator" rdxMenuSeparator></div>
+                        <button rdxMenuItem [class]="m.item" [disabled]="true">New Incognito Window</button>
+                        <div rdxMenuSeparator [class]="m.separator"></div>
 
                         <!-- Share submenu -->
                         <ng-container #shareSub="rdxMenuRoot" rdxMenuRoot>
-                            <button [class]="cn(m.item, 'justify-between')" rdxMenuSubTrigger>
+                            <button rdxMenuSubTrigger [class]="cn(m.item, 'justify-between')">
                                 Share
                                 <span class="text-muted-foreground text-xs">›</span>
                             </button>
                             @if (shareSub.open()) {
-                                <div [class]="m.positioner" side="right" align="start" sideOffset="4" rdxMenuPositioner>
-                                    <div [class]="m.popup" rdxMenuPopup>
-                                        <button [class]="m.item" rdxMenuItem>Email Link</button>
-                                        <button [class]="m.item" rdxMenuItem>Messages</button>
-                                        <button [class]="m.item" rdxMenuItem>Notes</button>
+                                <div side="right" align="start" sideOffset="4" rdxMenuPositioner [class]="m.positioner">
+                                    <div rdxMenuPopup [class]="m.popup">
+                                        <button rdxMenuItem [class]="m.item">Email Link</button>
+                                        <button rdxMenuItem [class]="m.item">Messages</button>
+                                        <button rdxMenuItem [class]="m.item">Notes</button>
                                     </div>
                                 </div>
                             }
                         </ng-container>
 
-                        <div [class]="m.separator" rdxMenuSeparator></div>
-                        <button [class]="m.item" rdxMenuItem>
+                        <div rdxMenuSeparator [class]="m.separator"></div>
+                        <button rdxMenuItem [class]="m.item">
                             Print…
                             <span [class]="mb.shortcut">⌘ P</span>
                         </button>
@@ -13337,28 +13337,28 @@ import { cn, demoMenu, demoMenubar } from '../../storybook/styles';
 
             <!-- Edit -->
             <ng-container #editMenu="rdxMenuRoot" rdxMenuRoot>
-                <button [class]="mb.trigger" rdxMenuTrigger>Edit</button>
+                <button rdxMenuTrigger [class]="mb.trigger">Edit</button>
 
-                <div [class]="cn(m.positioner, 'data-[closed]:hidden')" align="start" sideOffset="4" rdxMenuPositioner>
-                    <div [class]="m.popup" rdxMenuPopup>
-                        <button [class]="m.item" rdxMenuItem>
+                <div align="start" sideOffset="4" rdxMenuPositioner [class]="cn(m.positioner, 'data-[closed]:hidden')">
+                    <div rdxMenuPopup [class]="m.popup">
+                        <button rdxMenuItem [class]="m.item">
                             Undo
                             <span [class]="mb.shortcut">⌘ Z</span>
                         </button>
-                        <button [class]="m.item" rdxMenuItem>
+                        <button rdxMenuItem [class]="m.item">
                             Redo
                             <span [class]="mb.shortcut">⇧ ⌘ Z</span>
                         </button>
-                        <div [class]="m.separator" rdxMenuSeparator></div>
-                        <button [class]="m.item" rdxMenuItem>
+                        <div rdxMenuSeparator [class]="m.separator"></div>
+                        <button rdxMenuItem [class]="m.item">
                             Cut
                             <span [class]="mb.shortcut">⌘ X</span>
                         </button>
-                        <button [class]="m.item" rdxMenuItem>
+                        <button rdxMenuItem [class]="m.item">
                             Copy
                             <span [class]="mb.shortcut">⌘ C</span>
                         </button>
-                        <button [class]="m.item" rdxMenuItem>
+                        <button rdxMenuItem [class]="m.item">
                             Paste
                             <span [class]="mb.shortcut">⌘ V</span>
                         </button>
@@ -13368,60 +13368,60 @@ import { cn, demoMenu, demoMenubar } from '../../storybook/styles';
 
             <!-- View -->
             <ng-container #viewMenu="rdxMenuRoot" rdxMenuRoot>
-                <button [class]="mb.trigger" rdxMenuTrigger>View</button>
+                <button rdxMenuTrigger [class]="mb.trigger">View</button>
 
-                <div [class]="cn(m.positioner, 'data-[closed]:hidden')" align="start" sideOffset="4" rdxMenuPositioner>
-                    <div [class]="m.popup" rdxMenuPopup>
-                        <label [(checked)]="showBookmarks" [class]="m.selectableItem" rdxMenuCheckboxItem>
-                            <span [class]="m.itemIndicator" rdxMenuCheckboxItemIndicator>
-                                <svg [size]="12" lucideCheck></svg>
+                <div align="start" sideOffset="4" rdxMenuPositioner [class]="cn(m.positioner, 'data-[closed]:hidden')">
+                    <div rdxMenuPopup [class]="m.popup">
+                        <label rdxMenuCheckboxItem [class]="m.selectableItem" [(checked)]="showBookmarks">
+                            <span rdxMenuCheckboxItemIndicator [class]="m.itemIndicator">
+                                <svg lucideCheck [size]="12"></svg>
                             </span>
                             Always Show Bookmarks Bar
                         </label>
-                        <label [(checked)]="showFullUrls" [class]="m.selectableItem" rdxMenuCheckboxItem>
-                            <span [class]="m.itemIndicator" rdxMenuCheckboxItemIndicator>
-                                <svg [size]="12" lucideCheck></svg>
+                        <label rdxMenuCheckboxItem [class]="m.selectableItem" [(checked)]="showFullUrls">
+                            <span rdxMenuCheckboxItemIndicator [class]="m.itemIndicator">
+                                <svg lucideCheck [size]="12"></svg>
                             </span>
                             Always Show Full URLs
                         </label>
-                        <div [class]="m.separator" rdxMenuSeparator></div>
-                        <button [class]="m.item" rdxMenuItem>
+                        <div rdxMenuSeparator [class]="m.separator"></div>
+                        <button rdxMenuItem [class]="m.item">
                             Reload
                             <span [class]="mb.shortcut">⌘ R</span>
                         </button>
-                        <button [class]="m.item" [disabled]="true" rdxMenuItem>
+                        <button rdxMenuItem [class]="m.item" [disabled]="true">
                             Force Reload
                             <span [class]="mb.shortcut">⇧ ⌘ R</span>
                         </button>
-                        <div [class]="m.separator" rdxMenuSeparator></div>
-                        <button [class]="m.item" rdxMenuItem>Toggle Fullscreen</button>
+                        <div rdxMenuSeparator [class]="m.separator"></div>
+                        <button rdxMenuItem [class]="m.item">Toggle Fullscreen</button>
                     </div>
                 </div>
             </ng-container>
 
             <!-- Profiles -->
             <ng-container #profilesMenu="rdxMenuRoot" rdxMenuRoot>
-                <button [class]="mb.trigger" rdxMenuTrigger>Profiles</button>
-
-                <div [class]="cn(m.positioner, 'data-[closed]:hidden')" align="start" sideOffset="4" rdxMenuPositioner>
-                    <div [class]="m.popup" rdxMenuPopup>
-                        <div [(value)]="activeProfile" rdxMenuRadioGroup>
-                            <label [class]="m.selectableItem" value="andy" rdxMenuRadioItem>
-                                <span [class]="m.itemIndicator" rdxMenuRadioItemIndicator>
-                                    <svg [size]="10" strokeWidth="5" lucideDot></svg>
+                <button rdxMenuTrigger [class]="mb.trigger">Profiles</button>
+
+                <div align="start" sideOffset="4" rdxMenuPositioner [class]="cn(m.positioner, 'data-[closed]:hidden')">
+                    <div rdxMenuPopup [class]="m.popup">
+                        <div rdxMenuRadioGroup [(value)]="activeProfile">
+                            <label value="andy" rdxMenuRadioItem [class]="m.selectableItem">
+                                <span rdxMenuRadioItemIndicator [class]="m.itemIndicator">
+                                    <svg strokeWidth="5" lucideDot [size]="10"></svg>
                                 </span>
                                 Andy
                             </label>
-                            <label [class]="m.selectableItem" value="luis" rdxMenuRadioItem>
-                                <span [class]="m.itemIndicator" rdxMenuRadioItemIndicator>
-                                    <svg [size]="10" strokeWidth="5" lucideDot></svg>
+                            <label value="luis" rdxMenuRadioItem [class]="m.selectableItem">
+                                <span rdxMenuRadioItemIndicator [class]="m.itemIndicator">
+                                    <svg strokeWidth="5" lucideDot [size]="10"></svg>
                                 </span>
                                 Luis
                             </label>
                         </div>
-                        <div [class]="m.separator" rdxMenuSeparator></div>
-                        <button [class]="cn(m.item, 'pl-8')" rdxMenuItem>Edit…</button>
-                        <button [class]="cn(m.item, 'pl-8')" rdxMenuItem>Add Profile…</button>
+                        <div rdxMenuSeparator [class]="m.separator"></div>
+                        <button rdxMenuItem [class]="cn(m.item, 'pl-8')">Edit…</button>
+                        <button rdxMenuItem [class]="cn(m.item, 'pl-8')">Add Profile…</button>
                     </div>
                 </div>
             </ng-container>
@@ -13498,13 +13498,13 @@ All other parts — `rdxMenuPositioner`, `rdxMenuPopup`, `rdxMenuItem`, `rdxMenu
 #### A graphical display of a numeric value within a range.
 
 ```typescript
-import { ChangeDetectionStrategy, Component, computed, DestroyRef, inject, signal } from '@angular/core';
 import { cn } from '../../storybook/styles';
 import { RdxMeterIndicatorDirective } from '../src/meter-indicator.directive';
 import { RdxMeterLabelDirective } from '../src/meter-label.directive';
 import { RdxMeterRootDirective } from '../src/meter-root.directive';
 import { RdxMeterTrackDirective } from '../src/meter-track.directive';
 import { RdxMeterValueDirective } from '../src/meter-value.directive';
+import { ChangeDetectionStrategy, Component, computed, DestroyRef, inject, signal } from '@angular/core';
 
 const storageSteps = [24, 38, 52, 67, 81] as const;
 
@@ -13521,10 +13521,10 @@ const storageSteps = [24, 38, 52, 67, 81] as const;
     template: `
         <div
             class="flex w-80 flex-col gap-2"
+            rdxMeterRoot
             [value]="value()"
             [format]="format"
             [getAriaValueText]="getAriaValueText"
-            rdxMeterRoot
         >
             <div class="flex items-center justify-between gap-4">
                 <span class="text-foreground text-sm font-medium" rdxMeterLabel>Storage used</span>
@@ -13532,7 +13532,7 @@ const storageSteps = [24, 38, 52, 67, 81] as const;
             </div>
 
             <div class="bg-muted h-3 overflow-hidden rounded-full" rdxMeterTrack>
-                <div [class]="indicatorClass()" rdxMeterIndicator></div>
+                <div rdxMeterIndicator [class]="indicatorClass()"></div>
             </div>
         </div>
     `
@@ -13614,13 +13614,13 @@ import {
 An animated labelled meter with formatted value text.
 
 ```typescript
-import { ChangeDetectionStrategy, Component, computed, DestroyRef, inject, signal } from '@angular/core';
 import { cn } from '../../storybook/styles';
 import { RdxMeterIndicatorDirective } from '../src/meter-indicator.directive';
 import { RdxMeterLabelDirective } from '../src/meter-label.directive';
 import { RdxMeterRootDirective } from '../src/meter-root.directive';
 import { RdxMeterTrackDirective } from '../src/meter-track.directive';
 import { RdxMeterValueDirective } from '../src/meter-value.directive';
+import { ChangeDetectionStrategy, Component, computed, DestroyRef, inject, signal } from '@angular/core';
 
 const storageSteps = [24, 38, 52, 67, 81] as const;
 
@@ -13637,10 +13637,10 @@ const storageSteps = [24, 38, 52, 67, 81] as const;
     template: `
         <div
             class="flex w-80 flex-col gap-2"
+            rdxMeterRoot
             [value]="value()"
             [format]="format"
             [getAriaValueText]="getAriaValueText"
-            rdxMeterRoot
         >
             <div class="flex items-center justify-between gap-4">
                 <span class="text-foreground text-sm font-medium" rdxMeterLabel>Storage used</span>
@@ -13648,7 +13648,7 @@ const storageSteps = [24, 38, 52, 67, 81] as const;
             </div>
 
             <div class="bg-muted h-3 overflow-hidden rounded-full" rdxMeterTrack>
-                <div [class]="indicatorClass()" rdxMeterIndicator></div>
+                <div rdxMeterIndicator [class]="indicatorClass()"></div>
             </div>
         </div>
     `
@@ -13774,22 +13774,22 @@ It composes the shared Popper, Portal, Presence, Dismissable Layer, and Composit
 remains headless: styles and native CSS animations belong to the consumer.
 
 ```typescript
+import { cn, demoNavigationMenu } from '../../storybook/styles';
 import { ChangeDetectionStrategy, Component } from '@angular/core';
 import { LucideChevronDown } from '@lucide/angular';
 import { navigationMenuImports } from '@radix-ng/primitives/navigation-menu';
-import { cn, demoNavigationMenu } from '../../storybook/styles';
 
 @Component({
     changeDetection: ChangeDetectionStrategy.Eager,
     selector: 'rdx-navigation-menu-default',
     imports: [...navigationMenuImports, LucideChevronDown],
     template: `
-        <nav [class]="m.root" rdxNavigationMenuRoot>
-            <ul [class]="m.list" rdxNavigationMenuList>
+        <nav rdxNavigationMenuRoot [class]="m.root">
+            <ul rdxNavigationMenuList [class]="m.list">
                 <li rdxNavigationMenuItem value="overview">
-                    <button [class]="m.trigger" rdxNavigationMenuTrigger>
+                    <button rdxNavigationMenuTrigger [class]="m.trigger">
                         Overview
-                        <svg [class]="m.icon" rdxNavigationMenuIcon lucideChevronDown></svg>
+                        <svg rdxNavigationMenuIcon lucideChevronDown [class]="m.icon"></svg>
                     </button>
 
                     <ng-container *rdxNavigationMenuContent>
@@ -13799,7 +13799,7 @@ import { cn, demoNavigationMenu } from '../../storybook/styles';
                             <ul [class]="cn(m.contentGrid, 'grid-cols-1 min-[500px]:grid-cols-2')">
                                 @for (item of overviewLinks; track item.title) {
                                     <li>
-                                        <a [class]="m.cardLink" [href]="item.href" rdxNavigationMenuLink>
+                                        <a rdxNavigationMenuLink [class]="m.cardLink" [href]="item.href">
                                             <div [class]="m.cardHeading">{{ item.title }}</div>
                                             <p [class]="m.cardText">{{ item.description }}</p>
                                         </a>
@@ -13811,9 +13811,9 @@ import { cn, demoNavigationMenu } from '../../storybook/styles';
                 </li>
 
                 <li rdxNavigationMenuItem value="handbook">
-                    <button [class]="m.trigger" rdxNavigationMenuTrigger>
+                    <button rdxNavigationMenuTrigger [class]="m.trigger">
                         Handbook
-                        <svg [class]="m.icon" rdxNavigationMenuIcon lucideChevronDown></svg>
+                        <svg rdxNavigationMenuIcon lucideChevronDown [class]="m.icon"></svg>
                     </button>
 
                     <ng-container *rdxNavigationMenuContent>
@@ -13823,7 +13823,7 @@ import { cn, demoNavigationMenu } from '../../storybook/styles';
                             <ul [class]="cn(m.contentGrid, 'max-w-[400px]')">
                                 @for (item of handbookLinks; track item.title) {
                                     <li>
-                                        <a [class]="m.cardLink" [href]="item.href" rdxNavigationMenuLink>
+                                        <a rdxNavigationMenuLink [class]="m.cardLink" [href]="item.href">
                                             <div [class]="m.cardHeading">{{ item.title }}</div>
                                             <p [class]="m.cardText">{{ item.description }}</p>
                                         </a>
@@ -13835,23 +13835,23 @@ import { cn, demoNavigationMenu } from '../../storybook/styles';
                 </li>
 
                 <li rdxNavigationMenuItem>
-                    <a [class]="m.link" rdxNavigationMenuLink href="https://github.com/mui/base-ui">GitHub</a>
+                    <a rdxNavigationMenuLink href="https://github.com/mui/base-ui" [class]="m.link">GitHub</a>
                 </li>
             </ul>
 
-            <div *rdxNavigationMenuPortal [class]="m.positioner" sideOffset="8" rdxNavigationMenuPositioner>
-                <div [class]="m.popup" rdxNavigationMenuPopup>
+            <div *rdxNavigationMenuPortal sideOffset="8" rdxNavigationMenuPositioner [class]="m.positioner">
+                <div rdxNavigationMenuPopup [class]="m.popup">
                     <svg
-                        [class]="m.arrow"
                         width="10"
                         height="5"
                         viewBox="0 0 30 10"
                         preserveAspectRatio="none"
                         rdxNavigationMenuArrow
+                        [class]="m.arrow"
                     >
                         <polygon points="0,0 30,0 15,10" />
                     </svg>
-                    <div [class]="m.viewport" rdxNavigationMenuViewport></div>
+                    <div rdxNavigationMenuViewport [class]="m.viewport"></div>
                 </div>
             </div>
         </nav>
@@ -13994,22 +13994,22 @@ A horizontal navigation list with two content panels and a standalone link. Cont
 the active item changes.
 
 ```typescript
+import { cn, demoNavigationMenu } from '../../storybook/styles';
 import { ChangeDetectionStrategy, Component } from '@angular/core';
 import { LucideChevronDown } from '@lucide/angular';
 import { navigationMenuImports } from '@radix-ng/primitives/navigation-menu';
-import { cn, demoNavigationMenu } from '../../storybook/styles';
 
 @Component({
     changeDetection: ChangeDetectionStrategy.Eager,
     selector: 'rdx-navigation-menu-default',
     imports: [...navigationMenuImports, LucideChevronDown],
     template: `
-        <nav [class]="m.root" rdxNavigationMenuRoot>
-            <ul [class]="m.list" rdxNavigationMenuList>
+        <nav rdxNavigationMenuRoot [class]="m.root">
+            <ul rdxNavigationMenuList [class]="m.list">
                 <li rdxNavigationMenuItem value="overview">
-                    <button [class]="m.trigger" rdxNavigationMenuTrigger>
+                    <button rdxNavigationMenuTrigger [class]="m.trigger">
                         Overview
-                        <svg [class]="m.icon" rdxNavigationMenuIcon lucideChevronDown></svg>
+                        <svg rdxNavigationMenuIcon lucideChevronDown [class]="m.icon"></svg>
                     </button>
 
                     <ng-container *rdxNavigationMenuContent>
@@ -14019,7 +14019,7 @@ import { cn, demoNavigationMenu } from '../../storybook/styles';
                             <ul [class]="cn(m.contentGrid, 'grid-cols-1 min-[500px]:grid-cols-2')">
                                 @for (item of overviewLinks; track item.title) {
                                     <li>
-                                        <a [class]="m.cardLink" [href]="item.href" rdxNavigationMenuLink>
+                                        <a rdxNavigationMenuLink [class]="m.cardLink" [href]="item.href">
                                             <div [class]="m.cardHeading">{{ item.title }}</div>
                                             <p [class]="m.cardText">{{ item.description }}</p>
                                         </a>
@@ -14031,9 +14031,9 @@ import { cn, demoNavigationMenu } from '../../storybook/styles';
                 </li>
 
                 <li rdxNavigationMenuItem value="handbook">
-                    <button [class]="m.trigger" rdxNavigationMenuTrigger>
+                    <button rdxNavigationMenuTrigger [class]="m.trigger">
                         Handbook
-                        <svg [class]="m.icon" rdxNavigationMenuIcon lucideChevronDown></svg>
+                        <svg rdxNavigationMenuIcon lucideChevronDown [class]="m.icon"></svg>
                     </button>
 
                     <ng-container *rdxNavigationMenuContent>
@@ -14043,7 +14043,7 @@ import { cn, demoNavigationMenu } from '../../storybook/styles';
                             <ul [class]="cn(m.contentGrid, 'max-w-[400px]')">
                                 @for (item of handbookLinks; track item.title) {
                                     <li>
-                                        <a [class]="m.cardLink" [href]="item.href" rdxNavigationMenuLink>
+                                        <a rdxNavigationMenuLink [class]="m.cardLink" [href]="item.href">
                                             <div [class]="m.cardHeading">{{ item.title }}</div>
                                             <p [class]="m.cardText">{{ item.description }}</p>
                                         </a>
@@ -14055,23 +14055,23 @@ import { cn, demoNavigationMenu } from '../../storybook/styles';
                 </li>
 
                 <li rdxNavigationMenuItem>
-                    <a [class]="m.link" rdxNavigationMenuLink href="https://github.com/mui/base-ui">GitHub</a>
+                    <a rdxNavigationMenuLink href="https://github.com/mui/base-ui" [class]="m.link">GitHub</a>
                 </li>
             </ul>
 
-            <div *rdxNavigationMenuPortal [class]="m.positioner" sideOffset="8" rdxNavigationMenuPositioner>
-                <div [class]="m.popup" rdxNavigationMenuPopup>
+            <div *rdxNavigationMenuPortal sideOffset="8" rdxNavigationMenuPositioner [class]="m.positioner">
+                <div rdxNavigationMenuPopup [class]="m.popup">
                     <svg
-                        [class]="m.arrow"
                         width="10"
                         height="5"
                         viewBox="0 0 30 10"
                         preserveAspectRatio="none"
                         rdxNavigationMenuArrow
+                        [class]="m.arrow"
                     >
                         <polygon points="0,0 30,0 15,10" />
                     </svg>
-                    <div [class]="m.viewport" rdxNavigationMenuViewport></div>
+                    <div rdxNavigationMenuViewport [class]="m.viewport"></div>
                 </div>
             </div>
         </nav>
@@ -14130,23 +14130,23 @@ export class RdxNavigationMenuDefaultComponent {
 Set `orientation="vertical"` on the root and position the popup to the side with `side="right"`.
 
 ```typescript
+import { cn, demoNavigationMenu } from '../../storybook/styles';
 import { ChangeDetectionStrategy, Component } from '@angular/core';
 import { LucideChevronRight } from '@lucide/angular';
 import { navigationMenuImports } from '@radix-ng/primitives/navigation-menu';
-import { cn, demoNavigationMenu } from '../../storybook/styles';
 
 @Component({
     changeDetection: ChangeDetectionStrategy.Eager,
     selector: 'rdx-navigation-menu-vertical',
     imports: [...navigationMenuImports, LucideChevronRight],
     template: `
-        <nav [class]="m.root" orientation="vertical" rdxNavigationMenuRoot>
-            <ul [class]="cn(m.list, 'w-48 flex-col items-stretch')" rdxNavigationMenuList>
+        <nav orientation="vertical" rdxNavigationMenuRoot [class]="m.root">
+            <ul rdxNavigationMenuList [class]="cn(m.list, 'w-48 flex-col items-stretch')">
                 @for (group of groups; track group.value) {
-                    <li [value]="group.value" rdxNavigationMenuItem>
-                        <button [class]="cn(m.trigger, 'justify-between')" rdxNavigationMenuTrigger>
+                    <li rdxNavigationMenuItem [value]="group.value">
+                        <button rdxNavigationMenuTrigger [class]="cn(m.trigger, 'justify-between')">
                             {{ group.label }}
-                            <svg [class]="m.icon" rdxNavigationMenuIcon lucideChevronRight></svg>
+                            <svg rdxNavigationMenuIcon lucideChevronRight [class]="m.icon"></svg>
                         </button>
 
                         <ng-container *rdxNavigationMenuContent>
@@ -14154,7 +14154,7 @@ import { cn, demoNavigationMenu } from '../../storybook/styles';
                                 <ul [class]="m.contentGrid">
                                     @for (link of group.links; track link) {
                                         <li>
-                                            <a [class]="m.cardLink" rdxNavigationMenuLink href="#">
+                                            <a rdxNavigationMenuLink href="#" [class]="m.cardLink">
                                                 <div [class]="m.cardHeading">{{ link }}</div>
                                             </a>
                                         </li>
@@ -14168,14 +14168,14 @@ import { cn, demoNavigationMenu } from '../../storybook/styles';
 
             <div
                 *rdxNavigationMenuPortal
-                [class]="m.positioner"
                 side="right"
                 sideOffset="8"
                 align="start"
                 rdxNavigationMenuPositioner
+                [class]="m.positioner"
             >
-                <div [class]="m.popup" rdxNavigationMenuPopup>
-                    <div [class]="m.viewport" rdxNavigationMenuViewport></div>
+                <div rdxNavigationMenuPopup [class]="m.popup">
+                    <div rdxNavigationMenuViewport [class]="m.viewport"></div>
                 </div>
             </div>
         </nav>
@@ -14199,23 +14199,23 @@ Set `dir="rtl"` on the root. Placement, alignment, and arrow-key direction follo
 direction.
 
 ```typescript
+import { cn, demoNavigationMenu } from '../../storybook/styles';
 import { ChangeDetectionStrategy, Component } from '@angular/core';
 import { LucideChevronDown } from '@lucide/angular';
 import { navigationMenuImports } from '@radix-ng/primitives/navigation-menu';
-import { cn, demoNavigationMenu } from '../../storybook/styles';
 
 @Component({
     changeDetection: ChangeDetectionStrategy.Eager,
     selector: 'rdx-navigation-menu-rtl',
     imports: [...navigationMenuImports, LucideChevronDown],
     template: `
-        <nav [class]="m.root" dir="rtl" rdxNavigationMenuRoot>
-            <ul [class]="m.list" dir="rtl" rdxNavigationMenuList>
+        <nav dir="rtl" rdxNavigationMenuRoot [class]="m.root">
+            <ul dir="rtl" rdxNavigationMenuList [class]="m.list">
                 @for (group of groups; track group.value) {
-                    <li [value]="group.value" rdxNavigationMenuItem>
-                        <button [class]="m.trigger" rdxNavigationMenuTrigger>
+                    <li rdxNavigationMenuItem [value]="group.value">
+                        <button rdxNavigationMenuTrigger [class]="m.trigger">
                             {{ group.label }}
-                            <svg [class]="m.icon" rdxNavigationMenuIcon lucideChevronDown></svg>
+                            <svg rdxNavigationMenuIcon lucideChevronDown [class]="m.icon"></svg>
                         </button>
 
                         <ng-container *rdxNavigationMenuContent>
@@ -14223,7 +14223,7 @@ import { cn, demoNavigationMenu } from '../../storybook/styles';
                                 <ul [class]="m.contentGrid">
                                     @for (link of group.links; track link) {
                                         <li>
-                                            <a [class]="m.cardLink" rdxNavigationMenuLink href="#">
+                                            <a rdxNavigationMenuLink href="#" [class]="m.cardLink">
                                                 <div [class]="m.cardHeading">{{ link }}</div>
                                             </a>
                                         </li>
@@ -14235,9 +14235,9 @@ import { cn, demoNavigationMenu } from '../../storybook/styles';
                 }
             </ul>
 
-            <div *rdxNavigationMenuPortal [class]="m.positioner" sideOffset="8" rdxNavigationMenuPositioner>
-                <div [class]="m.popup" rdxNavigationMenuPopup>
-                    <div [class]="m.viewport" rdxNavigationMenuViewport></div>
+            <div *rdxNavigationMenuPortal sideOffset="8" rdxNavigationMenuPositioner [class]="m.positioner">
+                <div rdxNavigationMenuPopup [class]="m.popup">
+                    <div rdxNavigationMenuViewport [class]="m.viewport"></div>
                 </div>
             </div>
         </nav>
@@ -14259,28 +14259,28 @@ export class RdxNavigationMenuRtlComponent {
 A navigation list of links without any popup. Links are plain tabbable anchors and expose `data-active`.
 
 ```typescript
+import { demoNavigationMenu } from '../../storybook/styles';
 import { ChangeDetectionStrategy, Component } from '@angular/core';
 import { navigationMenuImports } from '@radix-ng/primitives/navigation-menu';
-import { demoNavigationMenu } from '../../storybook/styles';
 
 @Component({
     changeDetection: ChangeDetectionStrategy.Eager,
     selector: 'rdx-navigation-menu-links',
     imports: [...navigationMenuImports],
     template: `
-        <nav [class]="m.root" rdxNavigationMenuRoot>
-            <ul [class]="m.list" rdxNavigationMenuList>
+        <nav rdxNavigationMenuRoot [class]="m.root">
+            <ul rdxNavigationMenuList [class]="m.list">
                 <li rdxNavigationMenuItem>
-                    <a [class]="m.link" rdxNavigationMenuLink active href="#">Home</a>
+                    <a rdxNavigationMenuLink active href="#" [class]="m.link">Home</a>
                 </li>
                 <li rdxNavigationMenuItem>
-                    <a [class]="m.link" rdxNavigationMenuLink href="#">Docs</a>
+                    <a rdxNavigationMenuLink href="#" [class]="m.link">Docs</a>
                 </li>
                 <li rdxNavigationMenuItem>
-                    <a [class]="m.link" rdxNavigationMenuLink href="#">Pricing</a>
+                    <a rdxNavigationMenuLink href="#" [class]="m.link">Pricing</a>
                 </li>
                 <li rdxNavigationMenuItem>
-                    <a [class]="m.link" rdxNavigationMenuLink href="#">Blog</a>
+                    <a rdxNavigationMenuLink href="#" [class]="m.link">Blog</a>
                 </li>
             </ul>
         </nav>
@@ -14299,10 +14299,10 @@ and an "action" link that runs a handler via `(onSelect)` without closing the me
 on a router link.
 
 ```typescript
+import { cn, demoNavigationMenu } from '../../storybook/styles';
 import { ChangeDetectionStrategy, Component, signal } from '@angular/core';
 import { LucideArrowUpRight, LucideBookOpen, LucideChevronDown, LucideCode, LucideLifeBuoy } from '@lucide/angular';
 import { navigationMenuImports } from '@radix-ng/primitives/navigation-menu';
-import { cn, demoNavigationMenu } from '../../storybook/styles';
 
 /**
  * Custom links: `rdxNavigationMenuLink` composes onto your own anchor markup — rich rows with icons,
@@ -14322,18 +14322,18 @@ import { cn, demoNavigationMenu } from '../../storybook/styles';
         LucideLifeBuoy
     ],
     template: `
-        <nav [class]="m.root" rdxNavigationMenuRoot>
-            <ul [class]="m.list" rdxNavigationMenuList>
+        <nav rdxNavigationMenuRoot [class]="m.root">
+            <ul rdxNavigationMenuList [class]="m.list">
                 <li rdxNavigationMenuItem value="resources">
-                    <button [class]="m.trigger" rdxNavigationMenuTrigger>
+                    <button rdxNavigationMenuTrigger [class]="m.trigger">
                         Resources
-                        <svg [class]="m.icon" rdxNavigationMenuIcon lucideChevronDown></svg>
+                        <svg rdxNavigationMenuIcon lucideChevronDown [class]="m.icon"></svg>
                     </button>
 
                     <ng-container *rdxNavigationMenuContent>
                         <ul class="grid w-[420px] gap-1 p-2">
                             <li>
-                                <a [class]="row" rdxNavigationMenuLink href="#">
+                                <a rdxNavigationMenuLink href="#" [class]="row">
                                     <span [class]="iconBox"><svg lucideBookOpen size="18"></svg></span>
                                     <span class="flex min-w-0 flex-1 flex-col">
                                         <span [class]="m.cardHeading">Documentation</span>
@@ -14342,7 +14342,7 @@ import { cn, demoNavigationMenu } from '../../storybook/styles';
                                 </a>
                             </li>
                             <li>
-                                <a [class]="row" rdxNavigationMenuLink href="#">
+                                <a rdxNavigationMenuLink href="#" [class]="row">
                                     <span [class]="iconBox"><svg lucideLifeBuoy size="18"></svg></span>
                                     <span class="flex min-w-0 flex-1 flex-col">
                                         <span [class]="m.cardHeading">Support</span>
@@ -14353,11 +14353,11 @@ import { cn, demoNavigationMenu } from '../../storybook/styles';
                             <li>
                                 <!-- An external link — the directive sits on a normal anchor. -->
                                 <a
-                                    [class]="row"
                                     rel="noreferrer noopener"
                                     target="_blank"
                                     rdxNavigationMenuLink
                                     href="https://github.com/radix-ng/primitives"
+                                    [class]="row"
                                 >
                                     <span [class]="iconBox"><svg lucideCode size="18"></svg></span>
                                     <span class="flex min-w-0 flex-1 flex-col">
@@ -14371,7 +14371,7 @@ import { cn, demoNavigationMenu } from '../../storybook/styles';
                             </li>
                             <li>
                                 <!-- Action link: keeps the menu open and runs a handler instead of navigating. -->
-                                <a [class]="row" (onSelect)="copy($event)" rdxNavigationMenuLink href="#">
+                                <a rdxNavigationMenuLink href="#" [class]="row" (onSelect)="copy($event)">
                                     <span [class]="iconBox"><svg lucideCode size="18"></svg></span>
                                     <span class="flex min-w-0 flex-1 flex-col">
                                         <span [class]="m.cardHeading">
@@ -14388,9 +14388,9 @@ import { cn, demoNavigationMenu } from '../../storybook/styles';
                 </li>
             </ul>
 
-            <div *rdxNavigationMenuPortal [class]="m.positioner" sideOffset="8" rdxNavigationMenuPositioner>
-                <div [class]="m.popup" rdxNavigationMenuPopup>
-                    <div [class]="m.viewport" rdxNavigationMenuViewport></div>
+            <div *rdxNavigationMenuPortal sideOffset="8" rdxNavigationMenuPositioner [class]="m.positioner">
+                <div rdxNavigationMenuPopup [class]="m.popup">
+                    <div rdxNavigationMenuViewport [class]="m.viewport"></div>
                 </div>
             </div>
         </nav>
@@ -14420,10 +14420,10 @@ When the content exceeds the available space, constrain it with a `max-height` a
 viewport measures the capped height, so the popup stays a fixed size and the list scrolls inside it.
 
 ```typescript
+import { cn, demoNavigationMenu } from '../../storybook/styles';
 import { ChangeDetectionStrategy, Component } from '@angular/core';
 import { LucideChevronDown } from '@lucide/angular';
 import { navigationMenuImports } from '@radix-ng/primitives/navigation-menu';
-import { cn, demoNavigationMenu } from '../../storybook/styles';
 
 /**
  * Large menus: when the content exceeds the available space, constrain the content with a
@@ -14435,12 +14435,12 @@ import { cn, demoNavigationMenu } from '../../storybook/styles';
     selector: 'rdx-navigation-menu-large',
     imports: [...navigationMenuImports, LucideChevronDown],
     template: `
-        <nav [class]="m.root" rdxNavigationMenuRoot>
-            <ul [class]="m.list" rdxNavigationMenuList>
+        <nav rdxNavigationMenuRoot [class]="m.root">
+            <ul rdxNavigationMenuList [class]="m.list">
                 <li rdxNavigationMenuItem value="components">
-                    <button [class]="m.trigger" rdxNavigationMenuTrigger>
+                    <button rdxNavigationMenuTrigger [class]="m.trigger">
                         Components
-                        <svg [class]="m.icon" rdxNavigationMenuIcon lucideChevronDown></svg>
+                        <svg rdxNavigationMenuIcon lucideChevronDown [class]="m.icon"></svg>
                     </button>
 
                     <ng-container *rdxNavigationMenuContent>
@@ -14448,7 +14448,7 @@ import { cn, demoNavigationMenu } from '../../storybook/styles';
                             <ul class="grid max-h-[320px] gap-1 overflow-y-auto p-2">
                                 @for (item of components; track item.title) {
                                     <li>
-                                        <a [class]="cn(m.cardLink, 'p-2.5')" rdxNavigationMenuLink href="#">
+                                        <a rdxNavigationMenuLink href="#" [class]="cn(m.cardLink, 'p-2.5')">
                                             <div [class]="m.cardHeading">{{ item.title }}</div>
                                             <p [class]="m.cardText">{{ item.text }}</p>
                                         </a>
@@ -14460,9 +14460,9 @@ import { cn, demoNavigationMenu } from '../../storybook/styles';
                 </li>
             </ul>
 
-            <div *rdxNavigationMenuPortal [class]="m.positioner" sideOffset="8" rdxNavigationMenuPositioner>
-                <div [class]="m.popup" rdxNavigationMenuPopup>
-                    <div [class]="m.viewport" rdxNavigationMenuViewport></div>
+            <div *rdxNavigationMenuPortal sideOffset="8" rdxNavigationMenuPositioner [class]="m.positioner">
+                <div rdxNavigationMenuPopup [class]="m.popup">
+                    <div rdxNavigationMenuViewport [class]="m.viewport"></div>
                 </div>
             </div>
         </nav>
@@ -14498,22 +14498,22 @@ Render a `rdxNavigationMenuRoot` inside content for a nested menu. The nested ro
 positions its own popup inline, and link selection closes both the nested and parent roots.
 
 ```typescript
+import { cn, demoNavigationMenu } from '../../storybook/styles';
 import { ChangeDetectionStrategy, Component } from '@angular/core';
 import { LucideChevronDown, LucideChevronRight } from '@lucide/angular';
 import { navigationMenuImports } from '@radix-ng/primitives/navigation-menu';
-import { cn, demoNavigationMenu } from '../../storybook/styles';
 
 @Component({
     changeDetection: ChangeDetectionStrategy.Eager,
     selector: 'rdx-navigation-menu-nested',
     imports: [...navigationMenuImports, LucideChevronDown, LucideChevronRight],
     template: `
-        <nav [class]="m.root" rdxNavigationMenuRoot>
-            <ul [class]="m.list" rdxNavigationMenuList>
+        <nav rdxNavigationMenuRoot [class]="m.root">
+            <ul rdxNavigationMenuList [class]="m.list">
                 <li rdxNavigationMenuItem value="overview">
-                    <button [class]="m.trigger" rdxNavigationMenuTrigger>
+                    <button rdxNavigationMenuTrigger [class]="m.trigger">
                         Overview
-                        <svg [class]="m.icon" rdxNavigationMenuIcon lucideChevronDown></svg>
+                        <svg rdxNavigationMenuIcon lucideChevronDown [class]="m.icon"></svg>
                     </button>
 
                     <ng-container *rdxNavigationMenuContent>
@@ -14523,7 +14523,7 @@ import { cn, demoNavigationMenu } from '../../storybook/styles';
                             <ul [class]="cn(m.contentGrid, 'grid-cols-1 min-[640px]:grid-cols-[12rem_12rem]')">
                                 @for (item of overviewLinks; track item.href) {
                                     <li>
-                                        <a [class]="m.cardLink" [href]="item.href" rdxNavigationMenuLink>
+                                        <a rdxNavigationMenuLink [class]="m.cardLink" [href]="item.href">
                                             <div [class]="m.cardHeading">{{ item.title }}</div>
                                             <p [class]="m.cardText">{{ item.description }}</p>
                                         </a>
@@ -14532,28 +14532,28 @@ import { cn, demoNavigationMenu } from '../../storybook/styles';
 
                                 <li>
                                     <nav orientation="vertical" rdxNavigationMenuRoot>
-                                        <ul [class]="m.contentGrid" rdxNavigationMenuList>
+                                        <ul rdxNavigationMenuList [class]="m.contentGrid">
                                             <li rdxNavigationMenuItem value="handbook">
                                                 <button
+                                                    rdxNavigationMenuTrigger
                                                     [class]="
                                                         cn(
                                                             m.cardLink,
                                                             'relative w-full border-0 bg-transparent text-left text-inherit'
                                                         )
                                                     "
-                                                    rdxNavigationMenuTrigger
                                                 >
                                                     <span [class]="m.cardHeading">Handbook</span>
                                                     <p [class]="m.cardText">How to use Base UI effectively.</p>
                                                     <svg
+                                                        rdxNavigationMenuIcon
+                                                        lucideChevronRight
                                                         [class]="
                                                             cn(
                                                                 m.icon,
                                                                 'absolute top-1/2 right-2.5 -translate-y-1/2 data-[popup-open]:rotate-0'
                                                             )
                                                         "
-                                                        rdxNavigationMenuIcon
-                                                        lucideChevronRight
                                                     ></svg>
                                                 </button>
 
@@ -14567,9 +14567,9 @@ import { cn, demoNavigationMenu } from '../../storybook/styles';
                                                             @for (item of handbookLinks; track item.href) {
                                                                 <li>
                                                                     <a
+                                                                        rdxNavigationMenuLink
                                                                         [class]="m.cardLink"
                                                                         [href]="item.href"
-                                                                        rdxNavigationMenuLink
                                                                     >
                                                                         <div [class]="m.cardHeading">
                                                                             {{ item.title }}
@@ -14588,15 +14588,15 @@ import { cn, demoNavigationMenu } from '../../storybook/styles';
 
                                         <div
                                             *rdxNavigationMenuPortal
-                                            [class]="m.positioner"
-                                            [align]="'end'"
-                                            [alignOffset]="-8"
                                             side="right"
                                             sideOffset="8"
                                             rdxNavigationMenuPositioner
+                                            [class]="m.positioner"
+                                            [align]="'end'"
+                                            [alignOffset]="-8"
                                         >
-                                            <div [class]="cn(m.popup, 'text-left')" rdxNavigationMenuPopup>
-                                                <div [class]="m.viewport" rdxNavigationMenuViewport></div>
+                                            <div rdxNavigationMenuPopup [class]="cn(m.popup, 'text-left')">
+                                                <div rdxNavigationMenuViewport [class]="m.viewport"></div>
                                             </div>
                                         </div>
                                     </nav>
@@ -14607,19 +14607,19 @@ import { cn, demoNavigationMenu } from '../../storybook/styles';
                 </li>
             </ul>
 
-            <div *rdxNavigationMenuPortal [class]="m.positioner" sideOffset="10" rdxNavigationMenuPositioner>
-                <div [class]="m.popup" rdxNavigationMenuPopup>
+            <div *rdxNavigationMenuPortal sideOffset="10" rdxNavigationMenuPositioner [class]="m.positioner">
+                <div rdxNavigationMenuPopup [class]="m.popup">
                     <svg
-                        [class]="m.arrow"
                         width="10"
                         height="5"
                         viewBox="0 0 30 10"
                         preserveAspectRatio="none"
                         rdxNavigationMenuArrow
+                        [class]="m.arrow"
                     >
                         <polygon points="0,0 30,0 15,10" />
                     </svg>
-                    <div [class]="m.viewport" rdxNavigationMenuViewport></div>
+                    <div rdxNavigationMenuViewport [class]="m.viewport"></div>
                 </div>
             </div>
         </nav>
@@ -14675,10 +14675,10 @@ A second level that stays in the same panel: inside the outer content, render an
 keeps the inline panel persistent.
 
 ```typescript
+import { cn, demoNavigationMenu } from '../../storybook/styles';
 import { ChangeDetectionStrategy, Component, signal } from '@angular/core';
 import { LucideChevronDown } from '@lucide/angular';
 import { navigationMenuImports } from '@radix-ng/primitives/navigation-menu';
-import { cn, demoNavigationMenu } from '../../storybook/styles';
 
 /**
  * Nested inline submenus: a second level that stays in the same panel. Inside the outer Content we
@@ -14691,32 +14691,32 @@ import { cn, demoNavigationMenu } from '../../storybook/styles';
     selector: 'rdx-navigation-menu-nested-inline',
     imports: [...navigationMenuImports, LucideChevronDown],
     template: `
-        <nav [class]="m.root" rdxNavigationMenuRoot>
-            <ul [class]="m.list" rdxNavigationMenuList>
+        <nav rdxNavigationMenuRoot [class]="m.root">
+            <ul rdxNavigationMenuList [class]="m.list">
                 <li rdxNavigationMenuItem value="browse">
-                    <button [class]="m.trigger" rdxNavigationMenuTrigger>
+                    <button rdxNavigationMenuTrigger [class]="m.trigger">
                         Browse
-                        <svg [class]="m.icon" rdxNavigationMenuIcon lucideChevronDown></svg>
+                        <svg rdxNavigationMenuIcon lucideChevronDown [class]="m.icon"></svg>
                     </button>
 
                     <ng-container *rdxNavigationMenuContent>
                         <!-- Inline second-level menu (flex row): categories left, viewport right. -->
                         <nav
                             class="flex w-[560px]"
-                            [value]="active()"
-                            (onValueChange)="onActive($event)"
                             orientation="vertical"
                             rdxNavigationMenuRoot
+                            [value]="active()"
+                            (onValueChange)="onActive($event)"
                         >
                             <ul
                                 class="border-border flex w-44 shrink-0 flex-col gap-1 border-r p-2"
                                 rdxNavigationMenuList
                             >
                                 @for (cat of categories; track cat.value) {
-                                    <li [value]="cat.value" rdxNavigationMenuItem>
+                                    <li rdxNavigationMenuItem [value]="cat.value">
                                         <button
-                                            [class]="cn(m.trigger, 'w-full justify-start')"
                                             rdxNavigationMenuTrigger
+                                            [class]="cn(m.trigger, 'w-full justify-start')"
                                         >
                                             {{ cat.label }}
                                         </button>
@@ -14725,7 +14725,7 @@ import { cn, demoNavigationMenu } from '../../storybook/styles';
                                             <ul class="grid gap-1">
                                                 @for (link of cat.links; track link.title) {
                                                     <li>
-                                                        <a [class]="m.cardLink" rdxNavigationMenuLink href="#">
+                                                        <a rdxNavigationMenuLink href="#" [class]="m.cardLink">
                                                             <div [class]="m.cardHeading">{{ link.title }}</div>
                                                             <p [class]="m.cardText">{{ link.text }}</p>
                                                         </a>
@@ -14737,19 +14737,19 @@ import { cn, demoNavigationMenu } from '../../storybook/styles';
                                 }
                             </ul>
 
-                            <div [class]="inlineViewport" rdxNavigationMenuViewport></div>
+                            <div rdxNavigationMenuViewport [class]="inlineViewport"></div>
                         </nav>
                     </ng-container>
                 </li>
 
                 <li rdxNavigationMenuItem>
-                    <a [class]="m.link" rdxNavigationMenuLink href="#">Pricing</a>
+                    <a rdxNavigationMenuLink href="#" [class]="m.link">Pricing</a>
                 </li>
             </ul>
 
-            <div *rdxNavigationMenuPortal [class]="m.positioner" sideOffset="8" rdxNavigationMenuPositioner>
-                <div [class]="m.popup" rdxNavigationMenuPopup>
-                    <div [class]="m.viewport" rdxNavigationMenuViewport></div>
+            <div *rdxNavigationMenuPortal sideOffset="8" rdxNavigationMenuPositioner [class]="m.positioner">
+                <div rdxNavigationMenuPopup [class]="m.popup">
+                    <div rdxNavigationMenuViewport [class]="m.viewport"></div>
                 </div>
             </div>
         </nav>
@@ -14921,7 +14921,7 @@ import {
         RdxNumberFieldDecrement
     ],
     template: `
-        <div class="flex flex-col gap-1.5" [id]="'quantity'" [defaultValue]="100" [min]="0" rdxNumberFieldRoot>
+        <div class="flex flex-col gap-1.5" rdxNumberFieldRoot [id]="'quantity'" [defaultValue]="100" [min]="0">
             <label class="text-foreground text-sm font-medium" for="quantity">Quantity</label>
             <div
                 class="border-border bg-background focus-within:ring-ring flex h-9 w-fit items-center rounded-md border shadow-sm focus-within:ring-2"
@@ -14931,7 +14931,7 @@ import {
                     class="text-foreground hover:bg-muted flex size-9 items-center justify-center rounded-l-md outline-none select-none disabled:pointer-events-none disabled:opacity-40"
                     rdxNumberFieldDecrement
                 >
-                    <svg class="flex" [lucideIcon]="Minus" size="16" />
+                    <svg class="flex" size="16" [lucideIcon]="Minus" />
                 </button>
                 <input
                     class="text-foreground h-9 w-16 bg-transparent text-center tabular-nums outline-none"
@@ -14941,7 +14941,7 @@ import {
                     class="text-foreground hover:bg-muted flex size-9 items-center justify-center rounded-r-md outline-none select-none disabled:pointer-events-none disabled:opacity-40"
                     rdxNumberFieldIncrement
                 >
-                    <svg class="flex" [lucideIcon]="Plus" size="16" />
+                    <svg class="flex" size="16" [lucideIcon]="Plus" />
                 </button>
             </div>
         </div>
@@ -15054,7 +15054,7 @@ import {
         RdxNumberFieldDecrement
     ],
     template: `
-        <div class="flex flex-col gap-1.5" [id]="'quantity'" [defaultValue]="100" [min]="0" rdxNumberFieldRoot>
+        <div class="flex flex-col gap-1.5" rdxNumberFieldRoot [id]="'quantity'" [defaultValue]="100" [min]="0">
             <label class="text-foreground text-sm font-medium" for="quantity">Quantity</label>
             <div
                 class="border-border bg-background focus-within:ring-ring flex h-9 w-fit items-center rounded-md border shadow-sm focus-within:ring-2"
@@ -15064,7 +15064,7 @@ import {
                     class="text-foreground hover:bg-muted flex size-9 items-center justify-center rounded-l-md outline-none select-none disabled:pointer-events-none disabled:opacity-40"
                     rdxNumberFieldDecrement
                 >
-                    <svg class="flex" [lucideIcon]="Minus" size="16" />
+                    <svg class="flex" size="16" [lucideIcon]="Minus" />
                 </button>
                 <input
                     class="text-foreground h-9 w-16 bg-transparent text-center tabular-nums outline-none"
@@ -15074,7 +15074,7 @@ import {
                     class="text-foreground hover:bg-muted flex size-9 items-center justify-center rounded-r-md outline-none select-none disabled:pointer-events-none disabled:opacity-40"
                     rdxNumberFieldIncrement
                 >
-                    <svg class="flex" [lucideIcon]="Plus" size="16" />
+                    <svg class="flex" size="16" [lucideIcon]="Plus" />
                 </button>
             </div>
         </div>
@@ -15116,10 +15116,10 @@ import {
         <div
             class="flex flex-col gap-1.5"
             id="decimal"
+            rdxNumberFieldRoot
             [defaultValue]="0"
             [format]="format"
             [step]="0.1"
-            rdxNumberFieldRoot
         >
             <label class="text-foreground text-sm font-medium" for="decimal">Decimal</label>
             <div
@@ -15130,7 +15130,7 @@ import {
                     class="text-foreground hover:bg-muted flex size-9 items-center justify-center rounded-l-md outline-none select-none disabled:pointer-events-none disabled:opacity-40"
                     rdxNumberFieldDecrement
                 >
-                    <svg class="flex" [lucideIcon]="Minus" size="16" />
+                    <svg class="flex" size="16" [lucideIcon]="Minus" />
                 </button>
                 <input
                     class="text-foreground h-9 w-20 bg-transparent text-center tabular-nums outline-none"
@@ -15140,7 +15140,7 @@ import {
                     class="text-foreground hover:bg-muted flex size-9 items-center justify-center rounded-r-md outline-none select-none disabled:pointer-events-none disabled:opacity-40"
                     rdxNumberFieldIncrement
                 >
-                    <svg class="flex" [lucideIcon]="Plus" size="16" />
+                    <svg class="flex" size="16" [lucideIcon]="Plus" />
                 </button>
             </div>
         </div>
@@ -15188,10 +15188,10 @@ import {
         <div
             class="flex flex-col gap-1.5"
             id="percentage"
+            rdxNumberFieldRoot
             [defaultValue]="0.05"
             [format]="format"
             [step]="0.01"
-            rdxNumberFieldRoot
         >
             <label class="text-foreground text-sm font-medium" for="percentage">Percentage</label>
             <div
@@ -15202,7 +15202,7 @@ import {
                     class="text-foreground hover:bg-muted flex size-9 items-center justify-center rounded-l-md outline-none select-none disabled:pointer-events-none disabled:opacity-40"
                     rdxNumberFieldDecrement
                 >
-                    <svg class="flex" [lucideIcon]="Minus" size="16" />
+                    <svg class="flex" size="16" [lucideIcon]="Minus" />
                 </button>
                 <input
                     class="text-foreground h-9 w-20 bg-transparent text-center tabular-nums outline-none"
@@ -15212,7 +15212,7 @@ import {
                     class="text-foreground hover:bg-muted flex size-9 items-center justify-center rounded-r-md outline-none select-none disabled:pointer-events-none disabled:opacity-40"
                     rdxNumberFieldIncrement
                 >
-                    <svg class="flex" [lucideIcon]="Plus" size="16" />
+                    <svg class="flex" size="16" [lucideIcon]="Plus" />
                 </button>
             </div>
         </div>
@@ -15255,7 +15255,7 @@ import {
         RdxNumberFieldDecrement
     ],
     template: `
-        <div class="flex flex-col gap-1.5" [id]="'currency'" [defaultValue]="5" [format]="format" rdxNumberFieldRoot>
+        <div class="flex flex-col gap-1.5" rdxNumberFieldRoot [id]="'currency'" [defaultValue]="5" [format]="format">
             <label class="text-foreground text-sm font-medium" for="currency">Price</label>
             <div
                 class="border-border bg-background focus-within:ring-ring flex h-9 w-fit items-center rounded-md border shadow-sm focus-within:ring-2"
@@ -15265,7 +15265,7 @@ import {
                     class="text-foreground hover:bg-muted flex size-9 items-center justify-center rounded-l-md outline-none select-none disabled:pointer-events-none disabled:opacity-40"
                     rdxNumberFieldDecrement
                 >
-                    <svg class="flex" [lucideIcon]="Minus" size="16" />
+                    <svg class="flex" size="16" [lucideIcon]="Minus" />
                 </button>
                 <input
                     class="text-foreground h-9 w-28 bg-transparent text-center tabular-nums outline-none"
@@ -15275,7 +15275,7 @@ import {
                     class="text-foreground hover:bg-muted flex size-9 items-center justify-center rounded-r-md outline-none select-none disabled:pointer-events-none disabled:opacity-40"
                     rdxNumberFieldIncrement
                 >
-                    <svg class="flex" [lucideIcon]="Plus" size="16" />
+                    <svg class="flex" size="16" [lucideIcon]="Plus" />
                 </button>
             </div>
         </div>
@@ -15329,15 +15329,15 @@ import {
         RdxNumberFieldScrubAreaCursor
     ],
     template: `
-        <div class="flex flex-col gap-1.5" [id]="'scrub'" [defaultValue]="0" rdxNumberFieldRoot>
+        <div class="flex flex-col gap-1.5" rdxNumberFieldRoot [id]="'scrub'" [defaultValue]="0">
             <div
                 class="text-foreground flex w-fit cursor-ew-resize items-center gap-1.5 text-sm font-medium select-none"
                 rdxNumberFieldScrubArea
             >
-                <svg class="flex" [lucideIcon]="Move" size="16" />
+                <svg class="flex" size="16" [lucideIcon]="Move" />
                 <label for="scrub">Drag to scrub</label>
                 <span class="text-popover-foreground" rdxNumberFieldScrubAreaCursor>
-                    <svg class="flex" [lucideIcon]="Move" size="20" />
+                    <svg class="flex" size="20" [lucideIcon]="Move" />
                 </span>
             </div>
             <div
@@ -15348,7 +15348,7 @@ import {
                     class="text-foreground hover:bg-muted flex size-9 items-center justify-center rounded-l-md outline-none select-none disabled:pointer-events-none disabled:opacity-40"
                     rdxNumberFieldDecrement
                 >
-                    <svg class="flex" [lucideIcon]="Minus" size="16" />
+                    <svg class="flex" size="16" [lucideIcon]="Minus" />
                 </button>
                 <input
                     class="text-foreground h-9 w-16 bg-transparent text-center tabular-nums outline-none"
@@ -15358,7 +15358,7 @@ import {
                     class="text-foreground hover:bg-muted flex size-9 items-center justify-center rounded-r-md outline-none select-none disabled:pointer-events-none disabled:opacity-40"
                     rdxNumberFieldIncrement
                 >
-                    <svg class="flex" [lucideIcon]="Plus" size="16" />
+                    <svg class="flex" size="16" [lucideIcon]="Plus" />
                 </button>
             </div>
         </div>
@@ -15406,11 +15406,11 @@ import {
             <div
                 class="flex flex-col gap-1.5"
                 id="guests"
-                [min]="1"
-                [max]="9"
                 name="guests"
                 formControlName="guests"
                 rdxNumberFieldRoot
+                [min]="1"
+                [max]="9"
             >
                 <label class="text-foreground text-sm font-medium" for="guests">Guests</label>
                 <input rdxNumberFieldHiddenInput />
@@ -15422,7 +15422,7 @@ import {
                         class="text-foreground hover:bg-muted flex size-9 items-center justify-center rounded-l-md outline-none select-none disabled:pointer-events-none disabled:opacity-40"
                         rdxNumberFieldDecrement
                     >
-                        <svg class="flex" [lucideIcon]="Minus" size="16" />
+                        <svg class="flex" size="16" [lucideIcon]="Minus" />
                     </button>
                     <input
                         class="text-foreground h-9 w-16 bg-transparent text-center tabular-nums outline-none"
@@ -15432,7 +15432,7 @@ import {
                         class="text-foreground hover:bg-muted flex size-9 items-center justify-center rounded-r-md outline-none select-none disabled:pointer-events-none disabled:opacity-40"
                         rdxNumberFieldIncrement
                     >
-                        <svg class="flex" [lucideIcon]="Plus" size="16" />
+                        <svg class="flex" size="16" [lucideIcon]="Plus" />
                     </button>
                 </div>
             </div>
@@ -15707,10 +15707,10 @@ Popover composes the shared Popper, structural Portal (portal + presence), Dismi
 Scope primitives. It remains headless: styles and native CSS animations belong to the consumer.
 
 ```typescript
+import { cn, demoButton, demoInput, demoPopover } from '../../storybook/styles';
 import { ChangeDetectionStrategy, Component } from '@angular/core';
 import { LucidePlus, LucideX } from '@lucide/angular';
 import { popoverImports } from '@radix-ng/primitives/popover';
-import { cn, demoButton, demoInput, demoPopover } from '../../storybook/styles';
 
 @Component({
     changeDetection: ChangeDetectionStrategy.Eager,
@@ -15718,29 +15718,29 @@ import { cn, demoButton, demoInput, demoPopover } from '../../storybook/styles';
     imports: [...popoverImports, LucidePlus, LucideX],
     template: `
         <ng-container rdxPopoverRoot>
-            <button [class]="cn(b.base, b.outline, b.size.md)" rdxPopoverTrigger>
+            <button rdxPopoverTrigger [class]="cn(b.base, b.outline, b.size.md)">
                 <svg aria-hidden="true" lucidePlus size="16" />
                 Add details
             </button>
 
-            <div *rdxPopoverPortal [class]="p.positioner" sideOffset="8" rdxPopoverPositioner>
-                <div [class]="p.popup" rdxPopoverPopup>
-                    <span [class]="p.arrow" rdxPopoverArrow></span>
-                    <h2 [class]="p.title" rdxPopoverTitle>Dimensions</h2>
-                    <p [class]="p.description" rdxPopoverDescription>Set the width and height for the element.</p>
+            <div *rdxPopoverPortal sideOffset="8" rdxPopoverPositioner [class]="p.positioner">
+                <div rdxPopoverPopup [class]="p.popup">
+                    <span rdxPopoverArrow [class]="p.arrow"></span>
+                    <h2 rdxPopoverTitle [class]="p.title">Dimensions</h2>
+                    <p rdxPopoverDescription [class]="p.description">Set the width and height for the element.</p>
 
                     <div class="mt-4 grid gap-3">
                         <label class="grid gap-1 text-xs font-medium">
                             Width
-                            <input [class]="input" value="100%" />
+                            <input value="100%" [class]="input" />
                         </label>
                         <label class="grid gap-1 text-xs font-medium">
                             Max width
-                            <input [class]="input" value="300px" />
+                            <input value="300px" [class]="input" />
                         </label>
                     </div>
 
-                    <button [class]="p.close" aria-label="Close" rdxPopoverClose>
+                    <button aria-label="Close" rdxPopoverClose [class]="p.close">
                         <svg aria-hidden="true" lucideX size="14" />
                     </button>
                 </div>
@@ -15848,10 +15848,10 @@ the positioner — use the explicit `<ng-template rdxPopoverPortal>` form (and t
 A form-like popup with an arrow, accessible title and description, and a close button.
 
 ```typescript
+import { cn, demoButton, demoInput, demoPopover } from '../../storybook/styles';
 import { ChangeDetectionStrategy, Component } from '@angular/core';
 import { LucidePlus, LucideX } from '@lucide/angular';
 import { popoverImports } from '@radix-ng/primitives/popover';
-import { cn, demoButton, demoInput, demoPopover } from '../../storybook/styles';
 
 @Component({
     changeDetection: ChangeDetectionStrategy.Eager,
@@ -15859,29 +15859,29 @@ import { cn, demoButton, demoInput, demoPopover } from '../../storybook/styles';
     imports: [...popoverImports, LucidePlus, LucideX],
     template: `
         <ng-container rdxPopoverRoot>
-            <button [class]="cn(b.base, b.outline, b.size.md)" rdxPopoverTrigger>
+            <button rdxPopoverTrigger [class]="cn(b.base, b.outline, b.size.md)">
                 <svg aria-hidden="true" lucidePlus size="16" />
                 Add details
             </button>
 
-            <div *rdxPopoverPortal [class]="p.positioner" sideOffset="8" rdxPopoverPositioner>
-                <div [class]="p.popup" rdxPopoverPopup>
-                    <span [class]="p.arrow" rdxPopoverArrow></span>
-                    <h2 [class]="p.title" rdxPopoverTitle>Dimensions</h2>
-                    <p [class]="p.description" rdxPopoverDescription>Set the width and height for the element.</p>
+            <div *rdxPopoverPortal sideOffset="8" rdxPopoverPositioner [class]="p.positioner">
+                <div rdxPopoverPopup [class]="p.popup">
+                    <span rdxPopoverArrow [class]="p.arrow"></span>
+                    <h2 rdxPopoverTitle [class]="p.title">Dimensions</h2>
+                    <p rdxPopoverDescription [class]="p.description">Set the width and height for the element.</p>
 
                     <div class="mt-4 grid gap-3">
                         <label class="grid gap-1 text-xs font-medium">
                             Width
-                            <input [class]="input" value="100%" />
+                            <input value="100%" [class]="input" />
                         </label>
                         <label class="grid gap-1 text-xs font-medium">
                             Max width
-                            <input [class]="input" value="300px" />
+                            <input value="300px" [class]="input" />
                         </label>
                     </div>
 
-                    <button [class]="p.close" aria-label="Close" rdxPopoverClose>
+                    <button aria-label="Close" rdxPopoverClose [class]="p.close">
                         <svg aria-hidden="true" lucideX size="14" />
                     </button>
                 </div>
@@ -15903,10 +15903,10 @@ Bind `[(open)]` when application state should open or close the popover programm
 example also includes the optional backdrop part.
 
 ```typescript
+import { cn, demoButton, demoPopover } from '../../storybook/styles';
 import { ChangeDetectionStrategy, Component, signal } from '@angular/core';
 import { LucideX } from '@lucide/angular';
 import { popoverImports } from '@radix-ng/primitives/popover';
-import { cn, demoButton, demoPopover } from '../../storybook/styles';
 
 @Component({
     changeDetection: ChangeDetectionStrategy.Eager,
@@ -15921,19 +15921,19 @@ import { cn, demoButton, demoPopover } from '../../storybook/styles';
 
             <p class="text-muted-foreground text-xs">State: {{ open() ? 'open' : 'closed' }}</p>
 
-            <ng-container [(open)]="open" rdxPopoverRoot>
-                <button [class]="cn(b.base, b.outline, b.size.md)" rdxPopoverTrigger>Toggle popover</button>
+            <ng-container rdxPopoverRoot [(open)]="open">
+                <button rdxPopoverTrigger [class]="cn(b.base, b.outline, b.size.md)">Toggle popover</button>
 
                 <ng-template rdxPopoverPortal>
-                    <div [class]="p.backdrop" rdxPopoverBackdrop></div>
-                    <div [class]="p.positioner" sideOffset="8" rdxPopoverPositioner>
-                        <div [class]="p.popup" rdxPopoverPopup>
-                            <span [class]="p.arrow" rdxPopoverArrow></span>
-                            <h2 [class]="p.title" rdxPopoverTitle>Controlled state</h2>
-                            <p [class]="p.description" rdxPopoverDescription>
+                    <div rdxPopoverBackdrop [class]="p.backdrop"></div>
+                    <div sideOffset="8" rdxPopoverPositioner [class]="p.positioner">
+                        <div rdxPopoverPopup [class]="p.popup">
+                            <span rdxPopoverArrow [class]="p.arrow"></span>
+                            <h2 rdxPopoverTitle [class]="p.title">Controlled state</h2>
+                            <p rdxPopoverDescription [class]="p.description">
                                 The root uses Angular two-way binding with a signal.
                             </p>
-                            <button [class]="p.close" aria-label="Close" rdxPopoverClose>
+                            <button aria-label="Close" rdxPopoverClose [class]="p.close">
                                 <svg aria-hidden="true" lucideX size="14" />
                             </button>
                         </div>
@@ -15957,10 +15957,10 @@ Bind both `[(open)]` and `[(triggerId)]` when application state should choose th
 `onOpenChange` reports the trigger element, trigger id, source event, and change reason.
 
 ```typescript
+import { cn, demoButton, demoPopover } from '../../storybook/styles';
 import { ChangeDetectionStrategy, Component, signal } from '@angular/core';
 import { LucideX } from '@lucide/angular';
 import { popoverImports, RdxPopoverOpenChange } from '@radix-ng/primitives/popover';
-import { cn, demoButton, demoPopover } from '../../storybook/styles';
 
 @Component({
     changeDetection: ChangeDetectionStrategy.Eager,
@@ -15969,18 +15969,18 @@ import { cn, demoButton, demoPopover } from '../../storybook/styles';
     template: `
         <div class="flex flex-col items-center gap-4">
             <ng-container
+                rdxPopoverRoot
                 [(open)]="open"
                 [(triggerId)]="triggerId"
                 (onOpenChange)="handleOpenChange($event)"
-                rdxPopoverRoot
             >
                 <div class="flex flex-wrap justify-center gap-2">
                     @for (item of items; track item.id) {
                         <button
+                            rdxPopoverTrigger
                             [class]="cn(b.base, b.outline, b.size.sm)"
                             [id]="item.id"
                             [payload]="item"
-                            rdxPopoverTrigger
                         >
                             {{ item.label }}
                         </button>
@@ -15991,14 +15991,14 @@ import { cn, demoButton, demoPopover } from '../../storybook/styles';
                     </button>
                 </div>
 
-                <div *rdxPopoverPortal [class]="p.positioner" sideOffset="8" rdxPopoverPositioner>
-                    <div [class]="p.popup" rdxPopoverPopup>
-                        <span [class]="p.arrow" rdxPopoverArrow></span>
-                        <h2 [class]="p.title" rdxPopoverTitle>{{ activeItem()?.label }}</h2>
-                        <p [class]="p.description" rdxPopoverDescription>
+                <div *rdxPopoverPortal sideOffset="8" rdxPopoverPositioner [class]="p.positioner">
+                    <div rdxPopoverPopup [class]="p.popup">
+                        <span rdxPopoverArrow [class]="p.arrow"></span>
+                        <h2 rdxPopoverTitle [class]="p.title">{{ activeItem()?.label }}</h2>
+                        <p rdxPopoverDescription [class]="p.description">
                             The externally controlled trigger id is {{ triggerId() }}.
                         </p>
-                        <button [class]="p.close" aria-label="Close" rdxPopoverClose>
+                        <button aria-label="Close" rdxPopoverClose [class]="p.close">
                             <svg aria-hidden="true" lucideX size="14" />
                         </button>
                     </div>
@@ -16046,11 +16046,11 @@ Configure `side`, `sideOffset`, `align`, and collision behavior on `rdxPopoverPo
 shared Popper primitive updates `data-side` and `data-align` after collision handling.
 
 ```typescript
+import { cn, demoButton, demoPopover } from '../../storybook/styles';
 import { ChangeDetectionStrategy, Component, signal } from '@angular/core';
 import { LucideX } from '@lucide/angular';
 import { popoverImports } from '@radix-ng/primitives/popover';
 import { Side } from '@radix-ng/primitives/popper';
-import { cn, demoButton, demoPopover } from '../../storybook/styles';
 
 @Component({
     changeDetection: ChangeDetectionStrategy.Eager,
@@ -16070,22 +16070,22 @@ import { cn, demoButton, demoPopover } from '../../storybook/styles';
             </div>
 
             <ng-container rdxPopoverRoot>
-                <button [class]="cn(b.base, b.outline, b.size.md)" rdxPopoverTrigger>Open {{ selectedSide() }}</button>
+                <button rdxPopoverTrigger [class]="cn(b.base, b.outline, b.size.md)">Open {{ selectedSide() }}</button>
 
                 <div
                     *rdxPopoverPortal
-                    [class]="p.positioner"
-                    [side]="selectedSide()"
                     sideOffset="8"
                     rdxPopoverPositioner
+                    [class]="p.positioner"
+                    [side]="selectedSide()"
                 >
-                    <div [class]="p.popup" rdxPopoverPopup>
-                        <span [class]="p.arrow" rdxPopoverArrow></span>
-                        <h2 [class]="p.title" rdxPopoverTitle>Positioned popup</h2>
-                        <p [class]="p.description" rdxPopoverDescription>
+                    <div rdxPopoverPopup [class]="p.popup">
+                        <span rdxPopoverArrow [class]="p.arrow"></span>
+                        <h2 rdxPopoverTitle [class]="p.title">Positioned popup</h2>
+                        <p rdxPopoverDescription [class]="p.description">
                             The positioner delegates collision handling to the shared Popper primitive.
                         </p>
-                        <button [class]="p.close" aria-label="Close" rdxPopoverClose>
+                        <button aria-label="Close" rdxPopoverClose [class]="p.close">
                             <svg aria-hidden="true" lucideX size="14" />
                         </button>
                     </div>
@@ -16110,10 +16110,10 @@ fade — the closed-state keyframes keep the content mounted until `animationend
 zoom/slide belongs on the popup, so it never fights the positioner's placement transform.
 
 ```typescript
+import { cn, demoButton, demoPopover } from '../../storybook/styles';
 import { ChangeDetectionStrategy, Component } from '@angular/core';
 import { LucideX } from '@lucide/angular';
 import { popoverImports } from '@radix-ng/primitives/popover';
-import { cn, demoButton, demoPopover } from '../../storybook/styles';
 
 @Component({
     changeDetection: ChangeDetectionStrategy.Eager,
@@ -16121,16 +16121,16 @@ import { cn, demoButton, demoPopover } from '../../storybook/styles';
     imports: [...popoverImports, LucideX],
     template: `
         <ng-container rdxPopoverRoot>
-            <button [class]="cn(b.base, b.outline, b.size.md)" rdxPopoverTrigger>Animated popover</button>
+            <button rdxPopoverTrigger [class]="cn(b.base, b.outline, b.size.md)">Animated popover</button>
 
-            <div *rdxPopoverPortal [class]="p.positioner" sideOffset="8" rdxPopoverPositioner>
-                <div [class]="cn(p.popup, p.popupAnimated)" rdxPopoverPopup>
-                    <span [class]="p.arrow" rdxPopoverArrow></span>
-                    <h2 [class]="p.title" rdxPopoverTitle>Native CSS keyframes</h2>
-                    <p [class]="p.description" rdxPopoverDescription>
+            <div *rdxPopoverPortal sideOffset="8" rdxPopoverPositioner [class]="p.positioner">
+                <div rdxPopoverPopup [class]="cn(p.popup, p.popupAnimated)">
+                    <span rdxPopoverArrow [class]="p.arrow"></span>
+                    <h2 rdxPopoverTitle [class]="p.title">Native CSS keyframes</h2>
+                    <p rdxPopoverDescription [class]="p.description">
                         Presence keeps this content mounted until the exit animation finishes.
                     </p>
-                    <button [class]="p.close" aria-label="Close" rdxPopoverClose>
+                    <button aria-label="Close" rdxPopoverClose [class]="p.close">
                         <svg aria-hidden="true" lucideX size="14" />
                     </button>
                 </div>
@@ -16151,10 +16151,10 @@ Set `modal` on `rdxPopoverRoot` to block outside interaction, or use `"trap-focu
 inside while leaving document scrolling and outside pointer interactions available.
 
 ```typescript
+import { cn, demoButton, demoInput, demoPopover } from '../../storybook/styles';
 import { ChangeDetectionStrategy, Component, signal } from '@angular/core';
 import { LucideX } from '@lucide/angular';
 import { popoverImports, RdxPopoverModal } from '@radix-ng/primitives/popover';
-import { cn, demoButton, demoInput, demoPopover } from '../../storybook/styles';
 
 @Component({
     changeDetection: ChangeDetectionStrategy.Eager,
@@ -16177,31 +16177,31 @@ import { cn, demoButton, demoInput, demoPopover } from '../../storybook/styles';
                 {{ description() }}
             </p>
 
-            <ng-container [modal]="modal()" rdxPopoverRoot>
-                <button [class]="cn(b.base, b.outline, b.size.md)" rdxPopoverTrigger>Open popover</button>
+            <ng-container rdxPopoverRoot [modal]="modal()">
+                <button rdxPopoverTrigger [class]="cn(b.base, b.outline, b.size.md)">Open popover</button>
 
                 <ng-template rdxPopoverPortal>
                     @if (modal() === true) {
-                        <div [class]="p.backdrop" rdxPopoverBackdrop></div>
+                        <div rdxPopoverBackdrop [class]="p.backdrop"></div>
                     }
-                    <div [class]="p.positioner" sideOffset="8" rdxPopoverPositioner>
-                        <div [class]="p.popup" rdxPopoverPopup>
-                            <span [class]="p.arrow" rdxPopoverArrow></span>
-                            <h2 [class]="p.title" rdxPopoverTitle>Modal behavior</h2>
-                            <p [class]="p.description" rdxPopoverDescription>
+                    <div sideOffset="8" rdxPopoverPositioner [class]="p.positioner">
+                        <div rdxPopoverPopup [class]="p.popup">
+                            <span rdxPopoverArrow [class]="p.arrow"></span>
+                            <h2 rdxPopoverTitle [class]="p.title">Modal behavior</h2>
+                            <p rdxPopoverDescription [class]="p.description">
                                 Switch modes, use Tab to move between controls, then try the outside button.
                             </p>
 
                             <label class="mt-4 grid gap-1 text-xs font-medium">
                                 Name
-                                <input [class]="input" placeholder="Focused when opened" />
+                                <input placeholder="Focused when opened" [class]="input" />
                             </label>
 
-                            <button [class]="cn(b.base, b.primary, b.size.sm, 'mt-3')" type="button">
+                            <button type="button" [class]="cn(b.base, b.primary, b.size.sm, 'mt-3')">
                                 Save changes
                             </button>
 
-                            <button [class]="p.close" aria-label="Close" rdxPopoverClose>
+                            <button aria-label="Close" rdxPopoverClose [class]="p.close">
                                 <svg aria-hidden="true" lucideX size="14" />
                             </button>
                         </div>
@@ -16247,10 +16247,10 @@ Pass `[anchor]` to `rdxPopoverPositioner` when the popup should open from a trig
 itself against a different element.
 
 ```typescript
+import { cn, demoButton, demoPopover } from '../../storybook/styles';
 import { ChangeDetectionStrategy, Component } from '@angular/core';
 import { LucideX } from '@lucide/angular';
 import { popoverImports } from '@radix-ng/primitives/popover';
-import { cn, demoButton, demoPopover } from '../../storybook/styles';
 
 @Component({
     changeDetection: ChangeDetectionStrategy.Eager,
@@ -16259,29 +16259,29 @@ import { cn, demoButton, demoPopover } from '../../storybook/styles';
     template: `
         <div class="flex w-[min(640px,80vw)] flex-col items-center gap-8">
             <ng-container rdxPopoverRoot>
-                <button [class]="cn(b.base, b.outline, b.size.md)" rdxPopoverTrigger>Open from this button</button>
+                <button rdxPopoverTrigger [class]="cn(b.base, b.outline, b.size.md)">Open from this button</button>
 
                 <div
-                    class="border-primary bg-primary/10 text-foreground flex h-24 w-56 items-center justify-center rounded-lg border border-dashed text-center text-sm font-medium"
                     #customAnchor
+                    class="border-primary bg-primary/10 text-foreground flex h-24 w-56 items-center justify-center rounded-lg border border-dashed text-center text-sm font-medium"
                 >
                     Popup anchor
                 </div>
 
                 <div
                     *rdxPopoverPortal
-                    [class]="p.positioner"
-                    [anchor]="customAnchor"
                     sideOffset="8"
                     rdxPopoverPositioner
+                    [class]="p.positioner"
+                    [anchor]="customAnchor"
                 >
-                    <div [class]="p.popup" rdxPopoverPopup>
-                        <span [class]="p.arrow" rdxPopoverArrow></span>
-                        <h2 [class]="p.title" rdxPopoverTitle>Custom anchor</h2>
-                        <p [class]="p.description" rdxPopoverDescription>
+                    <div rdxPopoverPopup [class]="p.popup">
+                        <span rdxPopoverArrow [class]="p.arrow"></span>
+                        <h2 rdxPopoverTitle [class]="p.title">Custom anchor</h2>
+                        <p rdxPopoverDescription [class]="p.description">
                             The trigger controls open state, but the positioner is anchored to the dashed box.
                         </p>
-                        <button [class]="p.close" aria-label="Close" rdxPopoverClose>
+                        <button aria-label="Close" rdxPopoverClose [class]="p.close">
                             <svg aria-hidden="true" lucideX size="14" />
                         </button>
                     </div>
@@ -16303,10 +16303,10 @@ Create a shared handle when triggers live outside the root or multiple triggers
 same popup. The handle also supports imperative `open(id)`, `toggle(id)`, and `close()` calls.
 
 ```typescript
+import { cn, demoButton, demoPopover } from '../../storybook/styles';
 import { ChangeDetectionStrategy, Component } from '@angular/core';
 import { LucideX } from '@lucide/angular';
 import { createRdxPopoverHandle, popoverImports } from '@radix-ng/primitives/popover';
-import { cn, demoButton, demoPopover } from '../../storybook/styles';
 
 @Component({
     changeDetection: ChangeDetectionStrategy.Eager,
@@ -16315,11 +16315,11 @@ import { cn, demoButton, demoPopover } from '../../storybook/styles';
     template: `
         <div class="flex w-[min(640px,80vw)] flex-col items-center gap-8">
             <div class="flex w-full justify-between gap-4">
-                <button id="account" [class]="cn(b.base, b.outline, b.size.md)" [handle]="popover" rdxPopoverTrigger>
+                <button id="account" rdxPopoverTrigger [class]="cn(b.base, b.outline, b.size.md)" [handle]="popover">
                     Account trigger
                 </button>
 
-                <button id="billing" [class]="cn(b.base, b.outline, b.size.md)" [handle]="popover" rdxPopoverTrigger>
+                <button id="billing" rdxPopoverTrigger [class]="cn(b.base, b.outline, b.size.md)" [handle]="popover">
                     Billing trigger
                 </button>
             </div>
@@ -16334,16 +16334,16 @@ import { cn, demoButton, demoPopover } from '../../storybook/styles';
                 <button [class]="cn(b.base, b.ghost, b.size.sm)" (click)="popover.close()">Close</button>
             </div>
 
-            <ng-container [handle]="popover" rdxPopoverRoot>
-                <div *rdxPopoverPortal [class]="p.positioner" sideOffset="8" rdxPopoverPositioner>
-                    <div [class]="p.popup" rdxPopoverPopup>
-                        <span [class]="p.arrow" rdxPopoverArrow></span>
-                        <h2 [class]="p.title" rdxPopoverTitle>Detached handles</h2>
-                        <p [class]="p.description" rdxPopoverDescription>
+            <ng-container rdxPopoverRoot [handle]="popover">
+                <div *rdxPopoverPortal sideOffset="8" rdxPopoverPositioner [class]="p.positioner">
+                    <div rdxPopoverPopup [class]="p.popup">
+                        <span rdxPopoverArrow [class]="p.arrow"></span>
+                        <h2 rdxPopoverTitle [class]="p.title">Detached handles</h2>
+                        <p rdxPopoverDescription [class]="p.description">
                             Both triggers live outside the root. Open another trigger to move this popup without closing
                             it first.
                         </p>
-                        <button [class]="p.close" aria-label="Close" rdxPopoverClose>
+                        <button aria-label="Close" rdxPopoverClose [class]="p.close">
                             <svg aria-hidden="true" lucideX size="14" />
                         </button>
                     </div>
@@ -16366,10 +16366,10 @@ Add `openOnHover` to a trigger when pointer users should be able to open its pop
 Use `delay` and `closeDelay` on the same trigger to configure the timing.
 
 ```typescript
+import { cn, demoButton, demoPopover } from '../../storybook/styles';
 import { ChangeDetectionStrategy, Component } from '@angular/core';
 import { LucideX } from '@lucide/angular';
 import { popoverImports } from '@radix-ng/primitives/popover';
-import { cn, demoButton, demoPopover } from '../../storybook/styles';
 
 @Component({
     changeDetection: ChangeDetectionStrategy.Eager,
@@ -16377,18 +16377,18 @@ import { cn, demoButton, demoPopover } from '../../storybook/styles';
     imports: [...popoverImports, LucideX],
     template: `
         <ng-container rdxPopoverRoot>
-            <button [class]="cn(b.base, b.outline, b.size.md)" [delay]="300" openOnHover rdxPopoverTrigger>
+            <button openOnHover rdxPopoverTrigger [class]="cn(b.base, b.outline, b.size.md)" [delay]="300">
                 Hover for details
             </button>
 
-            <div *rdxPopoverPortal [class]="p.positioner" sideOffset="8" rdxPopoverPositioner>
-                <div [class]="p.popup" rdxPopoverPopup>
-                    <span [class]="p.arrow" rdxPopoverArrow></span>
-                    <h2 [class]="p.title" rdxPopoverTitle>Hover popover</h2>
-                    <p [class]="p.description" rdxPopoverDescription>
+            <div *rdxPopoverPortal sideOffset="8" rdxPopoverPositioner [class]="p.positioner">
+                <div rdxPopoverPopup [class]="p.popup">
+                    <span rdxPopoverArrow [class]="p.arrow"></span>
+                    <h2 rdxPopoverTitle [class]="p.title">Hover popover</h2>
+                    <p rdxPopoverDescription [class]="p.description">
                         Move the pointer into this popup. It remains interactive after leaving the trigger.
                     </p>
-                    <button [class]="p.close" aria-label="Close" rdxPopoverClose>
+                    <button aria-label="Close" rdxPopoverClose [class]="p.close">
                         <svg aria-hidden="true" lucideX size="14" />
                     </button>
                 </div>
@@ -16410,9 +16410,9 @@ moves between triggers. The viewport exposes `data-activation-direction` and ret
 `data-previous` snapshot until its CSS transition or animation completes.
 
 ```typescript
+import { cn, demoButton, demoPopover } from '../../storybook/styles';
 import { ChangeDetectionStrategy, Component } from '@angular/core';
 import { popoverImports } from '@radix-ng/primitives/popover';
-import { cn, demoButton, demoPopover } from '../../storybook/styles';
 
 @Component({
     changeDetection: ChangeDetectionStrategy.Eager,
@@ -16423,10 +16423,10 @@ import { cn, demoButton, demoPopover } from '../../storybook/styles';
             <div class="flex flex-wrap justify-center gap-2">
                 @for (item of items; track item.id) {
                     <button
+                        rdxPopoverTrigger
                         [class]="cn(b.base, b.outline, b.size.sm)"
                         [payload]="item"
                         [id]="item.id"
-                        rdxPopoverTrigger
                     >
                         {{ item.label }}
                     </button>
@@ -16434,18 +16434,18 @@ import { cn, demoButton, demoPopover } from '../../storybook/styles';
             </div>
 
             <div
-                class="transition-[left,right,top,bottom] duration-200"
                 *rdxPopoverPortal
+                class="transition-[left,right,top,bottom] duration-200"
                 sideOffset="8"
                 rdxPopoverPositioner
             >
-                <div [class]="cn(p.popup, 'overflow-hidden transition-[width,height] duration-200')" rdxPopoverPopup>
+                <div rdxPopoverPopup [class]="cn(p.popup, 'overflow-hidden transition-[width,height] duration-200')">
                     <div class="relative" rdxPopoverViewport>
                         <div
                             class="data-[previous]:animate-popover-viewport-out data-[current]:animate-popover-viewport-in data-[previous]:absolute data-[previous]:inset-0"
                         >
-                            <h2 [class]="p.title" rdxPopoverTitle>{{ root.payload()?.label }}</h2>
-                            <p [class]="p.description" rdxPopoverDescription>{{ root.payload()?.description }}</p>
+                            <h2 rdxPopoverTitle [class]="p.title">{{ root.payload()?.label }}</h2>
+                            <p rdxPopoverDescription [class]="p.description">{{ root.payload()?.description }}</p>
                         </div>
                     </div>
                 </div>
@@ -16605,9 +16605,9 @@ native `button` that closes the popover on click.
 #### A popup that appears when a link is hovered or focused, showing a visual preview.
 
 ```typescript
+import { cn, demoFocusRing, demoPopover } from '../../storybook/styles';
 import { ChangeDetectionStrategy, Component } from '@angular/core';
 import { previewCardImports } from '@radix-ng/primitives/preview-card';
-import { cn, demoFocusRing, demoPopover } from '../../storybook/styles';
 
 @Component({
     changeDetection: ChangeDetectionStrategy.Eager,
@@ -16618,20 +16618,20 @@ import { cn, demoFocusRing, demoPopover } from '../../storybook/styles';
             <p class="text-muted-foreground max-w-md text-sm leading-6">
                 The principles of good
                 <a
-                    [class]="link"
                     href="https://en.wikipedia.org/wiki/Typography"
                     rel="noreferrer"
                     target="_blank"
                     rdxPreviewCardTrigger
+                    [class]="link"
                 >
                     typography
                 </a>
                 remain in the digital age.
             </p>
 
-            <div *rdxPreviewCardPortal [class]="p.positioner" sideOffset="8" rdxPreviewCardPositioner>
-                <div [class]="p.popup" rdxPreviewCardPopup>
-                    <span [class]="p.arrow" rdxPreviewCardArrow></span>
+            <div *rdxPreviewCardPortal sideOffset="8" rdxPreviewCardPositioner [class]="p.positioner">
+                <div rdxPreviewCardPopup [class]="p.popup">
+                    <span rdxPreviewCardArrow [class]="p.arrow"></span>
                     <div class="grid gap-3">
                         <div class="bg-muted h-28 rounded-md"></div>
                         <p class="text-muted-foreground text-sm">
@@ -16719,9 +16719,9 @@ to the positioner — use the explicit `<ng-template rdxPreviewCardPortal>` form
 Control both the open state and the active trigger id.
 
 ```typescript
+import { cn, demoButton, demoFocusRing, demoPopover } from '../../storybook/styles';
 import { ChangeDetectionStrategy, Component } from '@angular/core';
 import { previewCardImports } from '@radix-ng/primitives/preview-card';
-import { cn, demoButton, demoFocusRing, demoPopover } from '../../storybook/styles';
 
 @Component({
     changeDetection: ChangeDetectionStrategy.Eager,
@@ -16730,34 +16730,34 @@ import { cn, demoButton, demoFocusRing, demoPopover } from '../../storybook/styl
     template: `
         <div class="grid gap-4">
             <div class="flex items-center gap-3">
-                <button [class]="cn(b.base, b.outline, b.size.sm)" (click)="openFrom('design')" type="button">
+                <button type="button" [class]="cn(b.base, b.outline, b.size.sm)" (click)="openFrom('design')">
                     Open design
                 </button>
-                <button [class]="cn(b.base, b.outline, b.size.sm)" (click)="open = false" type="button">Close</button>
+                <button type="button" [class]="cn(b.base, b.outline, b.size.sm)" (click)="open = false">Close</button>
             </div>
 
             <ng-container
                 #root="rdxPreviewCardRoot"
+                rdxPreviewCardRoot
                 [(open)]="open"
                 [(triggerId)]="triggerId"
                 (onOpenChange)="triggerId = $event.triggerId"
-                rdxPreviewCardRoot
             >
                 <p class="text-muted-foreground max-w-lg text-sm leading-6">
                     Discover
-                    <a id="typography" [class]="link" [payload]="cards.typography" href="#" rdxPreviewCardTrigger>
+                    <a id="typography" href="#" rdxPreviewCardTrigger [class]="link" [payload]="cards.typography">
                         typography
                     </a>
                     ,
-                    <a id="design" [class]="link" [payload]="cards.design" href="#" rdxPreviewCardTrigger>design</a>
+                    <a id="design" href="#" rdxPreviewCardTrigger [class]="link" [payload]="cards.design">design</a>
                     , or
-                    <a id="art" [class]="link" [payload]="cards.art" href="#" rdxPreviewCardTrigger>art</a>
+                    <a id="art" href="#" rdxPreviewCardTrigger [class]="link" [payload]="cards.art">art</a>
                     .
                 </p>
 
-                <div *rdxPreviewCardPortal [class]="p.positioner" sideOffset="8" rdxPreviewCardPositioner>
-                    <div [class]="p.popup" rdxPreviewCardPopup>
-                        <span [class]="p.arrow" rdxPreviewCardArrow></span>
+                <div *rdxPreviewCardPortal sideOffset="8" rdxPreviewCardPositioner [class]="p.positioner">
+                    <div rdxPreviewCardPopup [class]="p.popup">
+                        <span rdxPreviewCardArrow [class]="p.arrow"></span>
                         <div class="grid gap-2">
                             <div class="bg-muted h-24 rounded-md"></div>
                             <p class="text-muted-foreground text-sm">{{ root.payload() }}</p>
@@ -16794,9 +16794,9 @@ export class RdxPreviewCardControlledMultipleComponent {
 Associate triggers outside the root through a shared handle.
 
 ```typescript
+import { cn, demoFocusRing, demoPopover } from '../../storybook/styles';
 import { ChangeDetectionStrategy, Component } from '@angular/core';
 import { createRdxPreviewCardHandle, previewCardImports } from '@radix-ng/primitives/preview-card';
-import { cn, demoFocusRing, demoPopover } from '../../storybook/styles';
 
 @Component({
     changeDetection: ChangeDetectionStrategy.Eager,
@@ -16808,32 +16808,32 @@ import { cn, demoFocusRing, demoPopover } from '../../storybook/styles';
                 Detached triggers can live outside the root:
                 <a
                     id="typography"
-                    [class]="link"
-                    [handle]="previewCard"
                     href="#"
                     payload="Typography preview"
                     rdxPreviewCardTrigger
+                    [class]="link"
+                    [handle]="previewCard"
                 >
                     typography
                 </a>
                 and
                 <a
                     id="design"
-                    [class]="link"
-                    [handle]="previewCard"
                     href="#"
                     payload="Design preview"
                     rdxPreviewCardTrigger
+                    [class]="link"
+                    [handle]="previewCard"
                 >
                     design
                 </a>
                 .
             </p>
 
-            <ng-container #root="rdxPreviewCardRoot" [handle]="previewCard" rdxPreviewCardRoot>
-                <div *rdxPreviewCardPortal [class]="p.positioner" sideOffset="8" rdxPreviewCardPositioner>
-                    <div [class]="p.popup" rdxPreviewCardPopup>
-                        <span [class]="p.arrow" rdxPreviewCardArrow></span>
+            <ng-container #root="rdxPreviewCardRoot" rdxPreviewCardRoot [handle]="previewCard">
+                <div *rdxPreviewCardPortal sideOffset="8" rdxPreviewCardPositioner [class]="p.positioner">
+                    <div rdxPreviewCardPopup [class]="p.popup">
+                        <span rdxPreviewCardArrow [class]="p.arrow"></span>
                         <div class="grid gap-2">
                             <div class="bg-muted h-24 rounded-md"></div>
                             <p class="text-muted-foreground text-sm">{{ root.payload() }}</p>
@@ -16856,10 +16856,10 @@ export class RdxPreviewCardDetachedComponent {
 Configure side, offsets, collision behavior, and arrow padding on the positioner.
 
 ```typescript
+import { cn, demoButton, demoFocusRing, demoPopover } from '../../storybook/styles';
 import { ChangeDetectionStrategy, Component, signal } from '@angular/core';
 import { Side } from '@radix-ng/primitives/popper';
 import { previewCardImports } from '@radix-ng/primitives/preview-card';
-import { cn, demoButton, demoFocusRing, demoPopover } from '../../storybook/styles';
 
 @Component({
     changeDetection: ChangeDetectionStrategy.Eager,
@@ -16870,9 +16870,9 @@ import { cn, demoButton, demoFocusRing, demoPopover } from '../../storybook/styl
             <div class="flex flex-wrap gap-2">
                 @for (option of sides; track option) {
                     <button
+                        type="button"
                         [class]="cn(b.base, side() === option ? b.primary : b.outline, b.size.sm)"
                         (click)="side.set(option)"
-                        type="button"
                     >
                         {{ option }}
                     </button>
@@ -16880,17 +16880,17 @@ import { cn, demoButton, demoFocusRing, demoPopover } from '../../storybook/styl
             </div>
 
             <ng-container rdxPreviewCardRoot>
-                <a [class]="link" href="#" rdxPreviewCardTrigger>Hover the positioned preview card</a>
+                <a href="#" rdxPreviewCardTrigger [class]="link">Hover the positioned preview card</a>
 
                 <div
                     *rdxPreviewCardPortal
-                    [class]="p.positioner"
-                    [side]="side()"
                     sideOffset="8"
                     rdxPreviewCardPositioner
+                    [class]="p.positioner"
+                    [side]="side()"
                 >
-                    <div [class]="p.popup" rdxPreviewCardPopup>
-                        <span [class]="p.arrow" rdxPreviewCardArrow></span>
+                    <div rdxPreviewCardPopup [class]="p.popup">
+                        <span rdxPreviewCardArrow [class]="p.arrow"></span>
                         <p class="text-muted-foreground text-sm">
                             The positioner exposes placement attributes and CSS variables for styling.
                         </p>
@@ -16915,9 +16915,9 @@ export class RdxPreviewCardPositioningComponent {
 Animate content changes when different triggers render different payloads.
 
 ```typescript
+import { cn, demoFocusRing, demoPopover } from '../../storybook/styles';
 import { ChangeDetectionStrategy, Component } from '@angular/core';
 import { previewCardImports } from '@radix-ng/primitives/preview-card';
-import { cn, demoFocusRing, demoPopover } from '../../storybook/styles';
 
 @Component({
     changeDetection: ChangeDetectionStrategy.Eager,
@@ -16928,21 +16928,21 @@ import { cn, demoFocusRing, demoPopover } from '../../storybook/styles';
             <p class="text-muted-foreground max-w-lg text-sm leading-6">
                 Compare
                 <a
-                    [class]="link"
                     href="#"
                     payload="Typography arranges type for readable language."
                     rdxPreviewCardTrigger
+                    [class]="link"
                 >
                     typography
                 </a>
                 ,
-                <a [class]="link" href="#" payload="Design shapes objects and systems." rdxPreviewCardTrigger>design</a>
+                <a href="#" payload="Design shapes objects and systems." rdxPreviewCardTrigger [class]="link">design</a>
                 , and
                 <a
-                    [class]="link"
                     href="#"
                     payload="Art communicates ideas through creative work."
                     rdxPreviewCardTrigger
+                    [class]="link"
                 >
                     art
                 </a>
@@ -16951,15 +16951,15 @@ import { cn, demoFocusRing, demoPopover } from '../../storybook/styles';
 
             <div
                 *rdxPreviewCardPortal
-                [class]="cn(p.positioner, 'transition-[left,right,top,bottom] duration-200')"
                 sideOffset="8"
                 rdxPreviewCardPositioner
+                [class]="cn(p.positioner, 'transition-[left,right,top,bottom] duration-200')"
             >
                 <div
-                    [class]="cn(p.popup, 'overflow-hidden transition-[width,height] duration-200')"
                     rdxPreviewCardPopup
+                    [class]="cn(p.popup, 'overflow-hidden transition-[width,height] duration-200')"
                 >
-                    <span [class]="p.arrow" rdxPreviewCardArrow></span>
+                    <span rdxPreviewCardArrow [class]="p.arrow"></span>
                     <div rdxPreviewCardViewport>
                         <div class="grid gap-2">
                             <div class="bg-muted h-24 rounded-md"></div>
@@ -17048,13 +17048,13 @@ The floating preview surface. It exposes dismiss events and transition attribute
 #### Displays task completion with accessible label, value, track, and indicator parts.
 
 ```typescript
-import { ChangeDetectionStrategy, Component, computed, DestroyRef, inject, signal } from '@angular/core';
 import { cn } from '../../storybook/styles';
 import { RdxProgressIndicatorDirective } from '../src/progress-indicator.directive';
 import { RdxProgressLabelDirective } from '../src/progress-label.directive';
 import { RdxProgressRootDirective } from '../src/progress-root.directive';
 import { RdxProgressTrackDirective } from '../src/progress-track.directive';
 import { RdxProgressValueDirective } from '../src/progress-value.directive';
+import { ChangeDetectionStrategy, Component, computed, DestroyRef, inject, signal } from '@angular/core';
 
 const progressSteps = [12, 28, 44, 60, 76, 92, 100] as const;
 
@@ -17069,14 +17069,14 @@ const progressSteps = [12, 28, 44, 60, 76, 92, 100] as const;
         RdxProgressIndicatorDirective
     ],
     template: `
-        <div class="flex w-80 flex-col gap-2" [value]="progress()" rdxProgressRoot>
+        <div class="flex w-80 flex-col gap-2" rdxProgressRoot [value]="progress()">
             <div class="flex items-center justify-between gap-4">
                 <span class="text-foreground text-sm font-medium" rdxProgressLabel>Upload progress</span>
                 <span class="text-muted-foreground text-sm tabular-nums" rdxProgressValue></span>
             </div>
 
             <div class="bg-muted h-3 overflow-hidden rounded-full" rdxProgressTrack>
-                <div [class]="indicatorClass()" rdxProgressIndicator></div>
+                <div rdxProgressIndicator [class]="indicatorClass()"></div>
             </div>
         </div>
     `
@@ -17163,13 +17163,13 @@ import {
 An animated labelled progress bar with formatted value text.
 
 ```typescript
-import { ChangeDetectionStrategy, Component, computed, DestroyRef, inject, signal } from '@angular/core';
 import { cn } from '../../storybook/styles';
 import { RdxProgressIndicatorDirective } from '../src/progress-indicator.directive';
 import { RdxProgressLabelDirective } from '../src/progress-label.directive';
 import { RdxProgressRootDirective } from '../src/progress-root.directive';
 import { RdxProgressTrackDirective } from '../src/progress-track.directive';
 import { RdxProgressValueDirective } from '../src/progress-value.directive';
+import { ChangeDetectionStrategy, Component, computed, DestroyRef, inject, signal } from '@angular/core';
 
 const progressSteps = [12, 28, 44, 60, 76, 92, 100] as const;
 
@@ -17184,14 +17184,14 @@ const progressSteps = [12, 28, 44, 60, 76, 92, 100] as const;
         RdxProgressIndicatorDirective
     ],
     template: `
-        <div class="flex w-80 flex-col gap-2" [value]="progress()" rdxProgressRoot>
+        <div class="flex w-80 flex-col gap-2" rdxProgressRoot [value]="progress()">
             <div class="flex items-center justify-between gap-4">
                 <span class="text-foreground text-sm font-medium" rdxProgressLabel>Upload progress</span>
                 <span class="text-muted-foreground text-sm tabular-nums" rdxProgressValue></span>
             </div>
 
             <div class="bg-muted h-3 overflow-hidden rounded-full" rdxProgressTrack>
-                <div [class]="indicatorClass()" rdxProgressIndicator></div>
+                <div rdxProgressIndicator [class]="indicatorClass()"></div>
             </div>
         </div>
     `
@@ -17279,12 +17279,12 @@ Use `min`, `max`, and `valueLabel` when progress is not a simple 0-100 percentag
 The same primitive state can drive an SVG circular progress indicator.
 
 ```typescript
-import { ChangeDetectionStrategy, Component, computed, signal } from '@angular/core';
 import { RdxProgressIndicatorDirective } from '../src/progress-indicator.directive';
 import { RdxProgressLabelDirective } from '../src/progress-label.directive';
 import { RdxProgressRootDirective } from '../src/progress-root.directive';
 import { RdxProgressTrackDirective } from '../src/progress-track.directive';
 import { RdxProgressValueDirective } from '../src/progress-value.directive';
+import { ChangeDetectionStrategy, Component, computed, signal } from '@angular/core';
 
 @Component({
     changeDetection: ChangeDetectionStrategy.Eager,
@@ -17297,20 +17297,20 @@ import { RdxProgressValueDirective } from '../src/progress-value.directive';
         RdxProgressIndicatorDirective
     ],
     template: `
-        <div class="relative grid size-40 place-items-center" [value]="progress()" rdxProgressRoot>
+        <div class="relative grid size-40 place-items-center" rdxProgressRoot [value]="progress()">
             <span class="sr-only" rdxProgressLabel>Storage used</span>
 
             <svg class="size-full -rotate-90" viewBox="0 0 100 100" rdxProgressTrack>
                 <circle class="stroke-muted fill-none" cx="50" cy="50" r="44" stroke-width="8" />
                 <circle
                     class="stroke-primary fill-none transition-all duration-500 ease-out"
-                    [attr.stroke-dasharray]="dashArray()"
                     cx="50"
                     cy="50"
                     r="44"
                     stroke-linecap="round"
                     stroke-width="8"
                     rdxProgressIndicator
+                    [attr.stroke-dasharray]="dashArray()"
                 />
             </svg>
 
@@ -17410,6 +17410,7 @@ only while a label is mounted). The value is conveyed through `aria-valuenow` /
 #### A set of checkable buttons—known as radio buttons—where no more than one of the buttons can be checked at a time.
 
 ```typescript
+import { demoRadio } from '../../storybook/styles';
 import { ChangeDetectionStrategy, Component } from '@angular/core';
 import { RdxLabelDirective } from '@radix-ng/primitives/label';
 import {
@@ -17418,31 +17419,30 @@ import {
     RdxRadioItemDirective,
     RdxRadioItemInputDirective
 } from '@radix-ng/primitives/radio';
-import { demoRadio } from '../../storybook/styles';
 
 @Component({
     changeDetection: ChangeDetectionStrategy.Eager,
     selector: 'radio-default-example',
     template: `
         <form>
-            <div [class]="r.group" rdxRadioRoot name="density" aria-label="View density">
-                <label [class]="r.row" rdxLabel>
-                    <span [class]="r.item" rdxRadioItem value="default">
-                        <span [class]="r.indicator" rdxRadioIndicator></span>
+            <div rdxRadioRoot name="density" aria-label="View density" [class]="r.group">
+                <label rdxLabel [class]="r.row">
+                    <span rdxRadioItem value="default" [class]="r.item">
+                        <span rdxRadioIndicator [class]="r.indicator"></span>
                         <input rdxRadioItemInput />
                     </span>
                     <span [class]="r.label">Default</span>
                 </label>
-                <label [class]="r.row" rdxLabel>
-                    <span [class]="r.item" rdxRadioItem value="comfortable">
-                        <span [class]="r.indicator" rdxRadioIndicator></span>
+                <label rdxLabel [class]="r.row">
+                    <span rdxRadioItem value="comfortable" [class]="r.item">
+                        <span rdxRadioIndicator [class]="r.indicator"></span>
                         <input rdxRadioItemInput />
                     </span>
                     <span [class]="r.label">Comfortable</span>
                 </label>
-                <label [class]="r.row" rdxLabel>
-                    <span [class]="r.item" rdxRadioItem value="compact">
-                        <span [class]="r.indicator" rdxRadioIndicator></span>
+                <label rdxLabel [class]="r.row">
+                    <span rdxRadioItem value="compact" [class]="r.item">
+                        <span rdxRadioIndicator [class]="r.indicator"></span>
                         <input rdxRadioItemInput />
                     </span>
                     <span [class]="r.label">Compact</span>
@@ -17533,6 +17533,7 @@ setValue(change: RdxRadioValueChangeEvent) {
 A radio group with sibling labels and hidden native inputs.
 
 ```typescript
+import { demoRadio } from '../../storybook/styles';
 import { ChangeDetectionStrategy, Component } from '@angular/core';
 import { RdxLabelDirective } from '@radix-ng/primitives/label';
 import {
@@ -17541,31 +17542,30 @@ import {
     RdxRadioItemDirective,
     RdxRadioItemInputDirective
 } from '@radix-ng/primitives/radio';
-import { demoRadio } from '../../storybook/styles';
 
 @Component({
     changeDetection: ChangeDetectionStrategy.Eager,
     selector: 'radio-default-example',
     template: `
         <form>
-            <div [class]="r.group" rdxRadioRoot name="density" aria-label="View density">
-                <label [class]="r.row" rdxLabel>
-                    <span [class]="r.item" rdxRadioItem value="default">
-                        <span [class]="r.indicator" rdxRadioIndicator></span>
+            <div rdxRadioRoot name="density" aria-label="View density" [class]="r.group">
+                <label rdxLabel [class]="r.row">
+                    <span rdxRadioItem value="default" [class]="r.item">
+                        <span rdxRadioIndicator [class]="r.indicator"></span>
                         <input rdxRadioItemInput />
                     </span>
                     <span [class]="r.label">Default</span>
                 </label>
-                <label [class]="r.row" rdxLabel>
-                    <span [class]="r.item" rdxRadioItem value="comfortable">
-                        <span [class]="r.indicator" rdxRadioIndicator></span>
+                <label rdxLabel [class]="r.row">
+                    <span rdxRadioItem value="comfortable" [class]="r.item">
+                        <span rdxRadioIndicator [class]="r.indicator"></span>
                         <input rdxRadioItemInput />
                     </span>
                     <span [class]="r.label">Comfortable</span>
                 </label>
-                <label [class]="r.row" rdxLabel>
-                    <span [class]="r.item" rdxRadioItem value="compact">
-                        <span [class]="r.indicator" rdxRadioIndicator></span>
+                <label rdxLabel [class]="r.row">
+                    <span rdxRadioItem value="compact" [class]="r.item">
+                        <span rdxRadioIndicator [class]="r.indicator"></span>
                         <input rdxRadioItemInput />
                     </span>
                     <span [class]="r.label">Compact</span>
@@ -17591,6 +17591,7 @@ export class RadioDefaultComponent {
 A disabled radio group ignores user interaction and exposes disabled state attributes to all items.
 
 ```typescript
+import { demoRadio } from '../../storybook/styles';
 import { ChangeDetectionStrategy, Component } from '@angular/core';
 import { RdxLabelDirective } from '@radix-ng/primitives/label';
 import {
@@ -17599,37 +17600,36 @@ import {
     RdxRadioItemDirective,
     RdxRadioItemInputDirective
 } from '@radix-ng/primitives/radio';
-import { demoRadio } from '../../storybook/styles';
 
 @Component({
     changeDetection: ChangeDetectionStrategy.Eager,
     selector: 'radio-disabled-example',
     template: `
         <div
-            [class]="r.group"
-            [value]="'comfortable'"
             rdxRadioRoot
             name="density-disabled"
             disabled
             aria-label="View density"
+            [class]="r.group"
+            [value]="'comfortable'"
         >
-            <label [class]="r.row" rdxLabel>
-                <span [class]="r.item" rdxRadioItem value="default">
-                    <span [class]="r.indicator" rdxRadioIndicator></span>
+            <label rdxLabel [class]="r.row">
+                <span rdxRadioItem value="default" [class]="r.item">
+                    <span rdxRadioIndicator [class]="r.indicator"></span>
                     <input rdxRadioItemInput />
                 </span>
                 <span [class]="r.label">Default</span>
             </label>
-            <label [class]="r.row" rdxLabel>
-                <span [class]="r.item" rdxRadioItem value="comfortable">
-                    <span [class]="r.indicator" rdxRadioIndicator></span>
+            <label rdxLabel [class]="r.row">
+                <span rdxRadioItem value="comfortable" [class]="r.item">
+                    <span rdxRadioIndicator [class]="r.indicator"></span>
                     <input rdxRadioItemInput />
                 </span>
                 <span [class]="r.label">Comfortable</span>
             </label>
-            <label [class]="r.row" rdxLabel>
-                <span [class]="r.item" rdxRadioItem value="compact">
-                    <span [class]="r.indicator" rdxRadioIndicator></span>
+            <label rdxLabel [class]="r.row">
+                <span rdxRadioItem value="compact" [class]="r.item">
+                    <span rdxRadioIndicator [class]="r.indicator"></span>
                     <input rdxRadioItemInput />
                 </span>
                 <span [class]="r.label">Compact</span>
@@ -17654,6 +17654,7 @@ export class RadioDisabledComponent {
 Radio group works with `ngModel`, native form submission, and a submit button via the hidden `rdxRadioItemInput`.
 
 ```typescript
+import { cn, demoButton, demoRadio } from '../../storybook/styles';
 import { ChangeDetectionStrategy, Component } from '@angular/core';
 import { FormsModule } from '@angular/forms';
 import { RdxLabelDirective } from '@radix-ng/primitives/label';
@@ -17663,7 +17664,6 @@ import {
     RdxRadioItemDirective,
     RdxRadioItemInputDirective
 } from '@radix-ng/primitives/radio';
-import { cn, demoButton, demoRadio } from '../../storybook/styles';
 
 @Component({
     changeDetection: ChangeDetectionStrategy.Eager,
@@ -17671,17 +17671,17 @@ import { cn, demoButton, demoRadio } from '../../storybook/styles';
     template: `
         <form class="flex w-72 flex-col gap-4" (ngSubmit)="submit()">
             <div
-                [(ngModel)]="hotelRoom"
-                [class]="r.group"
                 name="hotelRoom"
                 rdxRadioRoot
                 required
                 aria-label="Hotel room"
+                [class]="r.group"
+                [(ngModel)]="hotelRoom"
             >
                 @for (room of rooms; track room) {
-                    <label [class]="r.row" rdxLabel>
-                        <span [class]="r.item" [value]="room" rdxRadioItem>
-                            <span [class]="r.indicator" rdxRadioIndicator></span>
+                    <label rdxLabel [class]="r.row">
+                        <span rdxRadioItem [class]="r.item" [value]="room">
+                            <span rdxRadioIndicator [class]="r.indicator"></span>
                             <input rdxRadioItemInput />
                         </span>
                         <span [class]="r.label">
@@ -17691,7 +17691,7 @@ import { cn, demoButton, demoRadio } from '../../storybook/styles';
                 }
             </div>
 
-            <button [class]="cn(b.base, b.primary, b.size.md)" type="submit">Submit</button>
+            <button type="submit" [class]="cn(b.base, b.primary, b.size.md)">Submit</button>
 
             @if (submittedRoom) {
                 <p class="text-muted-foreground text-sm">
@@ -18241,9 +18241,6 @@ trigger) and **Item-aligned** (the popup overlaps the trigger, aligned to the se
 native `<select>` behavior).
 
 ```typescript
-import { ChangeDetectionStrategy, Component, input } from '@angular/core';
-import { LucideCheck, LucideChevronDown } from '@lucide/angular';
-import { Align } from '@radix-ng/primitives/popper';
 import { RdxSelectGroup } from '../src/select-group';
 import { RdxSelectGroupLabel } from '../src/select-group-label';
 import { RdxSelectItem } from '../src/select-item';
@@ -18256,6 +18253,9 @@ import { RdxSelectPositioner } from '../src/select-positioner';
 import { RdxSelectRoot } from '../src/select-root';
 import { RdxSelectTrigger } from '../src/select-trigger';
 import { RdxSelectValue } from '../src/select-value';
+import { ChangeDetectionStrategy, Component, input } from '@angular/core';
+import { LucideCheck, LucideChevronDown } from '@lucide/angular';
+import { Align } from '@radix-ng/primitives/popper';
 
 @Component({
     changeDetection: ChangeDetectionStrategy.Eager,
@@ -18289,7 +18289,7 @@ import { RdxSelectValue } from '../src/select-value';
                 <svg lucideChevronDown size="16" />
             </button>
 
-            <div class="z-[100]" *rdxSelectPortal [sideOffset]="sideOffset()" [align]="align()" rdxSelectPositioner>
+            <div *rdxSelectPortal class="z-[100]" rdxSelectPositioner [sideOffset]="sideOffset()" [align]="align()">
                 <div
                     class="border-border bg-popover text-popover-foreground min-w-40 rounded-lg border shadow-md will-change-[opacity,transform]"
                     rdxSelectPopup
@@ -18300,8 +18300,8 @@ import { RdxSelectValue } from '../src/select-value';
                             @for (option of options; track option) {
                                 <div
                                     class="text-popover-foreground data-[disabled]:text-muted-foreground data-[highlighted]:bg-primary data-[highlighted]:text-primary-foreground relative flex h-7 cursor-default items-center rounded-sm pr-8 pl-6 text-sm leading-none outline-none select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50"
-                                    [value]="option"
                                     rdxSelectItem
+                                    [value]="option"
                                 >
                                     <span
                                         class="absolute left-0 inline-flex w-6 items-center justify-center"
@@ -18319,8 +18319,8 @@ import { RdxSelectValue } from '../src/select-value';
                             @for (vegetable of vegetables; track vegetable) {
                                 <div
                                     class="text-popover-foreground data-[disabled]:text-muted-foreground data-[highlighted]:bg-primary data-[highlighted]:text-primary-foreground relative flex h-7 cursor-default items-center rounded-sm pr-8 pl-6 text-sm leading-none outline-none select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50"
-                                    [value]="vegetable"
                                     rdxSelectItem
+                                    [value]="vegetable"
                                 >
                                     <span
                                         class="absolute left-0 inline-flex w-6 items-center justify-center"
@@ -18457,9 +18457,6 @@ the behavior of a native `<select>`. Use `rdxSelectItemAlignedPosition` and
 A grouped list (Fruits / Vegetables) with Popper positioning. Click the trigger to open the popup.
 
 ```typescript
-import { ChangeDetectionStrategy, Component, input } from '@angular/core';
-import { LucideCheck, LucideChevronDown } from '@lucide/angular';
-import { Align } from '@radix-ng/primitives/popper';
 import { RdxSelectGroup } from '../src/select-group';
 import { RdxSelectGroupLabel } from '../src/select-group-label';
 import { RdxSelectItem } from '../src/select-item';
@@ -18472,6 +18469,9 @@ import { RdxSelectPositioner } from '../src/select-positioner';
 import { RdxSelectRoot } from '../src/select-root';
 import { RdxSelectTrigger } from '../src/select-trigger';
 import { RdxSelectValue } from '../src/select-value';
+import { ChangeDetectionStrategy, Component, input } from '@angular/core';
+import { LucideCheck, LucideChevronDown } from '@lucide/angular';
+import { Align } from '@radix-ng/primitives/popper';
 
 @Component({
     changeDetection: ChangeDetectionStrategy.Eager,
@@ -18505,7 +18505,7 @@ import { RdxSelectValue } from '../src/select-value';
                 <svg lucideChevronDown size="16" />
             </button>
 
-            <div class="z-[100]" *rdxSelectPortal [sideOffset]="sideOffset()" [align]="align()" rdxSelectPositioner>
+            <div *rdxSelectPortal class="z-[100]" rdxSelectPositioner [sideOffset]="sideOffset()" [align]="align()">
                 <div
                     class="border-border bg-popover text-popover-foreground min-w-40 rounded-lg border shadow-md will-change-[opacity,transform]"
                     rdxSelectPopup
@@ -18516,8 +18516,8 @@ import { RdxSelectValue } from '../src/select-value';
                             @for (option of options; track option) {
                                 <div
                                     class="text-popover-foreground data-[disabled]:text-muted-foreground data-[highlighted]:bg-primary data-[highlighted]:text-primary-foreground relative flex h-7 cursor-default items-center rounded-sm pr-8 pl-6 text-sm leading-none outline-none select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50"
-                                    [value]="option"
                                     rdxSelectItem
+                                    [value]="option"
                                 >
                                     <span
                                         class="absolute left-0 inline-flex w-6 items-center justify-center"
@@ -18535,8 +18535,8 @@ import { RdxSelectValue } from '../src/select-value';
                             @for (vegetable of vegetables; track vegetable) {
                                 <div
                                     class="text-popover-foreground data-[disabled]:text-muted-foreground data-[highlighted]:bg-primary data-[highlighted]:text-primary-foreground relative flex h-7 cursor-default items-center rounded-sm pr-8 pl-6 text-sm leading-none outline-none select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50"
-                                    [value]="vegetable"
                                     rdxSelectItem
+                                    [value]="vegetable"
                                 >
                                     <span
                                         class="absolute left-0 inline-flex w-6 items-center justify-center"
@@ -18569,8 +18569,6 @@ With `multiple`, picks accumulate in the value array, the trigger joins their la
 item keeps its indicator. Shows `RdxSelectIcon` and `RdxSelectSeparator`.
 
 ```typescript
-import { ChangeDetectionStrategy, Component, signal } from '@angular/core';
-import { LucideCheck, LucideChevronDown } from '@lucide/angular';
 import { RdxSelectGroup } from '../src/select-group';
 import { RdxSelectGroupLabel } from '../src/select-group-label';
 import { RdxSelectIcon } from '../src/select-icon';
@@ -18585,6 +18583,8 @@ import { RdxSelectRoot } from '../src/select-root';
 import { RdxSelectSeparator } from '../src/select-separator';
 import { RdxSelectTrigger } from '../src/select-trigger';
 import { RdxSelectValue } from '../src/select-value';
+import { ChangeDetectionStrategy, Component, signal } from '@angular/core';
+import { LucideCheck, LucideChevronDown } from '@lucide/angular';
 
 /**
  * Multiple selection: picks accumulate in the value array, `RdxSelectValue` joins their labels, and
@@ -18613,7 +18613,7 @@ import { RdxSelectValue } from '../src/select-value';
         RdxSelectItemIndicator
     ],
     template: `
-        <div [(value)]="value" multiple rdxSelectRoot>
+        <div multiple rdxSelectRoot [(value)]="value">
             <button
                 class="border-border bg-background text-foreground data-[placeholder]:text-muted-foreground hover:bg-muted focus-visible:ring-ring focus-visible:ring-offset-background inline-flex h-9 min-w-52 items-center justify-between gap-2 rounded-md border px-3 text-sm shadow-sm outline-none focus-visible:ring-2 focus-visible:ring-offset-2"
                 aria-label="Pick fruits"
@@ -18625,7 +18625,7 @@ import { RdxSelectValue } from '../src/select-value';
                 <svg lucideChevronDown size="16" rdxSelectIcon></svg>
             </button>
 
-            <div class="z-[100]" *rdxSelectPortal [sideOffset]="5" rdxSelectPositioner>
+            <div *rdxSelectPortal class="z-[100]" rdxSelectPositioner [sideOffset]="5">
                 <div
                     class="border-border bg-popover text-popover-foreground min-w-52 rounded-lg border p-1 shadow-md"
                     rdxSelectPopup
@@ -18634,8 +18634,8 @@ import { RdxSelectValue } from '../src/select-value';
                         <div class="text-muted-foreground px-6 text-xs leading-6" rdxSelectGroupLabel>Fruits</div>
                         <div rdxSelectGroup>
                             @for (fruit of fruits; track fruit) {
-                                <div [class]="itemClass" [value]="fruit" rdxSelectItem>
-                                    <span [class]="indicatorClass" rdxSelectItemIndicator>
+                                <div rdxSelectItem [class]="itemClass" [value]="fruit">
+                                    <span rdxSelectItemIndicator [class]="indicatorClass">
                                         <svg lucideCheck size="16"></svg>
                                     </span>
                                     <span rdxSelectItemText>{{ fruit }}</span>
@@ -18646,8 +18646,8 @@ import { RdxSelectValue } from '../src/select-value';
                         <div class="text-muted-foreground px-6 text-xs leading-6" rdxSelectGroupLabel>Berries</div>
                         <div rdxSelectGroup>
                             @for (berry of berries; track berry) {
-                                <div [class]="itemClass" [value]="berry" rdxSelectItem>
-                                    <span [class]="indicatorClass" rdxSelectItemIndicator>
+                                <div rdxSelectItem [class]="itemClass" [value]="berry">
+                                    <span rdxSelectItemIndicator [class]="indicatorClass">
                                         <svg lucideCheck size="16"></svg>
                                     </span>
                                     <span rdxSelectItemText>{{ berry }}</span>
@@ -18678,8 +18678,6 @@ export class SelectMultiple {
 `closeInteractionType`, so app logic can distinguish keyboard, mouse, and touch flows explicitly.
 
 ```typescript
-import { ChangeDetectionStrategy, Component, signal } from '@angular/core';
-import { LucideCheck, LucideChevronDown } from '@lucide/angular';
 import {
     RdxSelectItem,
     RdxSelectItemIndicator,
@@ -18694,6 +18692,8 @@ import {
     RdxSelectValue,
     RdxSelectValueChangeEvent
 } from '../index';
+import { ChangeDetectionStrategy, Component, signal } from '@angular/core';
+import { LucideCheck, LucideChevronDown } from '@lucide/angular';
 
 interface SelectEventLogEntry {
     label: string;
@@ -18725,11 +18725,11 @@ interface SelectEventLogEntry {
                 <div class="flex flex-col gap-2">
                     <ng-container
                         #root="rdxSelectRoot"
+                        rdxSelectRoot
                         [(open)]="open"
                         [(value)]="value"
                         (onOpenChange)="handleOpenChange($event)"
                         (onValueChange)="handleValueChange($event)"
-                        rdxSelectRoot
                     >
                         <button
                             class="border-border bg-background text-foreground data-[placeholder]:text-muted-foreground hover:bg-muted focus-visible:ring-ring focus-visible:ring-offset-background inline-flex h-9 w-full items-center justify-between gap-2 rounded-md border px-3 text-sm shadow-sm outline-none focus-visible:ring-2 focus-visible:ring-offset-2"
@@ -18742,7 +18742,7 @@ interface SelectEventLogEntry {
                             <svg lucideChevronDown size="16" />
                         </button>
 
-                        <div class="z-[100]" *rdxSelectPortal sideOffset="6" rdxSelectPositioner>
+                        <div *rdxSelectPortal class="z-[100]" sideOffset="6" rdxSelectPositioner>
                             <div
                                 class="border-border bg-popover text-popover-foreground min-w-48 rounded-lg border p-1 shadow-md"
                                 rdxSelectPopup
@@ -18751,8 +18751,8 @@ interface SelectEventLogEntry {
                                     @for (option of options; track option.value) {
                                         <div
                                             class="data-[highlighted]:bg-primary data-[highlighted]:text-primary-foreground relative flex h-8 cursor-default items-center rounded-sm pr-8 pl-7 text-sm outline-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50"
-                                            [value]="option.value"
                                             rdxSelectItem
+                                            [value]="option.value"
                                         >
                                             <span
                                                 class="absolute left-2 inline-flex size-4 items-center justify-center"
@@ -18770,8 +18770,8 @@ interface SelectEventLogEntry {
                         <div class="grid gap-2 pt-1">
                             <button
                                 class="border-border bg-background text-foreground hover:bg-muted inline-flex h-7 items-center justify-between rounded-md border px-3 text-xs"
-                                (click)="cancelNextOpen.update((value) => !value)"
                                 type="button"
+                                (click)="cancelNextOpen.update((value) => !value)"
                             >
                                 <span>Cancel next open</span>
                                 <span class="text-muted-foreground">{{ cancelNextOpen() ? 'armed' : 'off' }}</span>
@@ -18779,8 +18779,8 @@ interface SelectEventLogEntry {
 
                             <button
                                 class="border-border bg-background text-foreground hover:bg-muted inline-flex h-7 items-center justify-between rounded-md border px-3 text-xs"
-                                (click)="cancelNextValue.update((value) => !value)"
                                 type="button"
+                                (click)="cancelNextValue.update((value) => !value)"
                             >
                                 <span>Cancel next value</span>
                                 <span class="text-muted-foreground">{{ cancelNextValue() ? 'armed' : 'off' }}</span>
@@ -18810,8 +18810,8 @@ interface SelectEventLogEntry {
                         </div>
                         <button
                             class="text-muted-foreground hover:text-foreground inline-flex h-7 items-center rounded-md px-2 text-xs"
-                            (click)="logs.set([])"
                             type="button"
+                            (click)="logs.set([])"
                         >
                             Clear
                         </button>
@@ -18900,8 +18900,6 @@ key (here `id`) instead of reference, and render rich, two-line content in both
 items from the selected object.
 
 ```typescript
-import { ChangeDetectionStrategy, Component } from '@angular/core';
-import { LucideCheck, LucideChevronsUpDown } from '@lucide/angular';
 import { RdxSelectItem } from '../src/select-item';
 import { RdxSelectItemIndicator } from '../src/select-item-indicator';
 import { RdxSelectItemText } from '../src/select-item-text';
@@ -18912,6 +18910,8 @@ import { RdxSelectPositioner } from '../src/select-positioner';
 import { RdxSelectRoot } from '../src/select-root';
 import { RdxSelectTrigger } from '../src/select-trigger';
 import { RdxSelectValue } from '../src/select-value';
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { LucideCheck, LucideChevronsUpDown } from '@lucide/angular';
 
 interface ShippingMethod {
     id: string;
@@ -18948,7 +18948,7 @@ interface ShippingMethod {
                 Shipping method
             </label>
 
-            <ng-container #root="rdxSelectRoot" [value]="shippingMethods[0]" [isItemEqualToValue]="'id'" rdxSelectRoot>
+            <ng-container #root="rdxSelectRoot" rdxSelectRoot [value]="shippingMethods[0]" [isItemEqualToValue]="'id'">
                 <button
                     class="border-border bg-background text-foreground hover:bg-muted focus-visible:ring-ring focus-visible:ring-offset-background inline-flex min-h-9 min-w-64 items-center justify-between gap-3 rounded-md border px-3 py-1.5 text-sm shadow-sm outline-none focus-visible:ring-2 focus-visible:ring-offset-2 data-[disabled]:opacity-50"
                     aria-labelledby="shipping-method-label"
@@ -18969,7 +18969,7 @@ interface ShippingMethod {
                     <svg class="text-muted-foreground shrink-0" lucideChevronsUpDown size="16" />
                 </button>
 
-                <div class="z-[100]" *rdxSelectPortal [sideOffset]="5" align="start" rdxSelectPositioner>
+                <div *rdxSelectPortal class="z-[100]" align="start" rdxSelectPositioner [sideOffset]="5">
                     <div
                         class="border-border bg-popover text-popover-foreground min-w-[var(--radix-select-trigger-width)] rounded-lg border shadow-md will-change-[opacity,transform]"
                         rdxSelectPopup
@@ -18978,8 +18978,8 @@ interface ShippingMethod {
                             @for (method of shippingMethods; track method.id) {
                                 <div
                                     class="text-popover-foreground data-[disabled]:text-muted-foreground data-[highlighted]:bg-primary data-[highlighted]:text-primary-foreground group relative grid cursor-default grid-cols-[1.25rem_1fr] items-start gap-2 rounded-sm py-1.5 pr-3 pl-2 outline-none select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50"
-                                    [value]="method"
                                     rdxSelectItem
+                                    [value]="method"
                                 >
                                     <span
                                         class="col-start-1 mt-0.5 inline-flex items-center justify-center"
@@ -19024,8 +19024,6 @@ When the list is taller than the available viewport, `rdxSelectScrollUpButton` a
 `rdxSelectScrollDownButton` appear automatically at the top and bottom of the popup.
 
 ```typescript
-import { ChangeDetectionStrategy, Component } from '@angular/core';
-import { LucideCheck, LucideChevronDown, LucideChevronUp } from '@lucide/angular';
 import { RdxSelectGroup } from '../src/select-group';
 import { RdxSelectGroupLabel } from '../src/select-group-label';
 import { RdxSelectItem } from '../src/select-item';
@@ -19040,6 +19038,8 @@ import { RdxSelectScrollDownButton } from '../src/select-scroll-down-button';
 import { RdxSelectScrollUpButton } from '../src/select-scroll-up-button';
 import { RdxSelectTrigger } from '../src/select-trigger';
 import { RdxSelectValue } from '../src/select-value';
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { LucideCheck, LucideChevronDown, LucideChevronUp } from '@lucide/angular';
 
 @Component({
     changeDetection: ChangeDetectionStrategy.Eager,
@@ -19076,7 +19076,7 @@ import { RdxSelectValue } from '../src/select-value';
                 <svg lucideChevronDown size="16" />
             </button>
 
-            <div class="z-[100]" *rdxSelectPortal [sideOffset]="5" align="start" rdxSelectPositioner>
+            <div *rdxSelectPortal class="z-[100]" align="start" rdxSelectPositioner [sideOffset]="5">
                 <div
                     class="border-border bg-popover text-popover-foreground max-h-[300px] min-w-40 overflow-hidden rounded-lg border shadow-md will-change-[opacity,transform]"
                     rdxSelectPopup
@@ -19093,8 +19093,8 @@ import { RdxSelectValue } from '../src/select-value';
                             @for (option of options; track option) {
                                 <div
                                     class="text-popover-foreground data-[disabled]:text-muted-foreground data-[highlighted]:bg-primary data-[highlighted]:text-primary-foreground relative flex h-7 cursor-default items-center rounded-sm pr-8 pl-6 text-sm leading-none outline-none select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50"
-                                    [value]="option"
                                     rdxSelectItem
+                                    [value]="option"
                                 >
                                     <span
                                         class="absolute left-0 inline-flex w-6 items-center justify-center"
@@ -19112,8 +19112,8 @@ import { RdxSelectValue } from '../src/select-value';
                             @for (vegetable of vegetables; track vegetable) {
                                 <div
                                     class="text-popover-foreground data-[disabled]:text-muted-foreground data-[highlighted]:bg-primary data-[highlighted]:text-primary-foreground relative flex h-7 cursor-default items-center rounded-sm pr-8 pl-6 text-sm leading-none outline-none select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50"
-                                    [value]="vegetable"
                                     rdxSelectItem
+                                    [value]="vegetable"
                                 >
                                     <span
                                         class="absolute left-0 inline-flex w-6 items-center justify-center"
@@ -19160,8 +19160,6 @@ The popup opens aligned to the selected item, mirroring native `<select>` behavi
 value is pre-selected so the alignment is immediately visible.
 
 ```typescript
-import { booleanAttribute, ChangeDetectionStrategy, Component, input, signal } from '@angular/core';
-import { LucideCheck, LucideChevronDown } from '@lucide/angular';
 import { RdxSelectGroup } from '../src/select-group';
 import { RdxSelectGroupLabel } from '../src/select-group-label';
 import { RdxSelectItem } from '../src/select-item';
@@ -19175,6 +19173,8 @@ import { RdxSelectPortal } from '../src/select-portal';
 import { RdxSelectRoot } from '../src/select-root';
 import { RdxSelectTrigger } from '../src/select-trigger';
 import { RdxSelectValue } from '../src/select-value';
+import { booleanAttribute, ChangeDetectionStrategy, Component, input, signal } from '@angular/core';
+import { LucideCheck, LucideChevronDown } from '@lucide/angular';
 
 @Component({
     changeDetection: ChangeDetectionStrategy.Eager,
@@ -19197,7 +19197,7 @@ import { RdxSelectValue } from '../src/select-value';
         RdxSelectItemIndicator
     ],
     template: `
-        <ng-container [value]="fruit()" [modal]="modal()" rdxSelectRoot>
+        <ng-container rdxSelectRoot [value]="fruit()" [modal]="modal()">
             <button
                 class="border-border bg-background text-foreground data-[placeholder]:text-muted-foreground hover:bg-muted focus-visible:ring-ring focus-visible:ring-offset-background inline-flex h-9 min-w-40 items-center justify-between gap-2 rounded-md border px-3 text-sm shadow-sm outline-none focus-visible:ring-2 focus-visible:ring-offset-2"
                 aria-label="Customise options"
@@ -19221,8 +19221,8 @@ import { RdxSelectValue } from '../src/select-value';
                                 @for (option of options; track option) {
                                     <div
                                         class="text-popover-foreground data-[disabled]:text-muted-foreground data-[highlighted]:bg-primary data-[highlighted]:text-primary-foreground relative flex h-7 cursor-default items-center rounded-sm pr-8 pl-6 text-sm leading-none outline-none select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50"
-                                        [value]="option"
                                         rdxSelectItem
+                                        [value]="option"
                                     >
                                         <span
                                             class="absolute left-0 inline-flex w-6 items-center justify-center"
@@ -19242,8 +19242,8 @@ import { RdxSelectValue } from '../src/select-value';
                                 @for (vegetable of vegetables; track vegetable) {
                                     <div
                                         class="text-popover-foreground data-[disabled]:text-muted-foreground data-[highlighted]:bg-primary data-[highlighted]:text-primary-foreground relative flex h-7 cursor-default items-center rounded-sm pr-8 pl-6 text-sm leading-none outline-none select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50"
-                                        [value]="vegetable"
                                         rdxSelectItem
+                                        [value]="vegetable"
                                     >
                                         <span
                                             class="absolute left-0 inline-flex w-6 items-center justify-center"
@@ -19278,8 +19278,6 @@ export class SelectAlignedPosition {
 Item-aligned positioning combined with a long list that overflows, showing both scroll buttons.
 
 ```typescript
-import { ChangeDetectionStrategy, Component, signal } from '@angular/core';
-import { LucideCheck, LucideChevronDown, LucideChevronUp } from '@lucide/angular';
 import { RdxSelectGroup } from '../src/select-group';
 import { RdxSelectGroupLabel } from '../src/select-group-label';
 import { RdxSelectItem } from '../src/select-item';
@@ -19295,6 +19293,8 @@ import { RdxSelectScrollDownButton } from '../src/select-scroll-down-button';
 import { RdxSelectScrollUpButton } from '../src/select-scroll-up-button';
 import { RdxSelectTrigger } from '../src/select-trigger';
 import { RdxSelectValue } from '../src/select-value';
+import { ChangeDetectionStrategy, Component, signal } from '@angular/core';
+import { LucideCheck, LucideChevronDown, LucideChevronUp } from '@lucide/angular';
 
 @Component({
     changeDetection: ChangeDetectionStrategy.Eager,
@@ -19320,7 +19320,7 @@ import { RdxSelectValue } from '../src/select-value';
         RdxSelectScrollUpButton
     ],
     template: `
-        <ng-container [value]="fruit()" rdxSelectRoot>
+        <ng-container rdxSelectRoot [value]="fruit()">
             <button
                 class="border-border bg-background text-foreground data-[placeholder]:text-muted-foreground hover:bg-muted focus-visible:ring-ring focus-visible:ring-offset-background inline-flex h-9 min-w-40 items-center justify-between gap-2 rounded-md border px-3 text-sm shadow-sm outline-none focus-visible:ring-2 focus-visible:ring-offset-2"
                 aria-label="Customise options"
@@ -19350,8 +19350,8 @@ import { RdxSelectValue } from '../src/select-value';
                                 @for (option of options; track option) {
                                     <div
                                         class="text-popover-foreground data-[disabled]:text-muted-foreground data-[highlighted]:bg-primary data-[highlighted]:text-primary-foreground relative flex h-7 cursor-default items-center rounded-sm pr-8 pl-6 text-sm leading-none outline-none select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50"
-                                        [value]="option"
                                         rdxSelectItem
+                                        [value]="option"
                                     >
                                         <span
                                             class="absolute left-0 inline-flex w-6 items-center justify-center"
@@ -19371,8 +19371,8 @@ import { RdxSelectValue } from '../src/select-value';
                                 @for (vegetable of vegetables; track vegetable) {
                                     <div
                                         class="text-popover-foreground data-[disabled]:text-muted-foreground data-[highlighted]:bg-primary data-[highlighted]:text-primary-foreground relative flex h-7 cursor-default items-center rounded-sm pr-8 pl-6 text-sm leading-none outline-none select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50"
-                                        [value]="vegetable"
                                         rdxSelectItem
+                                        [value]="vegetable"
                                     >
                                         <span
                                             class="absolute left-0 inline-flex w-6 items-center justify-center"
@@ -19675,6 +19675,9 @@ The default orientation is horizontal.
 #### Bridge Angular [Signal Forms](https://angular.dev/guide/forms/signals) into headless `Field` and `Form`.
 
 ```typescript
+import { cn, demoButton, demoInput } from '../../storybook/styles';
+import { RdxSignalField } from '../src/signal-field';
+import { RdxSignalForm } from '../src/signal-form';
 import { ChangeDetectionStrategy, Component, signal } from '@angular/core';
 import { email as emailFormat, form, FormField, required } from '@angular/forms/signals';
 import {
@@ -19685,9 +19688,6 @@ import {
     RdxFieldRoot
 } from '@radix-ng/primitives/field';
 import { RdxFormRoot, RdxFormSubmitEvent } from '@radix-ng/primitives/form';
-import { cn, demoButton, demoInput } from '../../storybook/styles';
-import { RdxSignalField } from '../src/signal-field';
-import { RdxSignalForm } from '../src/signal-form';
 
 @Component({
     changeDetection: ChangeDetectionStrategy.Eager,
@@ -19706,22 +19706,22 @@ import { RdxSignalForm } from '../src/signal-form';
     template: `
         <form
             class="flex w-80 flex-col gap-3"
+            rdxFormRoot
             [rdxSignalForm]="loginForm"
             (onFormSubmit)="onSubmit($event)"
-            rdxFormRoot
         >
             <!--
               No manual [invalid]/[touched]/[dirty]/[disabled] on rdxFieldRoot — rdxSignalField drives them
               from the Signal Forms field, and the field expression is bound exactly once (on [formField]).
             -->
             <div class="flex flex-col gap-2" rdxFieldRoot required>
-                <label [class]="labelClass" rdxFieldLabel>Email</label>
-                <input [class]="inputClass" [formField]="email" rdxFieldControl rdxSignalField type="email" />
-                <p [class]="descriptionClass" rdxFieldDescription>Use the email connected to your account.</p>
-                <p #err="rdxFieldError" [class]="errorClass" rdxFieldError>{{ err.messages().join(' ') }}</p>
+                <label rdxFieldLabel [class]="labelClass">Email</label>
+                <input rdxFieldControl rdxSignalField type="email" [class]="inputClass" [formField]="email" />
+                <p rdxFieldDescription [class]="descriptionClass">Use the email connected to your account.</p>
+                <p #err="rdxFieldError" rdxFieldError [class]="errorClass">{{ err.messages().join(' ') }}</p>
             </div>
 
-            <button [class]="buttonClass" type="submit">Submit</button>
+            <button type="submit" [class]="buttonClass">Submit</button>
         </form>
     `
 })
@@ -19797,6 +19797,9 @@ The `rdxFieldRoot` carries no manual `[invalid]`/`[touched]`/`[dirty]` — `rdxS
 the field, including the validation message shown by `rdxFieldError`.
 
 ```typescript
+import { cn, demoButton, demoInput } from '../../storybook/styles';
+import { RdxSignalField } from '../src/signal-field';
+import { RdxSignalForm } from '../src/signal-form';
 import { ChangeDetectionStrategy, Component, signal } from '@angular/core';
 import { email as emailFormat, form, FormField, required } from '@angular/forms/signals';
 import {
@@ -19807,9 +19810,6 @@ import {
     RdxFieldRoot
 } from '@radix-ng/primitives/field';
 import { RdxFormRoot, RdxFormSubmitEvent } from '@radix-ng/primitives/form';
-import { cn, demoButton, demoInput } from '../../storybook/styles';
-import { RdxSignalField } from '../src/signal-field';
-import { RdxSignalForm } from '../src/signal-form';
 
 @Component({
     changeDetection: ChangeDetectionStrategy.Eager,
@@ -19828,22 +19828,22 @@ import { RdxSignalForm } from '../src/signal-form';
     template: `
         <form
             class="flex w-80 flex-col gap-3"
+            rdxFormRoot
             [rdxSignalForm]="loginForm"
             (onFormSubmit)="onSubmit($event)"
-            rdxFormRoot
         >
             <!--
               No manual [invalid]/[touched]/[dirty]/[disabled] on rdxFieldRoot — rdxSignalField drives them
               from the Signal Forms field, and the field expression is bound exactly once (on [formField]).
             -->
             <div class="flex flex-col gap-2" rdxFieldRoot required>
-                <label [class]="labelClass" rdxFieldLabel>Email</label>
-                <input [class]="inputClass" [formField]="email" rdxFieldControl rdxSignalField type="email" />
-                <p [class]="descriptionClass" rdxFieldDescription>Use the email connected to your account.</p>
-                <p #err="rdxFieldError" [class]="errorClass" rdxFieldError>{{ err.messages().join(' ') }}</p>
+                <label rdxFieldLabel [class]="labelClass">Email</label>
+                <input rdxFieldControl rdxSignalField type="email" [class]="inputClass" [formField]="email" />
+                <p rdxFieldDescription [class]="descriptionClass">Use the email connected to your account.</p>
+                <p #err="rdxFieldError" rdxFieldError [class]="errorClass">{{ err.messages().join(' ') }}</p>
             </div>
 
-            <button [class]="buttonClass" type="submit">Submit</button>
+            <button type="submit" [class]="buttonClass">Submit</button>
         </form>
     `
 })
@@ -19970,7 +19970,7 @@ import {
     selector: 'slider-default-example',
     imports: [RdxSliderRoot, RdxSliderControl, RdxSliderTrack, RdxSliderIndicator, RdxSliderThumb, RdxSliderThumbInput],
     template: `
-        <div class="relative w-56 select-none" [value]="45" [step]="5" rdxSliderRoot>
+        <div class="relative w-56 select-none" rdxSliderRoot [value]="45" [step]="5">
             <div class="flex h-5 w-full touch-none items-center" rdxSliderControl>
                 <div class="bg-muted relative h-1 w-full rounded-full" rdxSliderTrack>
                     <div class="bg-primary h-full rounded-full" rdxSliderIndicator></div>
@@ -20095,12 +20095,12 @@ import {
         <div class="grid w-80 gap-4">
             <div
                 class="relative w-full select-none"
+                rdxSliderRoot
+                name="volume"
                 [value]="value()"
                 [step]="5"
                 (onValueChange)="onValueChange($event)"
                 (onValueCommitted)="onValueCommitted($event)"
-                rdxSliderRoot
-                name="volume"
             >
                 <div class="flex h-5 w-full touch-none items-center" rdxSliderControl>
                     <div class="bg-muted relative h-1 w-full rounded-full" rdxSliderTrack>
@@ -20118,9 +20118,9 @@ import {
             <label class="text-foreground flex items-center gap-2 text-sm">
                 <input
                     class="accent-primary size-4"
+                    type="checkbox"
                     [checked]="locked()"
                     (change)="locked.set($any($event.target).checked)"
-                    type="checkbox"
                 />
                 Cancel value changes
             </label>
@@ -20211,7 +20211,7 @@ import {
         <div class="grid w-72 gap-6">
             <div class="grid gap-2">
                 <span class="text-foreground text-sm font-medium">Center</span>
-                <div class="relative px-2 select-none" [value]="50" thumbAlignment="center" rdxSliderRoot>
+                <div class="relative px-2 select-none" thumbAlignment="center" rdxSliderRoot [value]="50">
                     <div class="flex h-6 w-full touch-none items-center" rdxSliderControl>
                         <div class="bg-muted relative h-1 w-full rounded-full" rdxSliderTrack>
                             <div class="bg-primary h-full rounded-full" rdxSliderIndicator></div>
@@ -20228,7 +20228,7 @@ import {
 
             <div class="grid gap-2">
                 <span class="text-foreground text-sm font-medium">Edge</span>
-                <div class="relative px-2 select-none" [value]="50" thumbAlignment="edge" rdxSliderRoot>
+                <div class="relative px-2 select-none" thumbAlignment="edge" rdxSliderRoot [value]="50">
                     <div class="flex h-6 w-full touch-none items-center" rdxSliderControl>
                         <div class="bg-muted relative h-1 w-full rounded-full" rdxSliderTrack>
                             <div class="bg-primary h-full rounded-full" rdxSliderIndicator></div>
@@ -20245,7 +20245,7 @@ import {
 
             <div class="grid gap-2">
                 <span class="text-foreground text-sm font-medium">Edge client only</span>
-                <div class="relative px-2 select-none" [value]="50" thumbAlignment="edge-client-only" rdxSliderRoot>
+                <div class="relative px-2 select-none" thumbAlignment="edge-client-only" rdxSliderRoot [value]="50">
                     <div class="flex h-6 w-full touch-none items-center" rdxSliderControl>
                         <div class="bg-muted relative h-1 w-full rounded-full" rdxSliderTrack>
                             <div class="bg-primary h-full rounded-full" rdxSliderIndicator></div>
@@ -20289,21 +20289,21 @@ import {
     selector: 'slider-range-example',
     imports: [RdxSliderRoot, RdxSliderControl, RdxSliderTrack, RdxSliderIndicator, RdxSliderThumb, RdxSliderThumbInput],
     template: `
-        <div class="relative w-56 select-none" [value]="[25, 75]" [minStepsBetweenValues]="1" rdxSliderRoot>
+        <div class="relative w-56 select-none" rdxSliderRoot [value]="[25, 75]" [minStepsBetweenValues]="1">
             <div class="flex h-5 w-full touch-none items-center" rdxSliderControl>
                 <div class="bg-muted relative h-1 w-full rounded-full" rdxSliderTrack>
                     <div class="bg-primary h-full rounded-full" rdxSliderIndicator></div>
                     <div
                         class="border-border bg-background focus-within:ring-ring block size-5 rounded-full border shadow-sm focus-within:ring-2"
-                        [index]="0"
                         rdxSliderThumb
+                        [index]="0"
                     >
                         <input rdxSliderThumbInput aria-label="Minimum" />
                     </div>
                     <div
                         class="border-border bg-background focus-within:ring-ring block size-5 rounded-full border shadow-sm focus-within:ring-2"
-                        [index]="1"
                         rdxSliderThumb
+                        [index]="1"
                     >
                         <input rdxSliderThumbInput aria-label="Maximum" />
                     </div>
@@ -20336,7 +20336,7 @@ import {
     selector: 'slider-vertical-example',
     imports: [RdxSliderRoot, RdxSliderControl, RdxSliderTrack, RdxSliderIndicator, RdxSliderThumb, RdxSliderThumbInput],
     template: `
-        <div class="relative h-56 w-5 select-none" [value]="45" [step]="5" rdxSliderRoot orientation="vertical">
+        <div class="relative h-56 w-5 select-none" rdxSliderRoot orientation="vertical" [value]="45" [step]="5">
             <div class="flex h-full w-5 touch-none justify-center" rdxSliderControl>
                 <div class="bg-muted relative h-full w-1 rounded-full" rdxSliderTrack>
                     <div class="bg-primary w-full rounded-full" rdxSliderIndicator></div>
@@ -20385,7 +20385,7 @@ import {
         RdxSliderValue
     ],
     template: `
-        <div class="relative w-56 select-none" [value]="42" [format]="format" rdxSliderRoot>
+        <div class="relative w-56 select-none" rdxSliderRoot [value]="42" [format]="format">
             <div class="text-foreground mb-2 flex items-center justify-between text-sm">
                 <span id="slider-value-label">Budget</span>
                 <output class="text-muted-foreground tabular-nums" rdxSliderValue></output>
@@ -20427,7 +20427,7 @@ import {
     selector: 'slider-disabled-example',
     imports: [RdxSliderRoot, RdxSliderControl, RdxSliderTrack, RdxSliderIndicator, RdxSliderThumb, RdxSliderThumbInput],
     template: `
-        <div class="relative w-56 select-none data-[disabled]:opacity-50" [value]="45" rdxSliderRoot disabled>
+        <div class="relative w-56 select-none data-[disabled]:opacity-50" rdxSliderRoot disabled [value]="45">
             <div class="flex h-5 w-full touch-none items-center" rdxSliderControl>
                 <div class="bg-muted relative h-1 w-full rounded-full" rdxSliderTrack>
                     <div class="bg-primary h-full rounded-full" rdxSliderIndicator></div>
@@ -20474,7 +20474,7 @@ import {
     template: `
         <div class="flex flex-col gap-3">
             <label class="text-foreground text-sm" id="volume-label">Volume</label>
-            <div class="relative w-56 select-none" [formControl]="volume" [step]="5" rdxSliderRoot>
+            <div class="relative w-56 select-none" rdxSliderRoot [formControl]="volume" [step]="5">
                 <div class="flex h-5 w-full touch-none items-center" rdxSliderControl>
                     <div class="bg-muted relative h-1 w-full rounded-full" rdxSliderTrack>
                         <div class="bg-primary h-full rounded-full" rdxSliderIndicator></div>
@@ -20823,8 +20823,8 @@ import { RdxSwitchInput, RdxSwitchRoot, RdxSwitchThumb } from '@radix-ng/primiti
             <button
                 class="bg-muted data-[checked]:bg-primary focus-visible:ring-ring relative inline-flex h-6 w-11 shrink-0 cursor-pointer items-center rounded-full border-0 p-0 shadow-sm transition-colors outline-none focus-visible:ring-2 disabled:cursor-not-allowed disabled:opacity-50"
                 id="airplane-mode-model"
-                [(checked)]="checked"
                 rdxSwitchRoot
+                [(checked)]="checked"
             >
                 <input rdxSwitchInput />
                 <span
@@ -20962,8 +20962,8 @@ import { RdxSwitchInput, RdxSwitchRoot, RdxSwitchThumb } from '@radix-ng/primiti
         <p class="mt-3">
             <button
                 class="border-border bg-background text-foreground focus-visible:ring-ring inline-flex h-9 items-center rounded-md border px-3 text-sm font-medium shadow-sm outline-none focus-visible:ring-2"
-                (click)="setValue()"
                 type="button"
+                (click)="setValue()"
             >
                 Set preset value
             </button>
@@ -21399,16 +21399,16 @@ import { RdxTabsList, RdxTabsPanel, RdxTabsPanelPresence, RdxTabsRoot, RdxTabsTa
             <div class="grid">
                 <div class="group col-start-1 row-start-1" rdxTabsPanel value="account">
                     <div
-                        class="bg-background text-foreground animate-tabs-panel-in group-data-[hidden]:animate-tabs-panel-out p-6 text-sm leading-6 outline-none"
                         *rdxTabsPanelPresence
+                        class="bg-background text-foreground animate-tabs-panel-in group-data-[hidden]:animate-tabs-panel-out p-6 text-sm leading-6 outline-none"
                     >
                         Make changes to your account here. Click save when you're done.
                     </div>
                 </div>
                 <div class="group col-start-1 row-start-1" rdxTabsPanel value="password">
                     <div
-                        class="bg-background text-foreground animate-tabs-panel-in group-data-[hidden]:animate-tabs-panel-out p-6 text-sm leading-6 outline-none"
                         *rdxTabsPanelPresence
+                        class="bg-background text-foreground animate-tabs-panel-in group-data-[hidden]:animate-tabs-panel-out p-6 text-sm leading-6 outline-none"
                     >
                         Change your password here. After saving, you'll be logged out.
                     </div>
@@ -21528,27 +21528,27 @@ import { RdxVisuallyHiddenInputDirective } from '@radix-ng/primitives/visually-h
         <div class="flex flex-col gap-1.5">
             <label class="text-foreground text-sm font-medium" id="time-default-label">Time</label>
             <div
-                class="border-border bg-background text-foreground focus-within:ring-ring data-[invalid]:border-destructive inline-flex w-fit items-center rounded-md border px-3 py-2 text-sm shadow-sm select-none focus-within:ring-2 data-[disabled]:cursor-not-allowed data-[disabled]:opacity-50"
                 #root="rdxTimeFieldRoot"
+                class="border-border bg-background text-foreground focus-within:ring-ring data-[invalid]:border-destructive inline-flex w-fit items-center rounded-md border px-3 py-2 text-sm shadow-sm select-none focus-within:ring-2 data-[disabled]:cursor-not-allowed data-[disabled]:opacity-50"
                 aria-labelledby="time-default-label"
                 rdxTimeFieldRoot
             >
                 @for (item of root.segmentContents(); track $index) {
                     @if (item.part === 'literal') {
-                        <span class="text-muted-foreground px-px" [part]="item.part" rdxTimeFieldInput>
+                        <span class="text-muted-foreground px-px" rdxTimeFieldInput [part]="item.part">
                             {{ item.value }}
                         </span>
                     } @else {
                         <div
                             class="data-[placeholder]:text-muted-foreground hover:bg-muted focus:bg-primary focus:text-primary-foreground rounded px-0.5 tabular-nums outline-none"
-                            [part]="item.part"
                             rdxTimeFieldInput
+                            [part]="item.part"
                         >
                             {{ item.value }}
                         </div>
                     }
                 }
-                <input [value]="root.value()" rdxVisuallyHiddenInput feature="focusable" />
+                <input rdxVisuallyHiddenInput feature="focusable" [value]="root.value()" />
             </div>
         </div>
     `
@@ -21631,27 +21631,27 @@ import { RdxVisuallyHiddenInputDirective } from '@radix-ng/primitives/visually-h
         <div class="flex flex-col gap-1.5">
             <label class="text-foreground text-sm font-medium" id="time-default-label">Time</label>
             <div
-                class="border-border bg-background text-foreground focus-within:ring-ring data-[invalid]:border-destructive inline-flex w-fit items-center rounded-md border px-3 py-2 text-sm shadow-sm select-none focus-within:ring-2 data-[disabled]:cursor-not-allowed data-[disabled]:opacity-50"
                 #root="rdxTimeFieldRoot"
+                class="border-border bg-background text-foreground focus-within:ring-ring data-[invalid]:border-destructive inline-flex w-fit items-center rounded-md border px-3 py-2 text-sm shadow-sm select-none focus-within:ring-2 data-[disabled]:cursor-not-allowed data-[disabled]:opacity-50"
                 aria-labelledby="time-default-label"
                 rdxTimeFieldRoot
             >
                 @for (item of root.segmentContents(); track $index) {
                     @if (item.part === 'literal') {
-                        <span class="text-muted-foreground px-px" [part]="item.part" rdxTimeFieldInput>
+                        <span class="text-muted-foreground px-px" rdxTimeFieldInput [part]="item.part">
                             {{ item.value }}
                         </span>
                     } @else {
                         <div
                             class="data-[placeholder]:text-muted-foreground hover:bg-muted focus:bg-primary focus:text-primary-foreground rounded px-0.5 tabular-nums outline-none"
-                            [part]="item.part"
                             rdxTimeFieldInput
+                            [part]="item.part"
                         >
                             {{ item.value }}
                         </div>
                     }
                 }
-                <input [value]="root.value()" rdxVisuallyHiddenInput feature="focusable" />
+                <input rdxVisuallyHiddenInput feature="focusable" [value]="root.value()" />
             </div>
         </div>
     `
@@ -21677,56 +21677,56 @@ import { RdxVisuallyHiddenInputDirective } from '@radix-ng/primitives/visually-h
             <div class="flex flex-col gap-1.5">
                 <label class="text-foreground text-sm font-medium" id="time-12h-label">12-hour</label>
                 <div
-                    class="border-border bg-background text-foreground focus-within:ring-ring inline-flex w-fit items-center rounded-md border px-3 py-2 text-sm shadow-sm select-none focus-within:ring-2"
                     #h12="rdxTimeFieldRoot"
-                    [hourCycle]="12"
+                    class="border-border bg-background text-foreground focus-within:ring-ring inline-flex w-fit items-center rounded-md border px-3 py-2 text-sm shadow-sm select-none focus-within:ring-2"
                     aria-labelledby="time-12h-label"
                     rdxTimeFieldRoot
+                    [hourCycle]="12"
                 >
                     @for (item of h12.segmentContents(); track $index) {
                         @if (item.part === 'literal') {
-                            <span class="text-muted-foreground px-px" [part]="item.part" rdxTimeFieldInput>
+                            <span class="text-muted-foreground px-px" rdxTimeFieldInput [part]="item.part">
                                 {{ item.value }}
                             </span>
                         } @else {
                             <div
                                 class="data-[placeholder]:text-muted-foreground hover:bg-muted focus:bg-primary focus:text-primary-foreground rounded px-0.5 tabular-nums outline-none"
-                                [part]="item.part"
                                 rdxTimeFieldInput
+                                [part]="item.part"
                             >
                                 {{ item.value }}
                             </div>
                         }
                     }
-                    <input [value]="h12.value()" rdxVisuallyHiddenInput feature="focusable" />
+                    <input rdxVisuallyHiddenInput feature="focusable" [value]="h12.value()" />
                 </div>
             </div>
 
             <div class="flex flex-col gap-1.5">
                 <label class="text-foreground text-sm font-medium" id="time-24h-label">24-hour</label>
                 <div
-                    class="border-border bg-background text-foreground focus-within:ring-ring inline-flex w-fit items-center rounded-md border px-3 py-2 text-sm shadow-sm select-none focus-within:ring-2"
                     #h24="rdxTimeFieldRoot"
-                    [hourCycle]="24"
+                    class="border-border bg-background text-foreground focus-within:ring-ring inline-flex w-fit items-center rounded-md border px-3 py-2 text-sm shadow-sm select-none focus-within:ring-2"
                     aria-labelledby="time-24h-label"
                     rdxTimeFieldRoot
+                    [hourCycle]="24"
                 >
                     @for (item of h24.segmentContents(); track $index) {
                         @if (item.part === 'literal') {
-                            <span class="text-muted-foreground px-px" [part]="item.part" rdxTimeFieldInput>
+                            <span class="text-muted-foreground px-px" rdxTimeFieldInput [part]="item.part">
                                 {{ item.value }}
                             </span>
                         } @else {
                             <div
                                 class="data-[placeholder]:text-muted-foreground hover:bg-muted focus:bg-primary focus:text-primary-foreground rounded px-0.5 tabular-nums outline-none"
-                                [part]="item.part"
                                 rdxTimeFieldInput
+                                [part]="item.part"
                             >
                                 {{ item.value }}
                             </div>
                         }
                     }
-                    <input [value]="h24.value()" rdxVisuallyHiddenInput feature="focusable" />
+                    <input rdxVisuallyHiddenInput feature="focusable" [value]="h24.value()" />
                 </div>
             </div>
         </div>
@@ -21757,28 +21757,28 @@ import { RdxVisuallyHiddenInputDirective } from '@radix-ng/primitives/visually-h
                         {{ granularity }}
                     </label>
                     <div
-                        class="border-border bg-background text-foreground focus-within:ring-ring inline-flex w-fit items-center rounded-md border px-3 py-2 text-sm shadow-sm select-none focus-within:ring-2"
                         #root="rdxTimeFieldRoot"
+                        class="border-border bg-background text-foreground focus-within:ring-ring inline-flex w-fit items-center rounded-md border px-3 py-2 text-sm shadow-sm select-none focus-within:ring-2"
+                        rdxTimeFieldRoot
                         [granularity]="granularity"
                         [attr.aria-labelledby]="granularity + '-label'"
-                        rdxTimeFieldRoot
                     >
                         @for (item of root.segmentContents(); track $index) {
                             @if (item.part === 'literal') {
-                                <span class="text-muted-foreground px-px" [part]="item.part" rdxTimeFieldInput>
+                                <span class="text-muted-foreground px-px" rdxTimeFieldInput [part]="item.part">
                                     {{ item.value }}
                                 </span>
                             } @else {
                                 <div
                                     class="data-[placeholder]:text-muted-foreground hover:bg-muted focus:bg-primary focus:text-primary-foreground rounded px-0.5 tabular-nums outline-none"
-                                    [part]="item.part"
                                     rdxTimeFieldInput
+                                    [part]="item.part"
                                 >
                                     {{ item.value }}
                                 </div>
                             }
                         }
-                        <input [value]="root.value()" rdxVisuallyHiddenInput feature="focusable" />
+                        <input rdxVisuallyHiddenInput feature="focusable" [value]="root.value()" />
                     </div>
                 </div>
             }
@@ -21808,29 +21808,29 @@ import { RdxVisuallyHiddenInputDirective } from '@radix-ng/primitives/visually-h
         <div class="flex flex-col gap-1.5">
             <label class="text-foreground text-sm font-medium" id="time-disabled-label">Time</label>
             <div
-                class="border-border bg-background text-foreground inline-flex w-fit items-center rounded-md border px-3 py-2 text-sm shadow-sm select-none data-[disabled]:cursor-not-allowed data-[disabled]:opacity-50"
                 #root="rdxTimeFieldRoot"
-                [value]="value"
+                class="border-border bg-background text-foreground inline-flex w-fit items-center rounded-md border px-3 py-2 text-sm shadow-sm select-none data-[disabled]:cursor-not-allowed data-[disabled]:opacity-50"
                 aria-labelledby="time-disabled-label"
                 disabled
                 rdxTimeFieldRoot
+                [value]="value"
             >
                 @for (item of root.segmentContents(); track $index) {
                     @if (item.part === 'literal') {
-                        <span class="text-muted-foreground px-px" [part]="item.part" rdxTimeFieldInput>
+                        <span class="text-muted-foreground px-px" rdxTimeFieldInput [part]="item.part">
                             {{ item.value }}
                         </span>
                     } @else {
                         <div
                             class="data-[placeholder]:text-muted-foreground rounded px-0.5 tabular-nums outline-none"
-                            [part]="item.part"
                             rdxTimeFieldInput
+                            [part]="item.part"
                         >
                             {{ item.value }}
                         </div>
                     }
                 }
-                <input [value]="root.value()" rdxVisuallyHiddenInput feature="focusable" />
+                <input rdxVisuallyHiddenInput feature="focusable" [value]="root.value()" />
             </div>
         </div>
     `
@@ -21858,30 +21858,30 @@ import { RdxVisuallyHiddenInputDirective } from '@radix-ng/primitives/visually-h
         <div class="flex flex-col gap-1.5">
             <label class="text-foreground text-sm font-medium" id="time-readonly-label">Time</label>
             <div
-                class="border-border bg-muted text-foreground focus-within:ring-ring inline-flex w-fit items-center rounded-md border px-3 py-2 text-sm shadow-sm select-none focus-within:ring-2"
                 #root="rdxTimeFieldRoot"
-                [value]="value"
+                class="border-border bg-muted text-foreground focus-within:ring-ring inline-flex w-fit items-center rounded-md border px-3 py-2 text-sm shadow-sm select-none focus-within:ring-2"
                 aria-labelledby="time-readonly-label"
                 granularity="second"
                 readonly
                 rdxTimeFieldRoot
+                [value]="value"
             >
                 @for (item of root.segmentContents(); track $index) {
                     @if (item.part === 'literal') {
-                        <span class="text-muted-foreground px-px" [part]="item.part" rdxTimeFieldInput>
+                        <span class="text-muted-foreground px-px" rdxTimeFieldInput [part]="item.part">
                             {{ item.value }}
                         </span>
                     } @else {
                         <div
                             class="data-[placeholder]:text-muted-foreground focus:bg-primary focus:text-primary-foreground rounded px-0.5 tabular-nums outline-none"
-                            [part]="item.part"
                             rdxTimeFieldInput
+                            [part]="item.part"
                         >
                             {{ item.value }}
                         </div>
                     }
                 }
-                <input [value]="root.value()" rdxVisuallyHiddenInput feature="focusable" />
+                <input rdxVisuallyHiddenInput feature="focusable" [value]="root.value()" />
             </div>
         </div>
     `
@@ -21911,30 +21911,30 @@ import { RdxVisuallyHiddenInputDirective } from '@radix-ng/primitives/visually-h
                 Office hours (09:00–17:00)
             </label>
             <div
-                class="border-border bg-background text-foreground focus-within:ring-ring data-[invalid]:border-destructive data-[invalid]:focus-within:ring-destructive inline-flex w-fit items-center rounded-md border px-3 py-2 text-sm shadow-sm select-none focus-within:ring-2"
                 #root="rdxTimeFieldRoot"
+                class="border-border bg-background text-foreground focus-within:ring-ring data-[invalid]:border-destructive data-[invalid]:focus-within:ring-destructive inline-flex w-fit items-center rounded-md border px-3 py-2 text-sm shadow-sm select-none focus-within:ring-2"
+                aria-labelledby="time-validation-label"
+                rdxTimeFieldRoot
                 [value]="value"
                 [minValue]="minValue"
                 [maxValue]="maxValue"
-                aria-labelledby="time-validation-label"
-                rdxTimeFieldRoot
             >
                 @for (item of root.segmentContents(); track $index) {
                     @if (item.part === 'literal') {
-                        <span class="text-muted-foreground px-px" [part]="item.part" rdxTimeFieldInput>
+                        <span class="text-muted-foreground px-px" rdxTimeFieldInput [part]="item.part">
                             {{ item.value }}
                         </span>
                     } @else {
                         <div
                             class="data-[placeholder]:text-muted-foreground data-[invalid]:text-destructive hover:bg-muted focus:bg-primary focus:text-primary-foreground rounded px-0.5 tabular-nums outline-none"
-                            [part]="item.part"
                             rdxTimeFieldInput
+                            [part]="item.part"
                         >
                             {{ item.value }}
                         </div>
                     }
                 }
-                <input [value]="root.value()" rdxVisuallyHiddenInput feature="focusable" />
+                <input rdxVisuallyHiddenInput feature="focusable" [value]="root.value()" />
             </div>
             @if (root.isInvalid()) {
                 <p class="text-destructive text-xs">Please pick a time between 09:00 and 17:00.</p>
@@ -21974,29 +21974,29 @@ interface LocaleExample {
                 <div class="flex flex-col gap-1.5">
                     <label class="text-foreground text-sm font-medium" [id]="example.id">{{ example.label }}</label>
                     <div
-                        class="border-border bg-background text-foreground focus-within:ring-ring inline-flex w-fit items-center rounded-md border px-3 py-2 text-sm shadow-sm select-none focus-within:ring-2"
                         #root="rdxTimeFieldRoot"
-                        [locale]="example.locale"
-                        [attr.aria-labelledby]="example.id"
+                        class="border-border bg-background text-foreground focus-within:ring-ring inline-flex w-fit items-center rounded-md border px-3 py-2 text-sm shadow-sm select-none focus-within:ring-2"
                         granularity="second"
                         rdxTimeFieldRoot
+                        [locale]="example.locale"
+                        [attr.aria-labelledby]="example.id"
                     >
                         @for (item of root.segmentContents(); track $index) {
                             @if (item.part === 'literal') {
-                                <span class="text-muted-foreground px-px" [part]="item.part" rdxTimeFieldInput>
+                                <span class="text-muted-foreground px-px" rdxTimeFieldInput [part]="item.part">
                                     {{ item.value }}
                                 </span>
                             } @else {
                                 <div
                                     class="data-[placeholder]:text-muted-foreground hover:bg-muted focus:bg-primary focus:text-primary-foreground rounded px-0.5 tabular-nums outline-none"
-                                    [part]="item.part"
                                     rdxTimeFieldInput
+                                    [part]="item.part"
                                 >
                                     {{ item.value }}
                                 </div>
                             }
                         }
-                        <input [value]="root.value()" rdxVisuallyHiddenInput feature="focusable" />
+                        <input rdxVisuallyHiddenInput feature="focusable" [value]="root.value()" />
                     </div>
                 </div>
             }
@@ -22047,9 +22047,9 @@ granularity, and validation state. Exposes `data-disabled`, `data-readonly`, and
 #### A succinct, low-priority message that appears temporarily, stacks, and can be swiped away.
 
 ```typescript
+import { cn, demoButton, demoToast } from '../../storybook/styles';
 import { ChangeDetectionStrategy, Component, inject } from '@angular/core';
 import { provideRdxToastManager, RdxToastManager, toastImports } from '@radix-ng/primitives/toast';
-import { cn, demoButton, demoToast } from '../../storybook/styles';
 
 @Component({
     changeDetection: ChangeDetectionStrategy.Eager,
@@ -22060,17 +22060,17 @@ import { cn, demoButton, demoToast } from '../../storybook/styles';
         <button [class]="cn(b.base, b.primary, b.size.md)" (click)="notify()">Show toast</button>
 
         <div rdxToastPortal>
-            <div [class]="t.viewport" rdxToastViewport>
+            <div rdxToastViewport [class]="t.viewport">
                 @for (toast of manager.toasts(); track toast.id) {
-                    <div [class]="t.root" [toast]="toast" rdxToastRoot>
-                        <div [class]="t.content" rdxToastContent>
+                    <div rdxToastRoot [class]="t.root" [toast]="toast">
+                        <div rdxToastContent [class]="t.content">
                             <div class="min-w-0 flex-1">
-                                <p [class]="t.title" rdxToastTitle>{{ toast.title }}</p>
+                                <p rdxToastTitle [class]="t.title">{{ toast.title }}</p>
                                 @if (toast.description) {
-                                    <p [class]="t.description" rdxToastDescription>{{ toast.description }}</p>
+                                    <p rdxToastDescription [class]="t.description">{{ toast.description }}</p>
                                 }
                             </div>
-                            <button [class]="t.close" aria-label="Dismiss" rdxToastClose>✕</button>
+                            <button aria-label="Dismiss" rdxToastClose [class]="t.close">✕</button>
                         </div>
                     </div>
                 }
@@ -22162,9 +22162,9 @@ An anchored toast is wrapped in `rdxToastPositioner` instead of joining the stac
 Push a single toast; it auto-dismisses after the timeout.
 
 ```typescript
+import { cn, demoButton, demoToast } from '../../storybook/styles';
 import { ChangeDetectionStrategy, Component, inject } from '@angular/core';
 import { provideRdxToastManager, RdxToastManager, toastImports } from '@radix-ng/primitives/toast';
-import { cn, demoButton, demoToast } from '../../storybook/styles';
 
 @Component({
     changeDetection: ChangeDetectionStrategy.Eager,
@@ -22175,17 +22175,17 @@ import { cn, demoButton, demoToast } from '../../storybook/styles';
         <button [class]="cn(b.base, b.primary, b.size.md)" (click)="notify()">Show toast</button>
 
         <div rdxToastPortal>
-            <div [class]="t.viewport" rdxToastViewport>
+            <div rdxToastViewport [class]="t.viewport">
                 @for (toast of manager.toasts(); track toast.id) {
-                    <div [class]="t.root" [toast]="toast" rdxToastRoot>
-                        <div [class]="t.content" rdxToastContent>
+                    <div rdxToastRoot [class]="t.root" [toast]="toast">
+                        <div rdxToastContent [class]="t.content">
                             <div class="min-w-0 flex-1">
-                                <p [class]="t.title" rdxToastTitle>{{ toast.title }}</p>
+                                <p rdxToastTitle [class]="t.title">{{ toast.title }}</p>
                                 @if (toast.description) {
-                                    <p [class]="t.description" rdxToastDescription>{{ toast.description }}</p>
+                                    <p rdxToastDescription [class]="t.description">{{ toast.description }}</p>
                                 }
                             </div>
-                            <button [class]="t.close" aria-label="Dismiss" rdxToastClose>✕</button>
+                            <button aria-label="Dismiss" rdxToastClose [class]="t.close">✕</button>
                         </div>
                     </div>
                 }
@@ -22217,9 +22217,9 @@ Add several toasts to see the collapsed stack, then hover or focus it to expand.
 while the stack is hovered or focused.
 
 ```typescript
+import { cn, demoButton, demoToast } from '../../storybook/styles';
 import { ChangeDetectionStrategy, Component, inject } from '@angular/core';
 import { provideRdxToastManager, RdxToastManager, toastImports } from '@radix-ng/primitives/toast';
-import { cn, demoButton, demoToast } from '../../storybook/styles';
 
 /**
  * Push several toasts to see the collapsed stack, then hover (or focus) the stack to expand it —
@@ -22238,15 +22238,15 @@ import { cn, demoButton, demoToast } from '../../storybook/styles';
         </div>
 
         <div rdxToastPortal>
-            <div [class]="t.viewport" rdxToastViewport>
+            <div rdxToastViewport [class]="t.viewport">
                 @for (toast of manager.toasts(); track toast.id) {
-                    <div [class]="t.root" [toast]="toast" rdxToastRoot>
-                        <div [class]="t.content" rdxToastContent>
+                    <div rdxToastRoot [class]="t.root" [toast]="toast">
+                        <div rdxToastContent [class]="t.content">
                             <div class="min-w-0 flex-1">
-                                <p [class]="t.title" rdxToastTitle>{{ toast.title }}</p>
-                                <p [class]="t.description" rdxToastDescription>{{ toast.description }}</p>
+                                <p rdxToastTitle [class]="t.title">{{ toast.title }}</p>
+                                <p rdxToastDescription [class]="t.description">{{ toast.description }}</p>
                             </div>
-                            <button [class]="t.close" aria-label="Dismiss" rdxToastClose>✕</button>
+                            <button aria-label="Dismiss" rdxToastClose [class]="t.close">✕</button>
                         </div>
                     </div>
                 }
@@ -22278,9 +22278,9 @@ export class ToastStackingExample {
 Drag a toast toward an allowed `swipeDirection` to dismiss it; release early to snap back.
 
 ```typescript
+import { cn, demoButton, demoToast } from '../../storybook/styles';
 import { ChangeDetectionStrategy, Component, inject } from '@angular/core';
 import { provideRdxToastManager, RdxToastManager, toastImports } from '@radix-ng/primitives/toast';
-import { cn, demoButton, demoToast } from '../../storybook/styles';
 
 /**
  * Toasts can be dismissed by swiping. `swipeDirection` lists the allowed directions; the gesture
@@ -22296,17 +22296,17 @@ import { cn, demoButton, demoToast } from '../../storybook/styles';
         <button [class]="cn(b.base, b.primary, b.size.md)" (click)="add()">Show swipeable toast</button>
 
         <div rdxToastPortal>
-            <div [class]="t.viewport" rdxToastViewport>
+            <div rdxToastViewport [class]="t.viewport">
                 @for (toast of manager.toasts(); track toast.id) {
-                    <div [class]="t.root" [toast]="toast" [swipeDirection]="['right', 'down']" rdxToastRoot>
-                        <div [class]="t.content" rdxToastContent>
+                    <div rdxToastRoot [class]="t.root" [toast]="toast" [swipeDirection]="['right', 'down']">
+                        <div rdxToastContent [class]="t.content">
                             <div class="min-w-0 flex-1">
-                                <p [class]="t.title" rdxToastTitle>Swipe me away</p>
-                                <p [class]="t.description" rdxToastDescription>
+                                <p rdxToastTitle [class]="t.title">Swipe me away</p>
+                                <p rdxToastDescription [class]="t.description">
                                     Drag right or down to dismiss. Release early to snap back.
                                 </p>
                             </div>
-                            <button [class]="t.close" aria-label="Dismiss" rdxToastClose>✕</button>
+                            <button aria-label="Dismiss" rdxToastClose [class]="t.close">✕</button>
                         </div>
                     </div>
                 }
@@ -22331,9 +22331,9 @@ export class ToastSwipeExample {
 Drive one toast through a promise: `loading`, then `success` or `error`.
 
 ```typescript
+import { cn, demoButton, demoToast } from '../../storybook/styles';
 import { ChangeDetectionStrategy, Component, inject } from '@angular/core';
 import { provideRdxToastManager, RdxToastManager, toastImports } from '@radix-ng/primitives/toast';
-import { cn, demoButton, demoToast } from '../../storybook/styles';
 
 /**
  * `manager.promise()` drives a single toast through a promise's lifecycle: it shows the `loading`
@@ -22352,18 +22352,18 @@ import { cn, demoButton, demoToast } from '../../storybook/styles';
         </div>
 
         <div rdxToastPortal>
-            <div [class]="t.viewport" rdxToastViewport>
+            <div rdxToastViewport [class]="t.viewport">
                 @for (toast of manager.toasts(); track toast.id) {
-                    <div [class]="t.root" [toast]="toast" rdxToastRoot>
-                        <div [class]="t.content" rdxToastContent>
+                    <div rdxToastRoot [class]="t.root" [toast]="toast">
+                        <div rdxToastContent [class]="t.content">
                             <div class="min-w-0 flex-1">
-                                <p [class]="t.title" rdxToastTitle>{{ toast.title }}</p>
+                                <p rdxToastTitle [class]="t.title">{{ toast.title }}</p>
                                 @if (toast.description) {
-                                    <p [class]="t.description" rdxToastDescription>{{ toast.description }}</p>
+                                    <p rdxToastDescription [class]="t.description">{{ toast.description }}</p>
                                 }
                             </div>
                             @if (!toast.loading) {
-                                <button [class]="t.close" aria-label="Dismiss" rdxToastClose>✕</button>
+                                <button aria-label="Dismiss" rdxToastClose [class]="t.close">✕</button>
                             }
                         </div>
                     </div>
@@ -22400,10 +22400,10 @@ export class ToastPromiseExample {
 Branch on a free-form `type` to render an icon, and raise `priority` to `high` for assertive errors.
 
 ```typescript
+import { cn, demoButton, demoToast } from '../../storybook/styles';
 import { ChangeDetectionStrategy, Component, inject } from '@angular/core';
 import { LucideCircleCheck, LucideCircleX, LucideInfo } from '@lucide/angular';
 import { provideRdxToastManager, RdxToastManager, toastImports } from '@radix-ng/primitives/toast';
-import { cn, demoButton, demoToast } from '../../storybook/styles';
 
 /**
  * `type` is a free-form category surfaced back on the toast object — branch on it in the template
@@ -22423,26 +22423,26 @@ import { cn, demoButton, demoToast } from '../../storybook/styles';
         </div>
 
         <div rdxToastPortal>
-            <div [class]="t.viewport" rdxToastViewport>
+            <div rdxToastViewport [class]="t.viewport">
                 @for (toast of manager.toasts(); track toast.id) {
-                    <div [class]="t.root" [toast]="toast" rdxToastRoot>
-                        <div [class]="t.content" rdxToastContent>
+                    <div rdxToastRoot [class]="t.root" [toast]="toast">
+                        <div rdxToastContent [class]="t.content">
                             @switch (toast.type) {
                                 @case ('success') {
-                                    <svg [class]="cn(t.icon, 'text-foreground')" lucideCircleCheck></svg>
+                                    <svg lucideCircleCheck [class]="cn(t.icon, 'text-foreground')"></svg>
                                 }
                                 @case ('error') {
-                                    <svg [class]="cn(t.icon, 'text-destructive')" lucideCircleX></svg>
+                                    <svg lucideCircleX [class]="cn(t.icon, 'text-destructive')"></svg>
                                 }
                                 @default {
-                                    <svg [class]="cn(t.icon, 'text-muted-foreground')" lucideInfo></svg>
+                                    <svg lucideInfo [class]="cn(t.icon, 'text-muted-foreground')"></svg>
                                 }
                             }
                             <div class="min-w-0 flex-1">
-                                <p [class]="t.title" rdxToastTitle>{{ toast.title }}</p>
-                                <p [class]="t.description" rdxToastDescription>{{ toast.description }}</p>
+                                <p rdxToastTitle [class]="t.title">{{ toast.title }}</p>
+                                <p rdxToastDescription [class]="t.description">{{ toast.description }}</p>
                             </div>
-                            <button [class]="t.close" aria-label="Dismiss" rdxToastClose>✕</button>
+                            <button aria-label="Dismiss" rdxToastClose [class]="t.close">✕</button>
                         </div>
                     </div>
                 }
@@ -22480,9 +22480,9 @@ export class ToastTypesExample {
 Placement is the consumer's CSS — here the viewport is anchored top-center and the stack grows down.
 
 ```typescript
+import { cn, demoButton, demoToast } from '../../storybook/styles';
 import { ChangeDetectionStrategy, Component, inject } from '@angular/core';
 import { provideRdxToastManager, RdxToastManager, toastImports } from '@radix-ng/primitives/toast';
-import { cn, demoButton, demoToast } from '../../storybook/styles';
 
 /**
  * Placement is entirely the consumer's CSS — the primitive only positions nothing. Here the viewport
@@ -22498,15 +22498,15 @@ import { cn, demoButton, demoToast } from '../../storybook/styles';
         <button [class]="cn(b.base, b.primary, b.size.md)" (click)="add()">Show toast (top)</button>
 
         <div rdxToastPortal>
-            <div [class]="t.viewportTop" rdxToastViewport>
+            <div rdxToastViewport [class]="t.viewportTop">
                 @for (toast of manager.toasts(); track toast.id) {
-                    <div [class]="t.rootTop" [toast]="toast" [swipeDirection]="['up']" rdxToastRoot>
-                        <div [class]="t.content" rdxToastContent>
+                    <div rdxToastRoot [class]="t.rootTop" [toast]="toast" [swipeDirection]="['up']">
+                        <div rdxToastContent [class]="t.content">
                             <div class="min-w-0 flex-1">
-                                <p [class]="t.title" rdxToastTitle>{{ toast.title }}</p>
-                                <p [class]="t.description" rdxToastDescription>{{ toast.description }}</p>
+                                <p rdxToastTitle [class]="t.title">{{ toast.title }}</p>
+                                <p rdxToastDescription [class]="t.description">{{ toast.description }}</p>
                             </div>
-                            <button [class]="t.close" aria-label="Dismiss" rdxToastClose>✕</button>
+                            <button aria-label="Dismiss" rdxToastClose [class]="t.close">✕</button>
                         </div>
                     </div>
                 }
@@ -22534,9 +22534,9 @@ export class ToastCustomPositionExample {
 `rdxToastAction` adds an in-toast action button; this one undoes the change and dismisses the toast.
 
 ```typescript
+import { cn, demoButton, demoToast } from '../../storybook/styles';
 import { ChangeDetectionStrategy, Component, inject } from '@angular/core';
 import { provideRdxToastManager, RdxToastManager, RdxToastObject, toastImports } from '@radix-ng/primitives/toast';
-import { cn, demoButton, demoToast } from '../../storybook/styles';
 
 /**
  * `rdxToastAction` renders an in-toast action button. The label and handler are passed through the
@@ -22554,19 +22554,19 @@ import { cn, demoButton, demoToast } from '../../storybook/styles';
         </div>
 
         <div rdxToastPortal>
-            <div [class]="t.viewport" rdxToastViewport>
+            <div rdxToastViewport [class]="t.viewport">
                 @for (toast of manager.toasts(); track toast.id) {
-                    <div [class]="t.root" [toast]="toast" rdxToastRoot>
-                        <div [class]="t.content" rdxToastContent>
+                    <div rdxToastRoot [class]="t.root" [toast]="toast">
+                        <div rdxToastContent [class]="t.content">
                             <div class="min-w-0 flex-1">
-                                <p [class]="t.title" rdxToastTitle>{{ toast.title }}</p>
+                                <p rdxToastTitle [class]="t.title">{{ toast.title }}</p>
                                 @if (toast.actionProps; as action) {
-                                    <button [class]="t.action" (click)="runAction(toast, $event)" rdxToastAction>
+                                    <button rdxToastAction [class]="t.action" (click)="runAction(toast, $event)">
                                         {{ action.label }}
                                     </button>
                                 }
                             </div>
-                            <button [class]="t.close" aria-label="Dismiss" rdxToastClose>✕</button>
+                            <button aria-label="Dismiss" rdxToastClose [class]="t.close">✕</button>
                         </div>
                     </div>
                 }
@@ -22602,9 +22602,9 @@ export class ToastUndoActionExample {
 Attach a typed `data` payload and read it back in the template for rich, app-specific toasts.
 
 ```typescript
+import { cn, demoButton, demoToast } from '../../storybook/styles';
 import { ChangeDetectionStrategy, Component, inject } from '@angular/core';
 import { provideRdxToastManager, RdxToastManager, toastImports } from '@radix-ng/primitives/toast';
-import { cn, demoButton, demoToast } from '../../storybook/styles';
 
 interface MentionData {
     user: string;
@@ -22625,11 +22625,11 @@ interface MentionData {
         <button [class]="cn(b.base, b.primary, b.size.md)" (click)="mention()">New mention</button>
 
         <div rdxToastPortal>
-            <div [class]="t.viewport" rdxToastViewport>
+            <div rdxToastViewport [class]="t.viewport">
                 @for (toast of manager.toasts(); track toast.id) {
-                    <div [class]="t.root" [toast]="toast" rdxToastRoot>
+                    <div rdxToastRoot [class]="t.root" [toast]="toast">
                         @let data = $any(toast.data);
-                        <div [class]="t.content" rdxToastContent>
+                        <div rdxToastContent [class]="t.content">
                             <span
                                 class="bg-muted text-muted-foreground grid size-9 shrink-0 place-items-center rounded-full text-xs font-semibold"
                                 aria-hidden="true"
@@ -22637,10 +22637,10 @@ interface MentionData {
                                 {{ data.initials }}
                             </span>
                             <div class="min-w-0 flex-1">
-                                <p [class]="t.title" rdxToastTitle>{{ data.user }} mentioned you</p>
-                                <p [class]="t.description" rdxToastDescription>“{{ data.message }}”</p>
+                                <p rdxToastTitle [class]="t.title">{{ data.user }} mentioned you</p>
+                                <p rdxToastDescription [class]="t.description">“{{ data.message }}”</p>
                             </div>
-                            <button [class]="t.close" aria-label="Dismiss" rdxToastClose>✕</button>
+                            <button aria-label="Dismiss" rdxToastClose [class]="t.close">✕</button>
                         </div>
                     </div>
                 }
@@ -22675,9 +22675,9 @@ export class ToastCustomDataExample {
 Pass a fixed `id` to upsert a single toast in place instead of stacking duplicates.
 
 ```typescript
+import { cn, demoButton, demoToast } from '../../storybook/styles';
 import { ChangeDetectionStrategy, Component, inject } from '@angular/core';
 import { provideRdxToastManager, RdxToastManager, toastImports } from '@radix-ng/primitives/toast';
-import { cn, demoButton, demoToast } from '../../storybook/styles';
 
 /**
  * Passing a fixed `id` upserts instead of stacking — repeated calls update the same toast in place
@@ -22693,15 +22693,15 @@ import { cn, demoButton, demoToast } from '../../storybook/styles';
         <button [class]="cn(b.base, b.primary, b.size.md)" (click)="copy()">Copy link</button>
 
         <div rdxToastPortal>
-            <div [class]="t.viewport" rdxToastViewport>
+            <div rdxToastViewport [class]="t.viewport">
                 @for (toast of manager.toasts(); track toast.id) {
-                    <div [class]="t.root" [toast]="toast" rdxToastRoot>
-                        <div [class]="t.content" rdxToastContent>
+                    <div rdxToastRoot [class]="t.root" [toast]="toast">
+                        <div rdxToastContent [class]="t.content">
                             <div class="min-w-0 flex-1">
-                                <p [class]="t.title" rdxToastTitle>{{ toast.title }}</p>
-                                <p [class]="t.description" rdxToastDescription>{{ toast.description }}</p>
+                                <p rdxToastTitle [class]="t.title">{{ toast.title }}</p>
+                                <p rdxToastDescription [class]="t.description">{{ toast.description }}</p>
                             </div>
-                            <button [class]="t.close" aria-label="Dismiss" rdxToastClose>✕</button>
+                            <button aria-label="Dismiss" rdxToastClose [class]="t.close">✕</button>
                         </div>
                     </div>
                 }
@@ -22734,9 +22734,9 @@ export class ToastDeduplicatedExample {
 Measured heights feed `--toast-offset-y`, so the expanded stack lines up even with differing heights.
 
 ```typescript
+import { cn, demoButton, demoToast } from '../../storybook/styles';
 import { ChangeDetectionStrategy, Component, inject } from '@angular/core';
 import { provideRdxToastManager, RdxToastManager, toastImports } from '@radix-ng/primitives/toast';
-import { cn, demoButton, demoToast } from '../../storybook/styles';
 
 /**
  * Each toast's height is measured and shared as `--toast-offset-y`, so the expanded layout lines up
@@ -22755,15 +22755,15 @@ import { cn, demoButton, demoToast } from '../../storybook/styles';
         </div>
 
         <div rdxToastPortal>
-            <div [class]="t.viewport" rdxToastViewport>
+            <div rdxToastViewport [class]="t.viewport">
                 @for (toast of manager.toasts(); track toast.id) {
-                    <div [class]="t.root" [toast]="toast" rdxToastRoot>
-                        <div [class]="t.content" rdxToastContent>
+                    <div rdxToastRoot [class]="t.root" [toast]="toast">
+                        <div rdxToastContent [class]="t.content">
                             <div class="min-w-0 flex-1">
-                                <p [class]="t.title" rdxToastTitle>{{ toast.title }}</p>
-                                <p [class]="t.description" rdxToastDescription>{{ toast.description }}</p>
+                                <p rdxToastTitle [class]="t.title">{{ toast.title }}</p>
+                                <p rdxToastDescription [class]="t.description">{{ toast.description }}</p>
                             </div>
-                            <button [class]="t.close" aria-label="Dismiss" rdxToastClose>✕</button>
+                            <button aria-label="Dismiss" rdxToastClose [class]="t.close">✕</button>
                         </div>
                     </div>
                 }
@@ -22798,9 +22798,9 @@ export class ToastVaryingHeightsExample {
 Pin a toast to an element with `rdxToastPositioner` (powered by popper) instead of joining the stack.
 
 ```typescript
+import { cn, demoButton, demoToast } from '../../storybook/styles';
 import { ChangeDetectionStrategy, Component, inject } from '@angular/core';
 import { provideRdxToastManager, RdxToastManager, toastImports } from '@radix-ng/primitives/toast';
-import { cn, demoButton, demoToast } from '../../storybook/styles';
 
 /**
  * An anchored toast is positioned against an element with `rdxToastPositioner` (powered by popper)
@@ -22816,17 +22816,17 @@ import { cn, demoButton, demoToast } from '../../storybook/styles';
         <button [class]="cn(b.base, b.primary, b.size.md)" (click)="show($event)">Anchored toast</button>
 
         <div rdxToastPortal>
-            <div [class]="t.viewport" rdxToastViewport>
+            <div rdxToastViewport [class]="t.viewport">
                 @for (toast of manager.toasts(); track toast.id) {
                     @if (toast.positionerProps; as positioner) {
-                        <div [anchor]="positioner.anchor" [side]="positioner.side ?? 'top'" rdxToastPositioner>
-                            <div [class]="t.anchored" [toast]="toast" rdxToastRoot>
-                                <div [class]="t.content" rdxToastContent>
+                        <div rdxToastPositioner [anchor]="positioner.anchor" [side]="positioner.side ?? 'top'">
+                            <div rdxToastRoot [class]="t.anchored" [toast]="toast">
+                                <div rdxToastContent [class]="t.content">
                                     <div class="min-w-0 flex-1">
-                                        <p [class]="t.title" rdxToastTitle>{{ toast.title }}</p>
-                                        <p [class]="t.description" rdxToastDescription>{{ toast.description }}</p>
+                                        <p rdxToastTitle [class]="t.title">{{ toast.title }}</p>
+                                        <p rdxToastDescription [class]="t.description">{{ toast.description }}</p>
                                     </div>
-                                    <button [class]="t.close" aria-label="Dismiss" rdxToastClose>✕</button>
+                                    <button aria-label="Dismiss" rdxToastClose [class]="t.close">✕</button>
                                 </div>
                             </div>
                         </div>
@@ -23322,11 +23322,11 @@ screen-reader users can still reach it.
 Render a `[rdxMenuTrigger]` on a toolbar button to open a menu from the toolbar.
 
 ```typescript
+import { demoMenu } from '../../storybook/styles';
 import { ChangeDetectionStrategy, Component } from '@angular/core';
 import { LucideChevronDown } from '@lucide/angular';
 import { RdxMenuModule } from '@radix-ng/primitives/menu';
 import { toolbarImports } from '@radix-ng/primitives/toolbar';
-import { demoMenu } from '../../storybook/styles';
 
 @Component({
     changeDetection: ChangeDetectionStrategy.Eager,
@@ -23364,12 +23364,12 @@ import { demoMenu } from '../../storybook/styles';
                 </button>
 
                 @if (menu.open()) {
-                    <div [class]="m.positioner" sideOffset="6" rdxMenuPositioner>
-                        <div [class]="m.popup" rdxMenuPopup>
-                            <button [class]="m.item" rdxMenuItem>Undo</button>
-                            <button [class]="m.item" rdxMenuItem>Redo</button>
-                            <div [class]="m.separator" rdxMenuSeparator></div>
-                            <button [class]="m.item" rdxMenuItem>Clear formatting</button>
+                    <div sideOffset="6" rdxMenuPositioner [class]="m.positioner">
+                        <div rdxMenuPopup [class]="m.popup">
+                            <button rdxMenuItem [class]="m.item">Undo</button>
+                            <button rdxMenuItem [class]="m.item">Redo</button>
+                            <div rdxMenuSeparator [class]="m.separator"></div>
+                            <button rdxMenuItem [class]="m.item">Clear formatting</button>
                         </div>
                     </div>
                 }
@@ -23387,11 +23387,11 @@ export class ToolbarWithMenuExample {
 Wrap toolbar buttons with a tooltip by stacking `[rdxTooltipTrigger]`.
 
 ```typescript
+import { demoTooltip } from '../../storybook/styles';
 import { ChangeDetectionStrategy, Component } from '@angular/core';
 import { LucideBold, LucideItalic } from '@lucide/angular';
 import { toolbarImports } from '@radix-ng/primitives/toolbar';
 import { tooltipImports } from '@radix-ng/primitives/tooltip';
-import { demoTooltip } from '../../storybook/styles';
 
 const itemClass =
     'text-foreground hover:bg-muted focus-visible:ring-ring inline-flex h-8 w-8 items-center justify-center rounded-md outline-none transition-colors focus-visible:ring-2';
@@ -23410,9 +23410,9 @@ const itemClass =
                 <button class="${itemClass}" aria-label="Bold" rdxToolbarButton rdxTooltipTrigger>
                     <svg lucideBold size="16"></svg>
                 </button>
-                <div *rdxTooltipPortal [class]="t.positioner" sideOffset="8" rdxTooltipPositioner>
-                    <div [class]="t.popup" rdxTooltipPopup>Bold</div>
-                    <span [class]="t.arrow" rdxTooltipArrow></span>
+                <div *rdxTooltipPortal sideOffset="8" rdxTooltipPositioner [class]="t.positioner">
+                    <div rdxTooltipPopup [class]="t.popup">Bold</div>
+                    <span rdxTooltipArrow [class]="t.arrow"></span>
                 </div>
             </ng-container>
 
@@ -23420,9 +23420,9 @@ const itemClass =
                 <button class="${itemClass}" aria-label="Italic" rdxToolbarButton rdxTooltipTrigger>
                     <svg lucideItalic size="16"></svg>
                 </button>
-                <div *rdxTooltipPortal [class]="t.positioner" sideOffset="8" rdxTooltipPositioner>
-                    <div [class]="t.popup" rdxTooltipPopup>Italic</div>
-                    <span [class]="t.arrow" rdxTooltipArrow></span>
+                <div *rdxTooltipPortal sideOffset="8" rdxTooltipPositioner [class]="t.positioner">
+                    <div rdxTooltipPopup [class]="t.popup">Italic</div>
+                    <span rdxTooltipArrow [class]="t.arrow"></span>
                 </div>
             </ng-container>
         </div>
@@ -23469,11 +23469,11 @@ const stepClass =
 
             <div
                 class="flex items-center gap-0.5"
-                [value]="16"
                 rdxNumberFieldRoot
                 min="8"
                 max="72"
                 aria-label="Font size"
+                [value]="16"
             >
                 <button class="${stepClass}" aria-label="Decrease" rdxToolbarButton rdxNumberFieldDecrement>
                     <svg lucideMinus size="16"></svg>
@@ -23569,10 +23569,10 @@ primitives. It remains headless: styles and native CSS animations belong to the
 follows Base UI.
 
 ```typescript
+import { cn, demoButton, demoTooltip } from '../../storybook/styles';
 import { ChangeDetectionStrategy, Component } from '@angular/core';
 import { LucidePlus } from '@lucide/angular';
 import { tooltipImports } from '@radix-ng/primitives/tooltip';
-import { cn, demoButton, demoTooltip } from '../../storybook/styles';
 
 @Component({
     changeDetection: ChangeDetectionStrategy.Eager,
@@ -23580,13 +23580,13 @@ import { cn, demoButton, demoTooltip } from '../../storybook/styles';
     imports: [...tooltipImports, LucidePlus],
     template: `
         <ng-container rdxTooltip>
-            <button [class]="cn(b.base, b.outline, b.size.icon)" aria-label="Add to library" rdxTooltipTrigger>
+            <button aria-label="Add to library" rdxTooltipTrigger [class]="cn(b.base, b.outline, b.size.icon)">
                 <svg aria-hidden="true" lucidePlus size="16" />
             </button>
 
-            <div *rdxTooltipPortal [class]="t.positioner" sideOffset="8" rdxTooltipPositioner>
-                <div [class]="t.popup" rdxTooltipPopup>Add to library</div>
-                <span [class]="t.arrow" rdxTooltipArrow></span>
+            <div *rdxTooltipPortal sideOffset="8" rdxTooltipPositioner [class]="t.positioner">
+                <div rdxTooltipPopup [class]="t.popup">Add to library</div>
+                <span rdxTooltipArrow [class]="t.arrow"></span>
             </div>
         </ng-container>
     `
@@ -23658,10 +23658,10 @@ exit keyframes on its root element finish. Use the `*` microsyntax on the positi
 A tooltip anchored to an icon button, with an arrow.
 
 ```typescript
+import { cn, demoButton, demoTooltip } from '../../storybook/styles';
 import { ChangeDetectionStrategy, Component } from '@angular/core';
 import { LucidePlus } from '@lucide/angular';
 import { tooltipImports } from '@radix-ng/primitives/tooltip';
-import { cn, demoButton, demoTooltip } from '../../storybook/styles';
 
 @Component({
     changeDetection: ChangeDetectionStrategy.Eager,
@@ -23669,13 +23669,13 @@ import { cn, demoButton, demoTooltip } from '../../storybook/styles';
     imports: [...tooltipImports, LucidePlus],
     template: `
         <ng-container rdxTooltip>
-            <button [class]="cn(b.base, b.outline, b.size.icon)" aria-label="Add to library" rdxTooltipTrigger>
+            <button aria-label="Add to library" rdxTooltipTrigger [class]="cn(b.base, b.outline, b.size.icon)">
                 <svg aria-hidden="true" lucidePlus size="16" />
             </button>
 
-            <div *rdxTooltipPortal [class]="t.positioner" sideOffset="8" rdxTooltipPositioner>
-                <div [class]="t.popup" rdxTooltipPopup>Add to library</div>
-                <span [class]="t.arrow" rdxTooltipArrow></span>
+            <div *rdxTooltipPortal sideOffset="8" rdxTooltipPositioner [class]="t.positioner">
+                <div rdxTooltipPopup [class]="t.popup">Add to library</div>
+                <span rdxTooltipArrow [class]="t.arrow"></span>
             </div>
         </ng-container>
     `
@@ -23694,29 +23694,29 @@ instant-open `timeout` window — once one tooltip opens, adjacent ones open ins
 ms after the last one closes.
 
 ```typescript
+import { cn, demoButton, demoTooltip } from '../../storybook/styles';
 import { ChangeDetectionStrategy, Component } from '@angular/core';
 import { LucideDynamicIcon } from '@lucide/angular';
 import { tooltipImports } from '@radix-ng/primitives/tooltip';
-import { cn, demoButton, demoTooltip } from '../../storybook/styles';
 
 @Component({
     changeDetection: ChangeDetectionStrategy.Eager,
     selector: 'rdx-tooltip-provider',
     imports: [...tooltipImports, LucideDynamicIcon],
     template: `
-        <div class="flex items-center gap-2" [delay]="600" [timeout]="400" rdxTooltipProvider>
+        <div class="flex items-center gap-2" rdxTooltipProvider [delay]="600" [timeout]="400">
             @for (action of actions; track action.name) {
                 <ng-container rdxTooltip>
                     <button
+                        rdxTooltipTrigger
                         [class]="cn(b.base, b.outline, b.size.icon)"
                         [attr.aria-label]="action.name"
-                        rdxTooltipTrigger
                     >
-                        <svg [lucideIcon]="action.icon" aria-hidden="true" size="16" />
+                        <svg aria-hidden="true" size="16" [lucideIcon]="action.icon" />
                     </button>
 
-                    <div *rdxTooltipPortal [class]="t.positioner" sideOffset="8" rdxTooltipPositioner>
-                        <div [class]="t.popup" rdxTooltipPopup>{{ action.name }}</div>
+                    <div *rdxTooltipPortal sideOffset="8" rdxTooltipPositioner [class]="t.positioner">
+                        <div rdxTooltipPopup [class]="t.popup">{{ action.name }}</div>
                     </div>
                 </ng-container>
             }
@@ -23742,9 +23742,9 @@ Set `delay` (and `closeDelay`) on `rdxTooltipTrigger` to override the root, prov
 values for that trigger only.
 
 ```typescript
+import { cn, demoButton, demoTooltip } from '../../storybook/styles';
 import { ChangeDetectionStrategy, Component } from '@angular/core';
 import { tooltipImports } from '@radix-ng/primitives/tooltip';
-import { cn, demoButton, demoTooltip } from '../../storybook/styles';
 
 @Component({
     changeDetection: ChangeDetectionStrategy.Eager,
@@ -23754,12 +23754,12 @@ import { cn, demoButton, demoTooltip } from '../../storybook/styles';
         <div class="flex items-center gap-3">
             @for (item of triggers; track item.delay) {
                 <ng-container rdxTooltip>
-                    <button [class]="cn(b.base, b.outline, b.size.md)" [delay]="item.delay" rdxTooltipTrigger>
+                    <button rdxTooltipTrigger [class]="cn(b.base, b.outline, b.size.md)" [delay]="item.delay">
                         {{ item.label }}
                     </button>
 
-                    <div *rdxTooltipPortal [class]="t.positioner" sideOffset="8" rdxTooltipPositioner>
-                        <div [class]="t.popup" rdxTooltipPopup>Opened after {{ item.delay }} ms</div>
+                    <div *rdxTooltipPortal sideOffset="8" rdxTooltipPositioner [class]="t.positioner">
+                        <div rdxTooltipPopup [class]="t.popup">Opened after {{ item.delay }} ms</div>
                     </div>
                 </ng-container>
             }
@@ -23785,9 +23785,9 @@ Set `disabled` on `rdxTooltipTrigger` (or `disabled` on `rdxTooltip` for all tri
 trigger never opens the tooltip and reflects `data-trigger-disabled`.
 
 ```typescript
+import { cn, demoButton, demoTooltip } from '../../storybook/styles';
 import { ChangeDetectionStrategy, Component } from '@angular/core';
 import { tooltipImports } from '@radix-ng/primitives/tooltip';
-import { cn, demoButton, demoTooltip } from '../../storybook/styles';
 
 @Component({
     changeDetection: ChangeDetectionStrategy.Eager,
@@ -23797,12 +23797,12 @@ import { cn, demoButton, demoTooltip } from '../../storybook/styles';
         <div class="flex items-center gap-3">
             @for (item of triggers; track item.label) {
                 <ng-container rdxTooltip>
-                    <button [class]="cn(b.base, b.outline, b.size.md)" [disabled]="item.disabled" rdxTooltipTrigger>
+                    <button rdxTooltipTrigger [class]="cn(b.base, b.outline, b.size.md)" [disabled]="item.disabled">
                         {{ item.label }}
                     </button>
 
-                    <div *rdxTooltipPortal [class]="t.positioner" rdxTooltipPositioner>
-                        <div [class]="t.popup" rdxTooltipPopup>{{ item.label }} tooltip</div>
+                    <div *rdxTooltipPortal rdxTooltipPositioner [class]="t.positioner">
+                        <div rdxTooltipPopup [class]="t.popup">{{ item.label }} tooltip</div>
                     </div>
                 </ng-container>
             }
@@ -23827,9 +23827,9 @@ Set `trackCursorAxis` on the root to `'x'`, `'y'`, or `'both'` to make the popup
 along that axis.
 
 ```typescript
+import { demoTooltip } from '../../storybook/styles';
 import { ChangeDetectionStrategy, Component } from '@angular/core';
 import { tooltipImports } from '@radix-ng/primitives/tooltip';
-import { demoTooltip } from '../../storybook/styles';
 
 @Component({
     changeDetection: ChangeDetectionStrategy.Eager,
@@ -23845,8 +23845,8 @@ import { demoTooltip } from '../../storybook/styles';
                 Move the cursor over me
             </button>
 
-            <div *rdxTooltipPortal [class]="t.positioner" sideOffset="12" rdxTooltipPositioner>
-                <div [class]="t.popup" rdxTooltipPopup>Following the cursor</div>
+            <div *rdxTooltipPortal sideOffset="12" rdxTooltipPositioner [class]="t.positioner">
+                <div rdxTooltipPopup [class]="t.popup">Following the cursor</div>
             </div>
         </ng-container>
     `
@@ -23862,6 +23862,7 @@ Tooltip uses `updatePositionStrategy="always"` so it can follow moving triggers
 when the trigger moves continuously, such as a slider thumb being dragged.
 
 ```typescript
+import { demoTooltip } from '../../storybook/styles';
 import { ChangeDetectionStrategy, Component, signal } from '@angular/core';
 import {
     RdxSliderControl,
@@ -23872,7 +23873,6 @@ import {
     RdxSliderTrack
 } from '@radix-ng/primitives/slider';
 import { tooltipImports } from '@radix-ng/primitives/tooltip';
-import { demoTooltip } from '../../storybook/styles';
 
 @Component({
     changeDetection: ChangeDetectionStrategy.Eager,
@@ -23887,30 +23887,30 @@ import { demoTooltip } from '../../storybook/styles';
         RdxSliderThumbInput
     ],
     template: `
-        <div class="relative w-52 select-none" [value]="45" [step]="5" rdxSliderRoot>
+        <div class="relative w-52 select-none" rdxSliderRoot [value]="45" [step]="5">
             <div class="flex h-5 w-full touch-none items-center" rdxSliderControl>
                 <div class="bg-muted relative h-1 w-full rounded-full" rdxSliderTrack>
                     <div class="bg-primary h-full rounded-full" rdxSliderIndicator></div>
 
-                    <ng-container [open]="showTooltipState()" rdxTooltip disabled>
+                    <ng-container rdxTooltip disabled [open]="showTooltipState()">
                         <div
                             class="border-border bg-background focus-within:ring-ring focus-within:ring-offset-background block size-5 rounded-full border shadow-sm focus-within:ring-2 focus-within:ring-offset-2"
-                            [rdxOnPointerDown]="handlePointerDown"
                             rdxSliderThumb
                             rdxTooltipTrigger
+                            [rdxOnPointerDown]="handlePointerDown"
                         >
                             <input rdxSliderThumbInput aria-label="Volume" />
                         </div>
 
                         <div
                             *rdxTooltipPortal
-                            [class]="t.positioner"
                             sideOffset="8"
                             side="top"
                             updatePositionStrategy="always"
                             rdxTooltipPositioner
+                            [class]="t.positioner"
                         >
-                            <div [class]="t.popup" rdxTooltipPopup>Volume</div>
+                            <div rdxTooltipPopup [class]="t.popup">Volume</div>
                         </div>
                     </ng-container>
                 </div>
@@ -24136,10 +24136,10 @@ The primitive still owns everything that matters for correctness: it is modal, t
 The service owns only the open state, the per-call options, and the pending promise.
 
 ```typescript
+import { cn, demoButton, demoDialog } from '../storybook/styles';
 import { ChangeDetectionStrategy, Component, inject, Injectable, signal } from '@angular/core';
 import { alertDialogImports } from '@radix-ng/primitives/alert-dialog';
 import { RdxButtonDirective } from '@radix-ng/primitives/button';
-import { cn, demoButton, demoDialog } from '../storybook/styles';
 
 /**
  * Confirmation Dialog — an imperative `confirm()` built on the Alert Dialog primitive.
@@ -24203,15 +24203,15 @@ export class ConfirmService {
     changeDetection: ChangeDetectionStrategy.OnPush,
     imports: [...alertDialogImports],
     template: `
-        <div [open]="confirm.open()" (openChange)="confirm.onOpenChange($event)" rdxAlertDialogRoot>
+        <div rdxAlertDialogRoot [open]="confirm.open()" (openChange)="confirm.onOpenChange($event)">
             <ng-template rdxAlertDialogPortal>
-                <div [class]="cn(d.backdrop, d.backdropAnimated)" rdxAlertDialogBackdrop></div>
+                <div rdxAlertDialogBackdrop [class]="cn(d.backdrop, d.backdropAnimated)"></div>
 
-                <div [class]="cn(d.popup, d.popupAnimated)" rdxAlertDialogPopup>
+                <div rdxAlertDialogPopup [class]="cn(d.popup, d.popupAnimated)">
                     @if (confirm.options(); as o) {
-                        <h2 [class]="d.title" rdxAlertDialogTitle>{{ o.title }}</h2>
+                        <h2 rdxAlertDialogTitle [class]="d.title">{{ o.title }}</h2>
                         @if (o.description) {
-                            <p [class]="d.description" rdxAlertDialogDescription>{{ o.description }}</p>
+                            <p rdxAlertDialogDescription [class]="d.description">{{ o.description }}</p>
                         }
 
                         <div [class]="d.footer">
@@ -24248,7 +24248,7 @@ export class ConfirmDialogHost {
     imports: [RdxButtonDirective, ConfirmDialogHost],
     template: `
         <div class="flex flex-col items-center gap-4">
-            <button [class]="cn(b.base, b.destructive, b.size.md)" (click)="deleteAccount()" rdxButton>
+            <button rdxButton [class]="cn(b.base, b.destructive, b.size.md)" (click)="deleteAccount()">
                 Delete account
             </button>
 
@@ -24345,10 +24345,10 @@ A destructive action awaits the shared dialog. Confirm resolves `true`; Cancel a
 `false`. The result is shown below the trigger.
 
 ```typescript
+import { cn, demoButton, demoDialog } from '../storybook/styles';
 import { ChangeDetectionStrategy, Component, inject, Injectable, signal } from '@angular/core';
 import { alertDialogImports } from '@radix-ng/primitives/alert-dialog';
 import { RdxButtonDirective } from '@radix-ng/primitives/button';
-import { cn, demoButton, demoDialog } from '../storybook/styles';
 
 /**
  * Confirmation Dialog — an imperative `confirm()` built on the Alert Dialog primitive.
@@ -24412,15 +24412,15 @@ export class ConfirmService {
     changeDetection: ChangeDetectionStrategy.OnPush,
     imports: [...alertDialogImports],
     template: `
-        <div [open]="confirm.open()" (openChange)="confirm.onOpenChange($event)" rdxAlertDialogRoot>
+        <div rdxAlertDialogRoot [open]="confirm.open()" (openChange)="confirm.onOpenChange($event)">
             <ng-template rdxAlertDialogPortal>
-                <div [class]="cn(d.backdrop, d.backdropAnimated)" rdxAlertDialogBackdrop></div>
+                <div rdxAlertDialogBackdrop [class]="cn(d.backdrop, d.backdropAnimated)"></div>
 
-                <div [class]="cn(d.popup, d.popupAnimated)" rdxAlertDialogPopup>
+                <div rdxAlertDialogPopup [class]="cn(d.popup, d.popupAnimated)">
                     @if (confirm.options(); as o) {
-                        <h2 [class]="d.title" rdxAlertDialogTitle>{{ o.title }}</h2>
+                        <h2 rdxAlertDialogTitle [class]="d.title">{{ o.title }}</h2>
                         @if (o.description) {
-                            <p [class]="d.description" rdxAlertDialogDescription>{{ o.description }}</p>
+                            <p rdxAlertDialogDescription [class]="d.description">{{ o.description }}</p>
                         }
 
                         <div [class]="d.footer">
@@ -24457,7 +24457,7 @@ export class ConfirmDialogHost {
     imports: [RdxButtonDirective, ConfirmDialogHost],
     template: `
         <div class="flex flex-col items-center gap-4">
-            <button [class]="cn(b.base, b.destructive, b.size.md)" (click)="deleteAccount()" rdxButton>
+            <button rdxButton [class]="cn(b.base, b.destructive, b.size.md)" (click)="deleteAccount()">
                 Delete account
             </button>
 
@@ -24518,6 +24518,7 @@ the anchored, dismissable panel and its focus management; the
 The recipe adds the unread count badge, per-item read state, and "mark all read".
 
 ```typescript
+import { cn, demoButton, demoCard, demoPopover } from '../storybook/styles';
 import { ChangeDetectionStrategy, Component, computed, signal } from '@angular/core';
 import { LucideBell, LucideCheckCheck } from '@lucide/angular';
 import { popoverImports } from '@radix-ng/primitives/popover';
@@ -24528,7 +24529,6 @@ import {
     RdxScrollAreaThumb,
     RdxScrollAreaViewport
 } from '@radix-ng/primitives/scroll-area';
-import { cn, demoButton, demoCard, demoPopover } from '../storybook/styles';
 
 interface Notification {
     id: number;
@@ -24561,9 +24561,9 @@ interface Notification {
     template: `
         <ng-container rdxPopoverRoot>
             <button
-                [class]="cn(b.base, b.outline, b.size.icon, 'relative')"
                 aria-label="Notifications"
                 rdxPopoverTrigger
+                [class]="cn(b.base, b.outline, b.size.icon, 'relative')"
             >
                 <svg aria-hidden="true" lucideBell size="18"></svg>
                 @if (unreadCount() > 0) {
@@ -24575,10 +24575,10 @@ interface Notification {
                 }
             </button>
 
-            <div *rdxPopoverPortal [class]="p.positioner" sideOffset="8" align="end" rdxPopoverPositioner>
-                <div [class]="popup" rdxPopoverPopup>
+            <div *rdxPopoverPortal sideOffset="8" align="end" rdxPopoverPositioner [class]="p.positioner">
+                <div rdxPopoverPopup [class]="popup">
                     <div class="border-border flex items-center justify-between border-b px-4 py-3">
-                        <h2 [class]="p.title" rdxPopoverTitle>Notifications</h2>
+                        <h2 rdxPopoverTitle [class]="p.title">Notifications</h2>
                         <button
                             [class]="cn(b.base, b.ghost, b.size.sm, 'gap-1.5 text-xs')"
                             [disabled]="unreadCount() === 0"
@@ -24599,9 +24599,9 @@ interface Notification {
                                     >
                                         <span
                                             class="mt-1.5 size-2 shrink-0 rounded-full"
+                                            aria-hidden="true"
                                             [class.bg-primary]="!n.read"
                                             [class.bg-transparent]="n.read"
-                                            aria-hidden="true"
                                         ></span>
                                         <span class="min-w-0 flex-1">
                                             <span class="text-foreground block text-sm font-medium">
@@ -24719,6 +24719,7 @@ A bell button shows the unread count. Opening the popover reveals the list; clic
 marks it read, and "Mark all read" clears the badge.
 
 ```typescript
+import { cn, demoButton, demoCard, demoPopover } from '../storybook/styles';
 import { ChangeDetectionStrategy, Component, computed, signal } from '@angular/core';
 import { LucideBell, LucideCheckCheck } from '@lucide/angular';
 import { popoverImports } from '@radix-ng/primitives/popover';
@@ -24729,7 +24730,6 @@ import {
     RdxScrollAreaThumb,
     RdxScrollAreaViewport
 } from '@radix-ng/primitives/scroll-area';
-import { cn, demoButton, demoCard, demoPopover } from '../storybook/styles';
 
 interface Notification {
     id: number;
@@ -24762,9 +24762,9 @@ interface Notification {
     template: `
         <ng-container rdxPopoverRoot>
             <button
-                [class]="cn(b.base, b.outline, b.size.icon, 'relative')"
                 aria-label="Notifications"
                 rdxPopoverTrigger
+                [class]="cn(b.base, b.outline, b.size.icon, 'relative')"
             >
                 <svg aria-hidden="true" lucideBell size="18"></svg>
                 @if (unreadCount() > 0) {
@@ -24776,10 +24776,10 @@ interface Notification {
                 }
             </button>
 
-            <div *rdxPopoverPortal [class]="p.positioner" sideOffset="8" align="end" rdxPopoverPositioner>
-                <div [class]="popup" rdxPopoverPopup>
+            <div *rdxPopoverPortal sideOffset="8" align="end" rdxPopoverPositioner [class]="p.positioner">
+                <div rdxPopoverPopup [class]="popup">
                     <div class="border-border flex items-center justify-between border-b px-4 py-3">
-                        <h2 [class]="p.title" rdxPopoverTitle>Notifications</h2>
+                        <h2 rdxPopoverTitle [class]="p.title">Notifications</h2>
                         <button
                             [class]="cn(b.base, b.ghost, b.size.sm, 'gap-1.5 text-xs')"
                             [disabled]="unreadCount() === 0"
@@ -24800,9 +24800,9 @@ interface Notification {
                                     >
                                         <span
                                             class="mt-1.5 size-2 shrink-0 rounded-full"
+                                            aria-hidden="true"
                                             [class.bg-primary]="!n.read"
                                             [class.bg-transparent]="n.read"
-                                            aria-hidden="true"
                                         ></span>
                                         <span class="min-w-0 flex-1">
                                             <span class="text-foreground block text-sm font-medium">
@@ -24899,11 +24899,11 @@ provides the secondary actions in a dropdown. The two `<button>` elements share
 look like one control while staying independently focusable and accessible.
 
 ```typescript
+import { cn, demoButton, demoMenu } from '../storybook/styles';
 import { ChangeDetectionStrategy, Component, signal } from '@angular/core';
 import { LucideChevronDown } from '@lucide/angular';
 import { RdxButtonDirective } from '@radix-ng/primitives/button';
 import { RdxMenuModule } from '@radix-ng/primitives/menu';
-import { cn, demoButton, demoMenu } from '../storybook/styles';
 
 /**
  * Split Button — a primary action joined to a menu of related actions.
@@ -24919,32 +24919,32 @@ import { cn, demoButton, demoMenu } from '../storybook/styles';
     template: `
         <div class="flex flex-col items-center gap-4">
             <div class="inline-flex rounded-md shadow-sm">
-                <button [class]="cn(b.base, b.primary, b.size.md, 'rounded-r-none')" (click)="run('Save')" rdxButton>
+                <button rdxButton [class]="cn(b.base, b.primary, b.size.md, 'rounded-r-none')" (click)="run('Save')">
                     Save
                 </button>
 
                 <ng-container #root="rdxMenuRoot" rdxMenuRoot>
                     <button
+                        aria-label="More save options"
+                        rdxMenuTrigger
                         [class]="
                             cn(b.base, b.primary, b.size.icon, 'border-primary-foreground/20 rounded-l-none border-l')
                         "
-                        aria-label="More save options"
-                        rdxMenuTrigger
                     >
                         <svg lucideChevronDown size="16"></svg>
                     </button>
 
                     @if (root.open()) {
-                        <div [class]="m.positioner" sideOffset="6" align="end" rdxMenuPositioner>
-                            <div [class]="m.popup" rdxMenuPopup>
-                                <button [class]="m.item" (click)="run('Save and duplicate')" rdxMenuItem>
+                        <div sideOffset="6" align="end" rdxMenuPositioner [class]="m.positioner">
+                            <div rdxMenuPopup [class]="m.popup">
+                                <button rdxMenuItem [class]="m.item" (click)="run('Save and duplicate')">
                                     Save and duplicate
                                 </button>
-                                <button [class]="m.item" (click)="run('Save as template')" rdxMenuItem>
+                                <button rdxMenuItem [class]="m.item" (click)="run('Save as template')">
                                     Save as template
                                 </button>
-                                <div [class]="m.separator" rdxMenuSeparator></div>
-                                <button [class]="m.item" (click)="run('Save and close')" rdxMenuItem>
+                                <div rdxMenuSeparator [class]="m.separator"></div>
+                                <button rdxMenuItem [class]="m.item" (click)="run('Save and close')">
                                     Save and close
                                 </button>
                             </div>
@@ -25017,11 +25017,11 @@ A primary "Save" action with a menu of related save actions. The primary button
 action; the chevron opens the menu, and selecting an item runs that action and closes the menu.
 
 ```typescript
+import { cn, demoButton, demoMenu } from '../storybook/styles';
 import { ChangeDetectionStrategy, Component, signal } from '@angular/core';
 import { LucideChevronDown } from '@lucide/angular';
 import { RdxButtonDirective } from '@radix-ng/primitives/button';
 import { RdxMenuModule } from '@radix-ng/primitives/menu';
-import { cn, demoButton, demoMenu } from '../storybook/styles';
 
 /**
  * Split Button — a primary action joined to a menu of related actions.
@@ -25037,32 +25037,32 @@ import { cn, demoButton, demoMenu } from '../storybook/styles';
     template: `
         <div class="flex flex-col items-center gap-4">
             <div class="inline-flex rounded-md shadow-sm">
-                <button [class]="cn(b.base, b.primary, b.size.md, 'rounded-r-none')" (click)="run('Save')" rdxButton>
+                <button rdxButton [class]="cn(b.base, b.primary, b.size.md, 'rounded-r-none')" (click)="run('Save')">
                     Save
                 </button>
 
                 <ng-container #root="rdxMenuRoot" rdxMenuRoot>
                     <button
+                        aria-label="More save options"
+                        rdxMenuTrigger
                         [class]="
                             cn(b.base, b.primary, b.size.icon, 'border-primary-foreground/20 rounded-l-none border-l')
                         "
-                        aria-label="More save options"
-                        rdxMenuTrigger
                     >
                         <svg lucideChevronDown size="16"></svg>
                     </button>
 
                     @if (root.open()) {
-                        <div [class]="m.positioner" sideOffset="6" align="end" rdxMenuPositioner>
-                            <div [class]="m.popup" rdxMenuPopup>
-                                <button [class]="m.item" (click)="run('Save and duplicate')" rdxMenuItem>
+                        <div sideOffset="6" align="end" rdxMenuPositioner [class]="m.positioner">
+                            <div rdxMenuPopup [class]="m.popup">
+                                <button rdxMenuItem [class]="m.item" (click)="run('Save and duplicate')">
                                     Save and duplicate
                                 </button>
-                                <button [class]="m.item" (click)="run('Save as template')" rdxMenuItem>
+                                <button rdxMenuItem [class]="m.item" (click)="run('Save as template')">
                                     Save as template
                                 </button>
-                                <div [class]="m.separator" rdxMenuSeparator></div>
-                                <button [class]="m.item" (click)="run('Save and close')" rdxMenuItem>
+                                <div rdxMenuSeparator [class]="m.separator"></div>
+                                <button rdxMenuItem [class]="m.item" (click)="run('Save and close')">
                                     Save and close
                                 </button>
                             </div>
@@ -25162,9 +25162,9 @@ registration. Use `data-composite-item-active` on an item when it should provide
 ### Default
 
 ```typescript
+import { cn, demoButton, demoInput } from '../../storybook/styles';
 import { ChangeDetectionStrategy, Component } from '@angular/core';
 import { RdxCompositeItem, RdxCompositeRoot } from '@radix-ng/primitives/composite';
-import { cn, demoButton, demoInput } from '../../storybook/styles';
 
 @Component({
     selector: 'rdx-composite-default',
@@ -25179,22 +25179,22 @@ import { cn, demoButton, demoInput } from '../../storybook/styles';
                 highlightItemOnHover
                 rdxCompositeRoot
             >
-                <button [class]="itemClass" data-composite-item-active rdxCompositeItem>Overview</button>
-                <button [class]="itemClass" rdxCompositeItem>Metrics</button>
-                <button [class]="itemClass" rdxCompositeItem>Reports</button>
+                <button data-composite-item-active rdxCompositeItem [class]="itemClass">Overview</button>
+                <button rdxCompositeItem [class]="itemClass">Metrics</button>
+                <button rdxCompositeItem [class]="itemClass">Reports</button>
             </div>
 
             <div
                 class="flex w-full flex-wrap items-center gap-2"
-                [disabledIndices]="[2]"
-                [loopFocus]="false"
                 orientation="horizontal"
                 rdxCompositeRoot
+                [disabledIndices]="[2]"
+                [loopFocus]="false"
             >
-                <button [class]="itemClass" rdxCompositeItem>Filter</button>
-                <input [class]="inputClass" rdxCompositeItem value="Search" />
-                <button [class]="itemClass" aria-disabled="true" rdxCompositeItem>Archive</button>
-                <button [class]="itemClass" rdxCompositeItem>Export</button>
+                <button rdxCompositeItem [class]="itemClass">Filter</button>
+                <input rdxCompositeItem value="Search" [class]="inputClass" />
+                <button aria-disabled="true" rdxCompositeItem [class]="itemClass">Archive</button>
+                <button rdxCompositeItem [class]="itemClass">Export</button>
             </div>
         </div>
     `
@@ -25216,9 +25216,9 @@ Use `CompositeList` when a primitive needs DOM-order registration and metadata w
 keyboard navigation.
 
 ```typescript
+import { cn, demoButton, demoCard } from '../../storybook/styles';
 import { ChangeDetectionStrategy, Component } from '@angular/core';
 import { RdxCompositeList, RdxCompositeListItem, RdxCompositeMetadata } from '@radix-ng/primitives/composite';
-import { cn, demoButton, demoCard } from '../../storybook/styles';
 
 @Component({
     selector: 'rdx-composite-list-only',
@@ -25226,14 +25226,14 @@ import { cn, demoButton, demoCard } from '../../storybook/styles';
     changeDetection: ChangeDetectionStrategy.OnPush,
     template: `
         <div class="flex w-full max-w-xl flex-col gap-4">
-            <div class="flex flex-wrap items-center gap-2" (onMapChange)="onMapChange($event)" rdxCompositeList>
-                <button [class]="itemClass" [metadata]="{ id: 'overview', label: 'Overview' }" rdxCompositeListItem>
+            <div class="flex flex-wrap items-center gap-2" rdxCompositeList (onMapChange)="onMapChange($event)">
+                <button rdxCompositeListItem [class]="itemClass" [metadata]="{ id: 'overview', label: 'Overview' }">
                     Overview
                 </button>
-                <button [class]="itemClass" [metadata]="{ id: 'metrics', label: 'Metrics' }" rdxCompositeListItem>
+                <button rdxCompositeListItem [class]="itemClass" [metadata]="{ id: 'metrics', label: 'Metrics' }">
                     Metrics
                 </button>
-                <button [class]="itemClass" [metadata]="{ id: 'reports', label: 'Reports' }" rdxCompositeListItem>
+                <button rdxCompositeListItem [class]="itemClass" [metadata]="{ id: 'reports', label: 'Reports' }">
                     Reports
                 </button>
             </div>
@@ -25314,9 +25314,9 @@ import {
             @for (item of directions; track item.direction) {
                 <section
                     class="border-border bg-card text-card-foreground grid gap-4 rounded-md border p-4 shadow-sm"
+                    rdxDirectionProvider
                     [attr.dir]="item.direction"
                     [direction]="item.direction"
-                    rdxDirectionProvider
                 >
                     <div class="flex items-center justify-between gap-3">
                         <span class="text-sm font-medium">{{ item.label }}</span>
@@ -25325,11 +25325,11 @@ import {
 
                     <div
                         class="relative w-full select-none"
-                        [(value)]="item.value"
+                        rdxSliderRoot
                         [min]="0"
                         [max]="100"
                         [step]="5"
-                        rdxSliderRoot
+                        [(value)]="item.value"
                     >
                         <div class="flex h-5 w-full touch-none items-center" rdxSliderControl>
                             <div class="bg-muted relative h-1 w-full rounded-full" rdxSliderTrack>
@@ -25338,7 +25338,7 @@ import {
                                     class="border-border bg-background focus-within:ring-ring block size-5 rounded-full border shadow-sm focus-within:ring-2"
                                     rdxSliderThumb
                                 >
-                                    <input [attr.aria-label]="item.label" rdxSliderThumbInput />
+                                    <input rdxSliderThumbInput [attr.aria-label]="item.label" />
                                 </div>
                             </div>
                         </div>
@@ -25579,9 +25579,9 @@ Each field below calls `injectId('rdx-field-')` in its own injection context, wi
 to the matching `<input id>` without hardcoding an id or risking a collision.
 
 ```typescript
+import { cn, demoInput } from '../../storybook/styles';
 import { ChangeDetectionStrategy, Component, input } from '@angular/core';
 import { injectId } from '@radix-ng/primitives/core';
-import { cn, demoInput } from '../../storybook/styles';
 
 /**
  * Each instance calls `injectId('rdx-field-')` in its injection context, so every
@@ -25594,7 +25594,7 @@ import { cn, demoInput } from '../../storybook/styles';
     template: `
         <div class="flex flex-col gap-1.5">
             <label class="text-foreground text-sm font-medium" [attr.for]="id">{{ label() }}</label>
-            <input [id]="id" [class]="inputClass" [placeholder]="label()" type="text" />
+            <input type="text" [id]="id" [class]="inputClass" [placeholder]="label()" />
             <code class="text-muted-foreground text-xs">id="{{ id }}"</code>
         </div>
     `
@@ -25687,9 +25687,9 @@ The buttons below send messages to the live region. It is visually hidden, so th
 mirrors what assistive technology reads aloud.
 
 ```typescript
+import { cn, demoButton } from '../../storybook/styles';
 import { ChangeDetectionStrategy, Component, inject, signal } from '@angular/core';
 import { RdxLiveAnnouncer } from '@radix-ng/primitives/core';
-import { cn, demoButton } from '../../storybook/styles';
 
 /**
  * Triggers screen-reader announcements through `RdxLiveAnnouncer`. The live region is visually
@@ -25702,10 +25702,10 @@ import { cn, demoButton } from '../../storybook/styles';
     template: `
         <div class="flex w-80 flex-col gap-4">
             <div class="flex gap-2">
-                <button [class]="cn(b.base, b.primary, b.size.md)" (click)="announce('polite')" type="button">
+                <button type="button" [class]="cn(b.base, b.primary, b.size.md)" (click)="announce('polite')">
                     Announce (polite)
                 </button>
-                <button [class]="cn(b.base, b.outline, b.size.md)" (click)="announce('assertive')" type="button">
+                <button type="button" [class]="cn(b.base, b.outline, b.size.md)" (click)="announce('assertive')">
                     Announce (assertive)
                 </button>
             </div>
diff --git a/skills/radix-ng-examples/references/recipes/confirmation-dialog.md b/skills/radix-ng-examples/references/recipes/confirmation-dialog.md
index f44b3b597..f09746d72 100644
--- a/skills/radix-ng-examples/references/recipes/confirmation-dialog.md
+++ b/skills/radix-ng-examples/references/recipes/confirmation-dialog.md
@@ -12,10 +12,10 @@ The primitive still owns everything that matters for correctness: it is modal, t
 The service owns only the open state, the per-call options, and the pending promise.
 
 ```typescript
+import { cn, demoButton, demoDialog } from '../storybook/styles';
 import { ChangeDetectionStrategy, Component, inject, Injectable, signal } from '@angular/core';
 import { alertDialogImports } from '@radix-ng/primitives/alert-dialog';
 import { RdxButtonDirective } from '@radix-ng/primitives/button';
-import { cn, demoButton, demoDialog } from '../storybook/styles';
 
 /**
  * Confirmation Dialog — an imperative `confirm()` built on the Alert Dialog primitive.
@@ -79,15 +79,15 @@ export class ConfirmService {
     changeDetection: ChangeDetectionStrategy.OnPush,
     imports: [...alertDialogImports],
     template: `
-        <div [open]="confirm.open()" (openChange)="confirm.onOpenChange($event)" rdxAlertDialogRoot>
+        <div rdxAlertDialogRoot [open]="confirm.open()" (openChange)="confirm.onOpenChange($event)">
             <ng-template rdxAlertDialogPortal>
-                <div [class]="cn(d.backdrop, d.backdropAnimated)" rdxAlertDialogBackdrop></div>
+                <div rdxAlertDialogBackdrop [class]="cn(d.backdrop, d.backdropAnimated)"></div>
 
-                <div [class]="cn(d.popup, d.popupAnimated)" rdxAlertDialogPopup>
+                <div rdxAlertDialogPopup [class]="cn(d.popup, d.popupAnimated)">
                     @if (confirm.options(); as o) {
-                        <h2 [class]="d.title" rdxAlertDialogTitle>{{ o.title }}</h2>
+                        <h2 rdxAlertDialogTitle [class]="d.title">{{ o.title }}</h2>
                         @if (o.description) {
-                            <p [class]="d.description" rdxAlertDialogDescription>{{ o.description }}</p>
+                            <p rdxAlertDialogDescription [class]="d.description">{{ o.description }}</p>
                         }
 
                         <div [class]="d.footer">
@@ -124,7 +124,7 @@ export class ConfirmDialogHost {
     imports: [RdxButtonDirective, ConfirmDialogHost],
     template: `
         <div class="flex flex-col items-center gap-4">
-            <button [class]="cn(b.base, b.destructive, b.size.md)" (click)="deleteAccount()" rdxButton>
+            <button rdxButton [class]="cn(b.base, b.destructive, b.size.md)" (click)="deleteAccount()">
                 Delete account
             </button>
 
@@ -221,10 +221,10 @@ A destructive action awaits the shared dialog. Confirm resolves `true`; Cancel a
 `false`. The result is shown below the trigger.
 
 ```typescript
+import { cn, demoButton, demoDialog } from '../storybook/styles';
 import { ChangeDetectionStrategy, Component, inject, Injectable, signal } from '@angular/core';
 import { alertDialogImports } from '@radix-ng/primitives/alert-dialog';
 import { RdxButtonDirective } from '@radix-ng/primitives/button';
-import { cn, demoButton, demoDialog } from '../storybook/styles';
 
 /**
  * Confirmation Dialog — an imperative `confirm()` built on the Alert Dialog primitive.
@@ -288,15 +288,15 @@ export class ConfirmService {
     changeDetection: ChangeDetectionStrategy.OnPush,
     imports: [...alertDialogImports],
     template: `
-        <div [open]="confirm.open()" (openChange)="confirm.onOpenChange($event)" rdxAlertDialogRoot>
+        <div rdxAlertDialogRoot [open]="confirm.open()" (openChange)="confirm.onOpenChange($event)">
             <ng-template rdxAlertDialogPortal>
-                <div [class]="cn(d.backdrop, d.backdropAnimated)" rdxAlertDialogBackdrop></div>
+                <div rdxAlertDialogBackdrop [class]="cn(d.backdrop, d.backdropAnimated)"></div>
 
-                <div [class]="cn(d.popup, d.popupAnimated)" rdxAlertDialogPopup>
+                <div rdxAlertDialogPopup [class]="cn(d.popup, d.popupAnimated)">
                     @if (confirm.options(); as o) {
-                        <h2 [class]="d.title" rdxAlertDialogTitle>{{ o.title }}</h2>
+                        <h2 rdxAlertDialogTitle [class]="d.title">{{ o.title }}</h2>
                         @if (o.description) {
-                            <p [class]="d.description" rdxAlertDialogDescription>{{ o.description }}</p>
+                            <p rdxAlertDialogDescription [class]="d.description">{{ o.description }}</p>
                         }
 
                         <div [class]="d.footer">
@@ -333,7 +333,7 @@ export class ConfirmDialogHost {
     imports: [RdxButtonDirective, ConfirmDialogHost],
     template: `
         <div class="flex flex-col items-center gap-4">
-            <button [class]="cn(b.base, b.destructive, b.size.md)" (click)="deleteAccount()" rdxButton>
+            <button rdxButton [class]="cn(b.base, b.destructive, b.size.md)" (click)="deleteAccount()">
                 Delete account
             </button>
 
diff --git a/skills/radix-ng-examples/references/recipes/notification-dropdown.md b/skills/radix-ng-examples/references/recipes/notification-dropdown.md
index 2985756c8..dab2a3eba 100644
--- a/skills/radix-ng-examples/references/recipes/notification-dropdown.md
+++ b/skills/radix-ng-examples/references/recipes/notification-dropdown.md
@@ -8,6 +8,7 @@ the anchored, dismissable panel and its focus management; the
 The recipe adds the unread count badge, per-item read state, and "mark all read".
 
 ```typescript
+import { cn, demoButton, demoCard, demoPopover } from '../storybook/styles';
 import { ChangeDetectionStrategy, Component, computed, signal } from '@angular/core';
 import { LucideBell, LucideCheckCheck } from '@lucide/angular';
 import { popoverImports } from '@radix-ng/primitives/popover';
@@ -18,7 +19,6 @@ import {
     RdxScrollAreaThumb,
     RdxScrollAreaViewport
 } from '@radix-ng/primitives/scroll-area';
-import { cn, demoButton, demoCard, demoPopover } from '../storybook/styles';
 
 interface Notification {
     id: number;
@@ -51,9 +51,9 @@ interface Notification {
     template: `
         <ng-container rdxPopoverRoot>
             <button
-                [class]="cn(b.base, b.outline, b.size.icon, 'relative')"
                 aria-label="Notifications"
                 rdxPopoverTrigger
+                [class]="cn(b.base, b.outline, b.size.icon, 'relative')"
             >
                 <svg aria-hidden="true" lucideBell size="18"></svg>
                 @if (unreadCount() > 0) {
@@ -65,10 +65,10 @@ interface Notification {
                 }
             </button>
 
-            <div *rdxPopoverPortal [class]="p.positioner" sideOffset="8" align="end" rdxPopoverPositioner>
-                <div [class]="popup" rdxPopoverPopup>
+            <div *rdxPopoverPortal sideOffset="8" align="end" rdxPopoverPositioner [class]="p.positioner">
+                <div rdxPopoverPopup [class]="popup">
                     <div class="border-border flex items-center justify-between border-b px-4 py-3">
-                        <h2 [class]="p.title" rdxPopoverTitle>Notifications</h2>
+                        <h2 rdxPopoverTitle [class]="p.title">Notifications</h2>
                         <button
                             [class]="cn(b.base, b.ghost, b.size.sm, 'gap-1.5 text-xs')"
                             [disabled]="unreadCount() === 0"
@@ -89,9 +89,9 @@ interface Notification {
                                     >
                                         <span
                                             class="mt-1.5 size-2 shrink-0 rounded-full"
+                                            aria-hidden="true"
                                             [class.bg-primary]="!n.read"
                                             [class.bg-transparent]="n.read"
-                                            aria-hidden="true"
                                         ></span>
                                         <span class="min-w-0 flex-1">
                                             <span class="text-foreground block text-sm font-medium">
@@ -209,6 +209,7 @@ A bell button shows the unread count. Opening the popover reveals the list; clic
 marks it read, and "Mark all read" clears the badge.
 
 ```typescript
+import { cn, demoButton, demoCard, demoPopover } from '../storybook/styles';
 import { ChangeDetectionStrategy, Component, computed, signal } from '@angular/core';
 import { LucideBell, LucideCheckCheck } from '@lucide/angular';
 import { popoverImports } from '@radix-ng/primitives/popover';
@@ -219,7 +220,6 @@ import {
     RdxScrollAreaThumb,
     RdxScrollAreaViewport
 } from '@radix-ng/primitives/scroll-area';
-import { cn, demoButton, demoCard, demoPopover } from '../storybook/styles';
 
 interface Notification {
     id: number;
@@ -252,9 +252,9 @@ interface Notification {
     template: `
         <ng-container rdxPopoverRoot>
             <button
-                [class]="cn(b.base, b.outline, b.size.icon, 'relative')"
                 aria-label="Notifications"
                 rdxPopoverTrigger
+                [class]="cn(b.base, b.outline, b.size.icon, 'relative')"
             >
                 <svg aria-hidden="true" lucideBell size="18"></svg>
                 @if (unreadCount() > 0) {
@@ -266,10 +266,10 @@ interface Notification {
                 }
             </button>
 
-            <div *rdxPopoverPortal [class]="p.positioner" sideOffset="8" align="end" rdxPopoverPositioner>
-                <div [class]="popup" rdxPopoverPopup>
+            <div *rdxPopoverPortal sideOffset="8" align="end" rdxPopoverPositioner [class]="p.positioner">
+                <div rdxPopoverPopup [class]="popup">
                     <div class="border-border flex items-center justify-between border-b px-4 py-3">
-                        <h2 [class]="p.title" rdxPopoverTitle>Notifications</h2>
+                        <h2 rdxPopoverTitle [class]="p.title">Notifications</h2>
                         <button
                             [class]="cn(b.base, b.ghost, b.size.sm, 'gap-1.5 text-xs')"
                             [disabled]="unreadCount() === 0"
@@ -290,9 +290,9 @@ interface Notification {
                                     >
                                         <span
                                             class="mt-1.5 size-2 shrink-0 rounded-full"
+                                            aria-hidden="true"
                                             [class.bg-primary]="!n.read"
                                             [class.bg-transparent]="n.read"
-                                            aria-hidden="true"
                                         ></span>
                                         <span class="min-w-0 flex-1">
                                             <span class="text-foreground block text-sm font-medium">
diff --git a/skills/radix-ng-examples/references/recipes/split-button.md b/skills/radix-ng-examples/references/recipes/split-button.md
index 623e94067..2da3db431 100644
--- a/skills/radix-ng-examples/references/recipes/split-button.md
+++ b/skills/radix-ng-examples/references/recipes/split-button.md
@@ -8,11 +8,11 @@ provides the secondary actions in a dropdown. The two `<button>` elements share
 look like one control while staying independently focusable and accessible.
 
 ```typescript
+import { cn, demoButton, demoMenu } from '../storybook/styles';
 import { ChangeDetectionStrategy, Component, signal } from '@angular/core';
 import { LucideChevronDown } from '@lucide/angular';
 import { RdxButtonDirective } from '@radix-ng/primitives/button';
 import { RdxMenuModule } from '@radix-ng/primitives/menu';
-import { cn, demoButton, demoMenu } from '../storybook/styles';
 
 /**
  * Split Button — a primary action joined to a menu of related actions.
@@ -28,32 +28,32 @@ import { cn, demoButton, demoMenu } from '../storybook/styles';
     template: `
         <div class="flex flex-col items-center gap-4">
             <div class="inline-flex rounded-md shadow-sm">
-                <button [class]="cn(b.base, b.primary, b.size.md, 'rounded-r-none')" (click)="run('Save')" rdxButton>
+                <button rdxButton [class]="cn(b.base, b.primary, b.size.md, 'rounded-r-none')" (click)="run('Save')">
                     Save
                 </button>
 
                 <ng-container #root="rdxMenuRoot" rdxMenuRoot>
                     <button
+                        aria-label="More save options"
+                        rdxMenuTrigger
                         [class]="
                             cn(b.base, b.primary, b.size.icon, 'border-primary-foreground/20 rounded-l-none border-l')
                         "
-                        aria-label="More save options"
-                        rdxMenuTrigger
                     >
                         <svg lucideChevronDown size="16"></svg>
                     </button>
 
                     @if (root.open()) {
-                        <div [class]="m.positioner" sideOffset="6" align="end" rdxMenuPositioner>
-                            <div [class]="m.popup" rdxMenuPopup>
-                                <button [class]="m.item" (click)="run('Save and duplicate')" rdxMenuItem>
+                        <div sideOffset="6" align="end" rdxMenuPositioner [class]="m.positioner">
+                            <div rdxMenuPopup [class]="m.popup">
+                                <button rdxMenuItem [class]="m.item" (click)="run('Save and duplicate')">
                                     Save and duplicate
                                 </button>
-                                <button [class]="m.item" (click)="run('Save as template')" rdxMenuItem>
+                                <button rdxMenuItem [class]="m.item" (click)="run('Save as template')">
                                     Save as template
                                 </button>
-                                <div [class]="m.separator" rdxMenuSeparator></div>
-                                <button [class]="m.item" (click)="run('Save and close')" rdxMenuItem>
+                                <div rdxMenuSeparator [class]="m.separator"></div>
+                                <button rdxMenuItem [class]="m.item" (click)="run('Save and close')">
                                     Save and close
                                 </button>
                             </div>
@@ -126,11 +126,11 @@ A primary "Save" action with a menu of related save actions. The primary button
 action; the chevron opens the menu, and selecting an item runs that action and closes the menu.
 
 ```typescript
+import { cn, demoButton, demoMenu } from '../storybook/styles';
 import { ChangeDetectionStrategy, Component, signal } from '@angular/core';
 import { LucideChevronDown } from '@lucide/angular';
 import { RdxButtonDirective } from '@radix-ng/primitives/button';
 import { RdxMenuModule } from '@radix-ng/primitives/menu';
-import { cn, demoButton, demoMenu } from '../storybook/styles';
 
 /**
  * Split Button — a primary action joined to a menu of related actions.
@@ -146,32 +146,32 @@ import { cn, demoButton, demoMenu } from '../storybook/styles';
     template: `
         <div class="flex flex-col items-center gap-4">
             <div class="inline-flex rounded-md shadow-sm">
-                <button [class]="cn(b.base, b.primary, b.size.md, 'rounded-r-none')" (click)="run('Save')" rdxButton>
+                <button rdxButton [class]="cn(b.base, b.primary, b.size.md, 'rounded-r-none')" (click)="run('Save')">
                     Save
                 </button>
 
                 <ng-container #root="rdxMenuRoot" rdxMenuRoot>
                     <button
+                        aria-label="More save options"
+                        rdxMenuTrigger
                         [class]="
                             cn(b.base, b.primary, b.size.icon, 'border-primary-foreground/20 rounded-l-none border-l')
                         "
-                        aria-label="More save options"
-                        rdxMenuTrigger
                     >
                         <svg lucideChevronDown size="16"></svg>
                     </button>
 
                     @if (root.open()) {
-                        <div [class]="m.positioner" sideOffset="6" align="end" rdxMenuPositioner>
-                            <div [class]="m.popup" rdxMenuPopup>
-                                <button [class]="m.item" (click)="run('Save and duplicate')" rdxMenuItem>
+                        <div sideOffset="6" align="end" rdxMenuPositioner [class]="m.positioner">
+                            <div rdxMenuPopup [class]="m.popup">
+                                <button rdxMenuItem [class]="m.item" (click)="run('Save and duplicate')">
                                     Save and duplicate
                                 </button>
-                                <button [class]="m.item" (click)="run('Save as template')" rdxMenuItem>
+                                <button rdxMenuItem [class]="m.item" (click)="run('Save as template')">
                                     Save as template
                                 </button>
-                                <div [class]="m.separator" rdxMenuSeparator></div>
-                                <button [class]="m.item" (click)="run('Save and close')" rdxMenuItem>
+                                <div rdxMenuSeparator [class]="m.separator"></div>
+                                <button rdxMenuItem [class]="m.item" (click)="run('Save and close')">
                                     Save and close
                                 </button>
                             </div>
diff --git a/skills/radix-ng-examples/references/utils/composite.md b/skills/radix-ng-examples/references/utils/composite.md
index 4f7775e61..e72fd7181 100644
--- a/skills/radix-ng-examples/references/utils/composite.md
+++ b/skills/radix-ng-examples/references/utils/composite.md
@@ -49,9 +49,9 @@ registration. Use `data-composite-item-active` on an item when it should provide
 ### Default
 
 ```typescript
+import { cn, demoButton, demoInput } from '../../storybook/styles';
 import { ChangeDetectionStrategy, Component } from '@angular/core';
 import { RdxCompositeItem, RdxCompositeRoot } from '@radix-ng/primitives/composite';
-import { cn, demoButton, demoInput } from '../../storybook/styles';
 
 @Component({
     selector: 'rdx-composite-default',
@@ -66,22 +66,22 @@ import { cn, demoButton, demoInput } from '../../storybook/styles';
                 highlightItemOnHover
                 rdxCompositeRoot
             >
-                <button [class]="itemClass" data-composite-item-active rdxCompositeItem>Overview</button>
-                <button [class]="itemClass" rdxCompositeItem>Metrics</button>
-                <button [class]="itemClass" rdxCompositeItem>Reports</button>
+                <button data-composite-item-active rdxCompositeItem [class]="itemClass">Overview</button>
+                <button rdxCompositeItem [class]="itemClass">Metrics</button>
+                <button rdxCompositeItem [class]="itemClass">Reports</button>
             </div>
 
             <div
                 class="flex w-full flex-wrap items-center gap-2"
-                [disabledIndices]="[2]"
-                [loopFocus]="false"
                 orientation="horizontal"
                 rdxCompositeRoot
+                [disabledIndices]="[2]"
+                [loopFocus]="false"
             >
-                <button [class]="itemClass" rdxCompositeItem>Filter</button>
-                <input [class]="inputClass" rdxCompositeItem value="Search" />
-                <button [class]="itemClass" aria-disabled="true" rdxCompositeItem>Archive</button>
-                <button [class]="itemClass" rdxCompositeItem>Export</button>
+                <button rdxCompositeItem [class]="itemClass">Filter</button>
+                <input rdxCompositeItem value="Search" [class]="inputClass" />
+                <button aria-disabled="true" rdxCompositeItem [class]="itemClass">Archive</button>
+                <button rdxCompositeItem [class]="itemClass">Export</button>
             </div>
         </div>
     `
@@ -103,9 +103,9 @@ Use `CompositeList` when a primitive needs DOM-order registration and metadata w
 keyboard navigation.
 
 ```typescript
+import { cn, demoButton, demoCard } from '../../storybook/styles';
 import { ChangeDetectionStrategy, Component } from '@angular/core';
 import { RdxCompositeList, RdxCompositeListItem, RdxCompositeMetadata } from '@radix-ng/primitives/composite';
-import { cn, demoButton, demoCard } from '../../storybook/styles';
 
 @Component({
     selector: 'rdx-composite-list-only',
@@ -113,14 +113,14 @@ import { cn, demoButton, demoCard } from '../../storybook/styles';
     changeDetection: ChangeDetectionStrategy.OnPush,
     template: `
         <div class="flex w-full max-w-xl flex-col gap-4">
-            <div class="flex flex-wrap items-center gap-2" (onMapChange)="onMapChange($event)" rdxCompositeList>
-                <button [class]="itemClass" [metadata]="{ id: 'overview', label: 'Overview' }" rdxCompositeListItem>
+            <div class="flex flex-wrap items-center gap-2" rdxCompositeList (onMapChange)="onMapChange($event)">
+                <button rdxCompositeListItem [class]="itemClass" [metadata]="{ id: 'overview', label: 'Overview' }">
                     Overview
                 </button>
-                <button [class]="itemClass" [metadata]="{ id: 'metrics', label: 'Metrics' }" rdxCompositeListItem>
+                <button rdxCompositeListItem [class]="itemClass" [metadata]="{ id: 'metrics', label: 'Metrics' }">
                     Metrics
                 </button>
-                <button [class]="itemClass" [metadata]="{ id: 'reports', label: 'Reports' }" rdxCompositeListItem>
+                <button rdxCompositeListItem [class]="itemClass" [metadata]="{ id: 'reports', label: 'Reports' }">
                     Reports
                 </button>
             </div>
diff --git a/skills/radix-ng-examples/references/utils/direction-provider.md b/skills/radix-ng-examples/references/utils/direction-provider.md
index 4107589f7..8daa53a7b 100644
--- a/skills/radix-ng-examples/references/utils/direction-provider.md
+++ b/skills/radix-ng-examples/references/utils/direction-provider.md
@@ -32,9 +32,9 @@ import {
             @for (item of directions; track item.direction) {
                 <section
                     class="border-border bg-card text-card-foreground grid gap-4 rounded-md border p-4 shadow-sm"
+                    rdxDirectionProvider
                     [attr.dir]="item.direction"
                     [direction]="item.direction"
-                    rdxDirectionProvider
                 >
                     <div class="flex items-center justify-between gap-3">
                         <span class="text-sm font-medium">{{ item.label }}</span>
@@ -43,11 +43,11 @@ import {
 
                     <div
                         class="relative w-full select-none"
-                        [(value)]="item.value"
+                        rdxSliderRoot
                         [min]="0"
                         [max]="100"
                         [step]="5"
-                        rdxSliderRoot
+                        [(value)]="item.value"
                     >
                         <div class="flex h-5 w-full touch-none items-center" rdxSliderControl>
                             <div class="bg-muted relative h-1 w-full rounded-full" rdxSliderTrack>
@@ -56,7 +56,7 @@ import {
                                     class="border-border bg-background focus-within:ring-ring block size-5 rounded-full border shadow-sm focus-within:ring-2"
                                     rdxSliderThumb
                                 >
-                                    <input [attr.aria-label]="item.label" rdxSliderThumbInput />
+                                    <input rdxSliderThumbInput [attr.aria-label]="item.label" />
                                 </div>
                             </div>
                         </div>
diff --git a/skills/radix-ng-examples/references/utils/inject-id.md b/skills/radix-ng-examples/references/utils/inject-id.md
index b3608819c..3d3110065 100644
--- a/skills/radix-ng-examples/references/utils/inject-id.md
+++ b/skills/radix-ng-examples/references/utils/inject-id.md
@@ -6,9 +6,9 @@ Each field below calls `injectId('rdx-field-')` in its own injection context, wi
 to the matching `<input id>` without hardcoding an id or risking a collision.
 
 ```typescript
+import { cn, demoInput } from '../../storybook/styles';
 import { ChangeDetectionStrategy, Component, input } from '@angular/core';
 import { injectId } from '@radix-ng/primitives/core';
-import { cn, demoInput } from '../../storybook/styles';
 
 /**
  * Each instance calls `injectId('rdx-field-')` in its injection context, so every
@@ -21,7 +21,7 @@ import { cn, demoInput } from '../../storybook/styles';
     template: `
         <div class="flex flex-col gap-1.5">
             <label class="text-foreground text-sm font-medium" [attr.for]="id">{{ label() }}</label>
-            <input [id]="id" [class]="inputClass" [placeholder]="label()" type="text" />
+            <input type="text" [id]="id" [class]="inputClass" [placeholder]="label()" />
             <code class="text-muted-foreground text-xs">id="{{ id }}"</code>
         </div>
     `
diff --git a/skills/radix-ng-examples/references/utils/live-announcer.md b/skills/radix-ng-examples/references/utils/live-announcer.md
index 62887a1a0..47df41807 100644
--- a/skills/radix-ng-examples/references/utils/live-announcer.md
+++ b/skills/radix-ng-examples/references/utils/live-announcer.md
@@ -6,9 +6,9 @@ The buttons below send messages to the live region. It is visually hidden, so th
 mirrors what assistive technology reads aloud.
 
 ```typescript
+import { cn, demoButton } from '../../storybook/styles';
 import { ChangeDetectionStrategy, Component, inject, signal } from '@angular/core';
 import { RdxLiveAnnouncer } from '@radix-ng/primitives/core';
-import { cn, demoButton } from '../../storybook/styles';
 
 /**
  * Triggers screen-reader announcements through `RdxLiveAnnouncer`. The live region is visually
@@ -21,10 +21,10 @@ import { cn, demoButton } from '../../storybook/styles';
     template: `
         <div class="flex w-80 flex-col gap-4">
             <div class="flex gap-2">
-                <button [class]="cn(b.base, b.primary, b.size.md)" (click)="announce('polite')" type="button">
+                <button type="button" [class]="cn(b.base, b.primary, b.size.md)" (click)="announce('polite')">
                     Announce (polite)
                 </button>
-                <button [class]="cn(b.base, b.outline, b.size.md)" (click)="announce('assertive')" type="button">
+                <button type="button" [class]="cn(b.base, b.outline, b.size.md)" (click)="announce('assertive')">
                     Announce (assertive)
                 </button>
             </div>
diff --git a/tools/scripts/api-doc/build.mjs b/tools/scripts/api-doc/build.mjs
index e32ad3b41..e5447d206 100644
--- a/tools/scripts/api-doc/build.mjs
+++ b/tools/scripts/api-doc/build.mjs
@@ -1,6 +1,3 @@
-import fs from 'fs';
-import path from 'path';
-import * as TypeDoc from 'typedoc';
 import { staticMessages } from './constants.mjs';
 import {
     processComponentEmits,
@@ -17,6 +14,9 @@ import {
     getTypesValue,
     isProcessable
 } from './utils.mjs';
+import fs from 'fs';
+import path from 'path';
+import * as TypeDoc from 'typedoc';
 
 export async function generateComponentsTypeDocs() {
     const app = await TypeDoc.Application.bootstrapWithPlugins({
diff --git a/tools/scripts/skills/generate.mjs b/tools/scripts/skills/generate.mjs
index 9ae28c619..48b9ed90e 100644
--- a/tools/scripts/skills/generate.mjs
+++ b/tools/scripts/skills/generate.mjs
@@ -15,11 +15,11 @@
  * The hand-authored skill body (skills/radix-ng/SKILL.md + its reference *.md files) is
  * not touched.
  */
+import { generateApiContract } from './api-contract.mjs';
+import { getStorybookDocs } from './storybook-docs.mjs';
 import fs from 'node:fs';
 import path from 'node:path';
 import { fileURLToPath } from 'node:url';
-import { generateApiContract } from './api-contract.mjs';
-import { getStorybookDocs } from './storybook-docs.mjs';
 
 const __dirname = path.dirname(fileURLToPath(import.meta.url));
 const workspaceRoot = path.resolve(__dirname, '../../..');
diff --git a/tools/scripts/skills/storybook-docs.mjs b/tools/scripts/skills/storybook-docs.mjs
index 5c69da2b6..4a0e08b49 100644
--- a/tools/scripts/skills/storybook-docs.mjs
+++ b/tools/scripts/skills/storybook-docs.mjs
@@ -8,7 +8,7 @@
  * actual example source (resolved through each story's `?raw` import or inline template),
  * and Storybook-only blocks (Meta/Controls/ArgTypes/imports) are stripped.
  */
-import { existsSync, readFileSync, readdirSync } from 'node:fs';
+import { existsSync, readdirSync, readFileSync } from 'node:fs';
 import path from 'node:path';
 import { fileURLToPath } from 'node:url';